1.分析影响加载速度的原因

查看资源加载时间，分析是哪些资源加载缓慢

2.利用webpack-bundle-analyzer 分析器，分析项目依赖关系

插件使用：

// 文件路径 build --> webpack.prod.conf.js   
//增加以下配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
...
plugins: [
    ...
    new BundleAnalyzerPlugin(),
    ...
]

添加上面代码之后，运行打包命令 npm run build,打包成功后会自动弹出 127.0.0.1:8888 像下面一样，看到许多小块，每个小块对应每个模块，小块越大文件越大
vendor.js 是被依赖 (第三方库) 充大的，所以先检查每个依赖，是否存在引入但没有使用的==闲置依赖包==

3.项目依赖优化

依赖优化之 CDN 加速

将自己的源码跟第三方库代码分离，减小项目体积，利用别人的服务器去请求第三方库，来减轻自己服务器的压力
针对体积比较大的一些钢需依赖，选择CDN加速的方式（以 echarts 来举例）

在 index.html 文件中CDN引入第三方依赖

//index.html
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

配置webpack 来分离 echarts

//文件路径 build --> webpack.base.conf.js

module.exports = {
     externals: { //externals 里的库不会被webpack打包
        echarts: 'echarts',
     },   
}

在需要使用依赖的地方 import 进来就可以

再次 npm run build 的时候，echarts 就不会被打包进去， vendor.js的体积就会减小

gzip暴力压缩

nginx开启 gzip 模式

vue开启 gzip

1.安装compression-webpack-plugin

 npm i compression-webpack-plugin@1.1.12 --save-dev

注意这里的版本 @1.1.12 如果不加版本号在 npm run build 时会报错因为compression最新版本跟webpack版本不匹配

2.配置 gzip

//文件路径  config --> index.js
 build: {
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,      //之前时false  改为true
    productionGzipExtensions: ['js', 'css'],
 }