19

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: 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,如果再引用了其他第三方库,文件会更大。

那么,如何在开发的过程中,压缩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: 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

根据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: 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,它虽然会进一步优化lodash,但是在无法进一步优化的情况下,它也没办法。

一般情况下,不使用lodash-webpack-plugin就可以满足开发的需要,但是文件特别大的情况下,建议还是使用它。

参考源代码


缘自世界
3.5k 声望8.4k 粉丝

心态很重要,我始终相信没有不会做的,只有不想做的,在这个人人都聪明的今天,你不凭智慧,只需努力就能打败90%的对手,如果你再展现出你50%的智慧,我想没有什么问题可以难倒你。