lodash作為一個(gè)比較常用的前端開發(fā)工具集，在使用webpack進(jìn)行vendor分離的實(shí)踐中，會(huì)遇到將整個(gè)lodash文件分離到vendor.js的問題。這樣會(huì)使vendor.js文件變得特別大。
webpack.config.js文件代碼如下：
var path = require('path');
module.exports = mode => {
return {
entry: {
A: './moduleA.js',
B: './moduleB.js',
C: './moduleC.js',
},
mode: mode,
output: {
path: path.resolve(__dirname, 'dist/'),
filename: '[name].js'
},
optimization: {
usedExports: true,
splitChunks: {
cacheGroups: {
commons: {
chunks: 'all',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0
},
vendor: {
test: /node_modules/,
chunks: "initial",
name: "vendor",
priority: 10,
enforce: true
}
}
}
},
module: { },
plugins: [ ]
}
}
運(yùn)行npm run test腳本命令，結(jié)果如下：
Hash: 5d86af7ed04c57cca071
Version: webpack 4.28.4
Time: 5707ms
Built at: 2019-01-11 19:25:04
Asset Size Chunks Chunk Names
A.js 1.46 KiB 3 [emitted] A
B.js 1.53 KiB 4 [emitted] B
C.js 1.54 KiB 5 [emitted] C
commons~A~B~C.js 132 bytes 0 [emitted] commons~A~B~C
commons~A~C.js 238 bytes 1 [emitted] commons~A~C
vendor.js 69.7 KiB 2 [emitted] vendor
Entrypoint A = vendor.js commons~A~B~C.js commons~A~C.js A.js
Entrypoint B = commons~A~B~C.js B.js
Entrypoint C = vendor.js commons~A~B~C.js commons~A~C.js C.js
如上面的情況，vendor.js文件為69.7kb，如果再引用了其他第三方庫(kù)，文件會(huì)更大。
那么，如何在開發(fā)的過程中，壓縮lodash呢？
babel-loader & babel-plugin-lodash
可以使用babel-loader在對(duì)*.js文件進(jìn)行解析，然后借助于babel-plugin-lodash插件對(duì)引用的lodash進(jìn)行類似tree shaking的操作，這樣就可以去除未使用的lodash代碼片段。
安裝所需依賴：
yarn add babel-loader @babel/core @babel/preset-env babel-plugin-lodash --dev
像下面這樣修改webpack.config.js配置文件：
...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['lodash']
}
}
}
]
}
...
運(yùn)行npm run test，腳本命令結(jié)果如下：
Hash: 30def5521978552cc93d
Version: webpack 4.28.4
Time: 3249ms
Built at: 2019-01-11 21:25:23
Asset Size Chunks Chunk Names
A.js 1.46 KiB 3 [emitted] A
B.js 1.53 KiB 4 [emitted] B
C.js 1.54 KiB 5 [emitted] C
commons~A~B~C.js 132 bytes 0 [emitted] commons~A~B~C
commons~A~C.js 226 bytes 1 [emitted] commons~A~C
vendor.js 502 bytes 2 [emitted] vendor
Entrypoint A = vendor.js commons~A~B~C.js commons~A~C.js A.js
Entrypoint B = commons~A~B~C.js B.js
Entrypoint C = vendor.js commons~A~B~C.js commons~A~C.js C.js
vendor.js文件從69.7kb降至502bytes。
根據(jù)babel-plugin-lodash參考文檔介紹，使用lodash-webpack-plugin可以進(jìn)一步壓縮lodash。
lodash-webpack-plugin
安裝lodash-webpack-plugin依賴：
yarn add lodash-webpack-plugin --dev
修改webpack.config.js配置文件如下：
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
...
plugins: [
new LodashModuleReplacementPlugin,
]
...
運(yùn)行npm run test腳本命令，結(jié)果如下所示：
Hash: 30def5521978552cc93d
Version: webpack 4.28.4
Time: 2481ms
Built at: 2019-01-11 21:07:23
Asset Size Chunks Chunk Names
A.js 1.46 KiB 3 [emitted] A
B.js 1.53 KiB 4 [emitted] B
C.js 1.54 KiB 5 [emitted] C
commons~A~B~C.js 132 bytes 0 [emitted] commons~A~B~C
commons~A~C.js 226 bytes 1 [emitted] commons~A~C
vendor.js 502 bytes 2 [emitted] vendor
Entrypoint A = vendor.js commons~A~B~C.js commons~A~C.js A.js
Entrypoint B = commons~A~B~C.js B.js
Entrypoint C = vendor.js commons~A~B~C.js commons~A~C.js C.js
vendor.js依然是502 bytes，問題不在loadsh-webpack-plugin，它雖然會(huì)進(jìn)一步優(yōu)化lodash，但是在無法進(jìn)一步優(yōu)化的情況下，它也沒辦法。
一般情況下，不使用lodash-webpack-plugin就可以滿足開發(fā)的需要，但是文件特別大的情況下，建議還是使用它。
