webpack-代码拆分模式详解

看了官方文档以后发现splitChunks.chunks能够接收initial、async、all，很困惑这三种分割代码模式的区别，如今咱们引入例子来探索一下：

下面有两个脚本文件a.js、b.js，两个文件有一些相同的引入，包括动态加载，咱们使用Webpack Bundle Analyzer Plugin插件来分析模块是如何进行拆分的。

一、chunks：'async'优化动态加载模块

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  entry: {
    a: './code_split_mode/a.js',
    b: './code_split_mode/b.js'
  },
  output: {
    path: path.resolve(__dirname, 'build'), // 打包文件的输出目录
    filename: '[name].bundle.js', // 代码打包后的文件名
    publicPath: __dirname + '/build/', // 引用的路径或者 CDN 地址
    chunkFilename: '[name].js' // 代码拆分后的文件名
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  // 拆分代码配置项
  optimization: {
    splitChunks: {
      cacheGroups: {
        node_vendors: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'async',
          priority: 1
        }
      }
    }
  },
  plugins: [
    new CleanWebpackPlugin(), // 会删除上次构建的文件，而后从新构建
    new BundleAnalyzerPlugin()
  ]
}

执行效果：

!

async 模式下的输出

• 在 a,b 中均同步引入的 jquery 被打包进了各自的 bundle 中没有拆分出来共用，由于这种模式下只会优化动态加载的代码。

• react 打了两份

  • 一份在a 本身的 bundle 中，由于它同步引入了 react，而咱们只优化动态加载的代码，因此这里的 react 不会被优化拆分出去。
  • 一份在单独的文件中，它是从 b 里面拆出来的，由于 b 中动态加载了 react。
• lodash 由于在 a,b 中都是动态加载，造成了单独的 chunk 被 a, b 共用。

二、chunks：'initial'优化同步加载模块

在webpack.config.js配置中将chunks: 'async'改为'initial'。

initial模式下的输出

initial即原始的拆分，原则就是有共用的状况即发生拆分。动态引入的代码不受影响，它是不管如何都会走拆分逻辑的（毕竟你要动态引入嘛，不拆分红单独的文件怎么动态引入？！）。而对于同步引入的代码，若是有多处都在使用，则拆分出来共用。

• jquery 在这种模式下发生了变化。造成了单独的 chunk 供 a,b 共用。
• react 没有变，由于它在 a,b 中引用的方式不一样，因此不会被当成同一个模块拆分出来共用，而是走各自的打包逻辑。在 a 中同步引用，被打入了 a 的 bundle。在 b 中动态引入因此拆分红了单独的文件供 b 使用。
• lodash 没变，造成单独一份二者共用。

三、chunks：'all'优化同步和动态加载模块

从上面initial模式下咱们彷佛看出了问题，即 在 a 中同步引入在 b 中动态引入的 react，它其实能够被抽成文件供二者共用的，只是由于引入方式不一样而没有这样作。

因此all这种模式下，就会智能地进行判断以解决这个问题。此时不关心引入的模块是动态方式仍是同步方式，只要能正确判断这段代码确实能够安全地进行拆分共用，那就干吧。

须要注意的是这里须要设置minSize以使react可以正确被拆分，由于它小于 30k，在同步方式下，默认不会被拆分出来（联想文章开头提到的那些条件）。

cacheGroups: {
 vendor: {
    chunks: "all",
    test: /[\\/]node_modules[\\/]/,
    minSize: 0,
 }
}

四、结论

看起来彷佛all是最好的模式，由于它最大限度地生成了复用的代码，Webpack 默认就走这个模式打包不就得了。

参考连接：
https://github.com/wayou/wayou.github.io/issues/40
https://medium.com/dailyjs/webpack-4-splitchunks-plugin-d9fbbe091fd0