前端优化

项目加载的内容越来越多，但首屏加载的速度却会被拖慢，所以就需要作出对应的优化。

1、分析

1)、采用webpack-bundle-analyzer插件

   用的vue-cli 2.x脚手架已经自带的该分析工具，运行时带上--report

npm run build --report 或 yarn  build --report

如果是vue-cli 3的话，可先安装插件（我觉得也可以先运行下，如果没有report.html文件再安装插件）

npm install webpack-bundle-analyzer -save-dev

然后在vue.config.js中对webpack进行配置

chainWebpack: config => {
         /* 添加分析工具 */
        if(process.env.NODE_ENV === 'production'){
          if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                .end();
            config.plugins.delete('prefetch')
          }
        }
}

再运行 npm run build --report 或 yarn  build --report

在打包文件夹dist中找到对应report.html

打开后就可以比较直观查看各个文件大小，进行相应缩减

2）、coverage工具

浏览器中的coverage工具，默认是没有展示出来，需要找出来：

红色是下载了 但未使用的部分

2、减量

进行了分析之后，我们就知道问题出来哪里，再进行对应操作。

1）、路由懒加载

2）、关闭sourceMap

    即在vue.config.js中将productionSourceMap的值修改为false，就可以在编译时不生成.map文件了

3）、开启gzip

• 首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true
• 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是：

  npm install --save-dev compression-webpack-plugin 
  //(此处有坑) 如果打包报错，应该是版本问题 ，先卸载之前安装的此插件 ，然后安装低版本 
  npm install --save-dev compression-webpack-plugin@1.1.11

• 等安装好了，重新打包 npm run build ，此时打包的文件会 新增 .gz 文件。是不是比原来的js文件小很多呢，之后项目访问的文件就是这个.gz文件