《你不瞭解的webpack》第二期

打包可視化、打包體積、速度優化及代碼優化(webpack3.6.0)

一.打包可視化webpack-bundle-analyzer

• 1.下載

npm install --save-dev webpack-bundle-analyzer

• 2.在webpack.prod.conf.js配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 
... plugins:[ new BundleAnalyzerPlugin({   
        analyzerHost:'localhost', //ip默認是127.0.0.1   
        analyzerPort:8882, //端口號可自定義   
        openAnalyzer: false,//默認是true自動打開可視化界面 
        analyzerMode:'server' | 'static' | 'disabled',//默認是server模式,若不想分析則設置disabled }),  
    ]

二.打包速度優化

happypack

先看使用這個以前的打包速度大小

• 1.下載

npm install --save-dev happypack

• 2.配置

在webpack.base.conf.js配置

module: { 
    rules: [  
         {    
            test: /.js$/,     
            // loader: 'babel-loader',     
            loader: 'happypack/loader?id=happy-babel-js', // 增長新的HappyPack構建loader     
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]   
            },   
    ] 
},
plugins:[     
    new HappyPack({       
        id: 'happy-babel-js',       
        loaders: ['babel-loader?cacheDirectory=true'],       
        threadPool: happyThreadPool,    
    }) 
]

用了以後的打包速度

總結:43685ms ->>43252ms

三.dll~打包速度/體積雙重優化

配置

1.在index.html

<script type="text/javascript" src="./static/js/vendor.dll.js"></script>

2.在package.json

"dll": "webpack --config ./build/webpack.dll.config.js --progress"

3.在build目錄新增webpack.dll.config.js

const path = require("path") 
const webpack = require("webpack") 
module.exports = {   
    // 你想要打包的模塊的數組   
    entry: {      
        vendor: ['vue/dist/vue.esm.js'] //自定義添加分離打包的插件(看各項目配置文件)   
    },   
    output: {     
        path: path.join(__dirname, '../static/js'), // 打包後文件輸出的位置     
        filename: '[name].dll.js',     
        library: '[name]_library'   
    },   
    plugins: [     
        new webpack.DllPlugin({       
            path: path.join(__dirname, '.', '[name]-manifest.json'),       
            name: '[name]_library',       
            context: __dirname     }),     // 壓縮打包的文件     
            new webpack.optimize.UglifyJsPlugin({       
                comspanss: {         
                    warnings: false       
                }     
        })   
    ] 
}

4.在webpack.dev.conf.js與webpack.prod.conf.js目錄添加

new webpack.DllReferencePlugin({     
    context: __dirname,     
    manifest: require('./vendor-manifest.json') 
}),

5.運行

npm run dll

先後對比	All	Vendors	使用dll前
使用dll前	7.55M	5.03M	38401ms
使用dll後	7.2M	4.76M	36126ms

遇到的bug：

• 1.bug1
  

  解決:

  entry: {   vendor: [     "sass-loader" //去掉這個就行了   ] },

• 2.bug2
  

  解決:

  entry: {   vendor: [     "http-proxy-middleware"//去掉這個就行了   ] },

• 3.bug3~樣式丟失
  

  解決:

  entry: {   vendor: [     "element-ui"//去掉這個就行了   ] },

• 4.bug4
  

解決:在使用el-form-item標籤時，外層沒有加el-form，致使出現報錯

• 5.bug5
  

解決:在config/index.js將productionSourceMap設置爲false，默認是true

注意:1.vendor裏面每新增一個，則須要npm run dll生成對應的文件,而後再npm run build(很重要)

四.打包體積優化externals

先看用這個以前的大小

• 1.配置

1.在webpack.base.conf.js

externals: {  
//須要分離的第三方插件   
'vue': 'Vue',   
'element-ui': 'ELEMENT',  //記住,element-ui是基於vue的,分離element-ui須要加上vue 
},

2.在index.html

<link href="https://cdn.bootcss.com/element-ui/2.14.1/theme-chalk/index.css" rel="stylesheet">``<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.14.1/index.js"></script>

3.在main.js

• 去掉

import ElementUI from 'element-ui' 
import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI)

• 新增(可加可不加)

const Vue = require('vue') 
const ElementUI = require('element-ui') 
const axios = require('axios')

用了以後的大小

先後對比	All	Vendors	使用dll前
使用externals前	8.86	6.42	42437ms
使用externals後	2.35M	85.18kb	14102ms

總結:externals分離功能仍是挺強大的,好比分離第三方庫element-ui

• 1.使用可能遇到的bug1
  
• 2.使用可能遇到的bug2
  

bug痛點:

bug1產生的緣由是element-ui在package.json裏面的配置沒有去掉,項目默認加載的是package.json裏面的依賴，因此還須要去掉package.json裏面的element-ui，而後從新cnpm i，npm run build

bug2產生的緣由是頁面使用了vue-router-tab,若把vue分離,則報錯bug2

• 3.bug3
  
  在webpack.base.conf.js配置的

externals: { 
    //須要分離的第三方插件     
    //'vue': 'Vue',     
    'element-ui': 'ELEMENT', 
},

bug痛點:單獨分離element-ui會報這個錯,由於elemnt-ui 是基於vue書寫的,必定要先引入vue文件,順序不要亂。

總結:分離第三方庫element-ui使用externals剛開始的時候各類報錯，後來網上找百度,google就查到對應的答案,「只要功夫深，鐵杵磨成針」,路是一步步走出來的,堅持就是勝利。

五.代碼優化

• 1.經過配置UglifyJsPlugin去掉console.log

new UglifyJsPlugin({   
    uglifyOptions: {     
        comspanss: {       
            warnings: false,       
            drop_console:false,     
        }   
    },   
    sourceMap: config.build.productionSourceMap,   
    parallel: true //啓用/禁用多進程並行運行 
}),

六.打包以後報錯

總結:

報錯是由於element-ui版本不對，應該升爲最高級2.14.1

文中的代碼可能不必定是最優代碼，要是你有更好的代碼歡迎評論。喜歡的能夠給我點贊鼓勵哦!
碼字不易,屏幕前的大帥比,更多幹貨文章請關注!!!

備註:★部分素材來自網絡，版權歸原創者，若有侵權請聯繫刪除