Vue build打包优化

1、路由懒加载

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

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

2、不生成.map 文件

• webpack默认会生成map文件，map文件是用来调试代码的。
• build配置如下在 config => index.js 里面
• 默认是true ,改成false
  

3、 gzip压缩

• 先安装依赖 compression-webpack-plugin

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

• 打开 config=>index.js ，找到 build 对象中的 productionGzip ，改成 true
  

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

• 后台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

• 修改build=>webpack.prod.conf.js

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

4、关闭debug和console

• 打开build=>webpack.prod.conf.js ,添加drop_debugger 和 drop_console

  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false,
        // 以下两行配置，关闭 debug 和 console
        drop_debugger:true,
        drop_console:true
      }
    },