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局部引用，但樣式是全局引用的