16、webpack代码分离--防止公用代码的重复导入

电玩女神 2022-01-15 11:21 196阅读 0赞

**防止重复(prevent duplication)**

webpack 官网文档里建议使用CommonsChunkPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。但是实际上这个插件在4.3的版本中已经移除，你使用这个插件编译后汇报错，出现“Webpack.optimize.CommonsChunkPlugin has been removed, please use config .optimization.splitChunks instead”的错误。

我们这里就按照错误的说法，改换splitChunks 配置

1、修改webpakc.config.js

2、编译代码

> npm run build
    
    > code-split@1.0.0 build D:\dev\work\webpackwork\code-split
    > webpack --config webpack.config.js --display-modules
    
    Hash: f70df65eddffc3177870
    Version: webpack 4.33.0
    Time: 1220ms
    Built at: 2019-06-12 19:36:17
                Asset       Size  Chunks             Chunk Names
    another.bundle.js  187 bytes       2  [emitted]  another
      index.bundle.js  239 bytes       3  [emitted]  index
           index.html  383 bytes          [emitted]
    runtime.bundle.js   1.42 KiB       0  [emitted]  runtime
    vendors.bundle.js   69.4 KiB       1  [emitted]  vendors
    Entrypoint index = runtime.bundle.js vendors.bundle.js index.bundle.js
    Entrypoint another = runtime.bundle.js vendors.bundle.js another.bundle.js
    [0] ./node_modules/lodash/lodash.js 527 KiB {1} [built]
    [1] ./src/index.js 357 bytes {3} [built]
    [2] (webpack)/buildin/global.js 472 bytes {1} [built]
    [3] (webpack)/buildin/module.js 497 bytes {1} [built]
    [4] ./src/another-module.js 94 bytes {2} [built]

※ 会发现lodash.js被打包到1模块中（runtime.bundle.js)中。

以下是由社区提供的，一些对于代码分离很有帮助的插件和 loaders：

*  [ExtractTextPlugin][]: 用于将 CSS 从主应用程序中分离。
 *  [bundle-loader][]: 用于分离代码和延迟加载生成的 bundle。
 *  [promise-loader][]: 类似于 bundle-loader ，但是使用的是 promises。

[ExtractTextPlugin]: https://www.webpackjs.com/plugins/extract-text-webpack-plugin
[bundle-loader]: https://www.webpackjs.com/loaders/bundle-loader
[promise-loader]: https://github.com/gaearon/promise-loader