npm run build 打包爬坑记（3）打包压缩优化

之前打包完后给后台，很好能展示出来，但是verdor很大，加载超级慢，用了路由懒加载，才好多了，但还是没有达到想要的效果，那就继续优化吧，以下是我的优化过程，有些可能不沾边或者还没解决的，欢迎留言分享，多谢

1. 路由懒加载
   这个在npm run build 打包爬坑记第5条中已说明

2. main.js优化思路
   这是个老话题了，项目中一般都需要引入插件，例如：mint-ui，但不能在main.js全局中直接全部引用，这样会导致很多无用的代码，所以建议尽量局部引用，自己写的各种需要引用的也一样；
   或者全局引用需要的部分，无关的能不用就不用了

3. 压缩代码
   config/index.js中build部分：
   productionGzip: true,
   productionGzipExtensions: [‘js’, ‘css’],
   这个就是压缩，我是webpack3.x的，开启压缩就发现了好多问题，最主要的要升级到4.x,压缩完后记得让后台也开启gzip压缩

4. 压缩代码引出的webpack3.x升级到4.x
   这是一个逼着你认识webpack的好方法，加油，我之前写过半部分，还有一些是升级过程中出现问题，只能遇见一个解决一个

5. 线上去掉查看源码功能
   同图6：5 压缩js时：sourceMap：false

6. 去掉console.log、警告、注释、debugger
   webpack.prod.conf中UglifyJsPlugin配置
   

new UglifyJsPlugin({
    uglifyOptions: {
    	output:{
        comments:false,
       },
       compress: {
           warnings: false,
           drop_console: true,
           drop_debugger:true,
           pure_funcs: ['console.log']
       }
    },
    cache: true,
    parallel: true,
    sourceMap: false // set to true if you want JS source maps
}),

7. 缓存
   同图6：7

8. 去掉注释
   同图6：8

9. 全局样式的引用导致多次引用

10. mint-ui局部引用，但样式是全局引用的