Vue打包优化

1、路由懒加载

• 当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
  所以在router文件夹下 index.js 做如下配置

{ 
  path: '/fourKey',
  meta: {
    requireAuth: true // 配置此条，进入页面前判断是否需要登陆
  },
        component:resolve => require(['@/views/auth/fourKey'],resolve)
}

2、不生成.map 文件

• webpack默认会生成map文件，map文件是用来调试代码的。此外，这里还要注意sourcemap的配置分 开发（dev）和线上（build）两个地方配置，开发我们就不管了，就用默认的，线上我们是不需要这个代码的。

build配置如下在 config ==> index.js 里面

productionSourceMap: false,

3、 gzip压缩

3.1 首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true

3.2 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是：

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

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

3.4 后台nginx开启gzip模式访问，浏览器访问项目，自动会找到 .gz 的文件。加载速度明显提高。

• 开启 nginx gzip ,在 nginx.conf 配置文件中 配置

http {  //在 http中配置如下代码，
  
   gzip on;
   gzip_disable "msie6"; 
   gzip_vary on; 
   gzip_proxied any;
   gzip_comp_level 8; #压缩级别
   gzip_buffers 16 8k;
   #gzip_http_version 1.1;
   gzip_min_length 100; #不压缩临界值
   gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
 }

• 保存退出 ，并 重启 nginx

3.5 修改build/webpack.prod.conf.js

• asset这个选项是无效的，要改成filename。

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

4、关闭debug和console

• 打开webpack.prod.conf.js 添加 drop_debugger 和 drop_console

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          // 以下两行配置，关闭 debug 和 console
          drop_debugger:true,
          drop_console:true
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),