webpack最小化lodash

lodash作为一个比较常用的前端开发工具集，在使用webpack进行vendor分离的实践中，会遇到将整个lodash文件分离到vendor.js的问题。这样会使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: [ ] }}运行npm run test脚本命令，结果如下：Hash: 5d86af7ed04c57cca071Version: webpack 4.28.4Time: 5707msBuilt 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] CcommonsABC.js 132 bytes 0 [emitted] commonsABC commonsAC.js 238 bytes 1 [emitted] commonsAC vendor.js 69.7 KiB 2 [emitted] vendorEntrypoint A = vendor.js commonsABC.js commonsAC.js A.jsEntrypoint B = commonsABC.js B.jsEntrypoint C = vendor.js commonsABC.js commonsAC.js C.js如上面的情况，vendor.js文件为69.7kb，如果再引用了其他第三方库，文件会更大。那么，如何在开发的过程中，压缩lodash呢？babel-loader & babel-plugin-lodash可以使用babel-loader在对*.js文件进行解析，然后借助于babel-plugin-lodash插件对引用的lodash进行类似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’] } } } ]}…运行npm run test，脚本命令结果如下：Hash: 30def5521978552cc93dVersion: webpack 4.28.4Time: 3249msBuilt 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] CcommonsABC.js 132 bytes 0 [emitted] commonsABC commonsAC.js 226 bytes 1 [emitted] commonsAC vendor.js 502 bytes 2 [emitted] vendorEntrypoint A = vendor.js commonsABC.js commonsAC.js A.jsEntrypoint B = commonsABC.js B.jsEntrypoint C = vendor.js commonsABC.js commonsAC.js C.jsvendor.js文件从69.7kb降至502bytes。根据babel-plugin-lodash参考文档介绍，使用lodash-webpack-plugin可以进一步压缩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,]…运行npm run test脚本命令，结果如下所示：Hash: 30def5521978552cc93dVersion: webpack 4.28.4Time: 2481msBuilt 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] CcommonsABC.js 132 bytes 0 [emitted] commonsABC commonsAC.js 226 bytes 1 [emitted] commonsAC vendor.js 502 bytes 2 [emitted] vendorEntrypoint A = vendor.js commonsABC.js commonsAC.js A.jsEntrypoint B = commonsABC.js B.jsEntrypoint C = vendor.js commonsABC.js commonsA~C.js C.jsvendor.js依然是502 bytes，问题不在loadsh-webpack-plugin，它虽然会进一步优化lodash，但是在无法进一步优化的情况下，它也没办法。一般情况下，不使用lodash-webpack-plugin就可以满足开发的需要，但是文件特别大的情况下，建议还是使用它。参考源代码