webpack4 分包(splitChunks)

前言

用过webpack已经很久了，一直没有好好研究过分包，今天花点时间来好好研究下这个。

优势

打包优化： 公共代码提取，体积变小
用户体验优化：按需加载，下载更快，白屏更短

过程

module、chunk和bundle

要研究分包，首先要分清这三个概念

module: 模块，每个import 都是一个module模块

chunk: 依赖链路模块，我的个人理解，因为从一开始的entry配的入口文件开始，随着递归寻找其他的依赖文件，最后把所有的依赖串起来，这就是一个chunk。但是我们可以拆分多个chunk：

通过entry配置多入口文件
配置splitChunk支持同步、异步按需引入，使用同一个chunk

bundle: 就是指bundle，这个和chunk是一一对应的，只不过chunk是编译压缩前的，bundle是编译压缩后的。

分包方式

entry多入口打包

webpack配置

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'none',
  entry: { // 将entry定义成一个对象，来设置多个打包入口
    index: './src/index.js',
    album: './src/album.js'
  },
  output: { // 修改输出文件名
    // 通过[name]这种占位符的方式动态输出文件名，[name]最终就会替换成打包入口名称
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Multi Entry',
      template: './src/index.html',
      filename: 'index.html'
    }),
    new HtmlWebpackPlugin({
      title: 'Multi Entry',
      template: './src/album.html',
      filename: 'album.html'
    })
  ]
}

可以看到生成了多个 chunk\ bundle\ js文件

提取公共模块

在 index.js 和 alubm.js 中都有对公共模块的引入

可以将这些公共模块提取出来，在 webpack.config.js 中的 optimization 添加一个 splitChunks 进行配置

optimization: {
    splitChunks: {
       // 自动提取所有公共模块到单独 bundle
       chunks: 'all'
    }
  }

打包后会生成一个公共模块

splitChunks配置的chunks有三个值：async 、initial、all

async：chunks的默认值，提取异步加载的模块，打包成单独文件。
initial：提取异步和同步加载的模块(普通import不属于同步也不属于异步)，打包成单独文件，就算这个文件被同步引入了，也被异步引入了，也会打包成两个文件。
all: 提取异步和同步加载的模块，就算这个文件被同步引入了，也被异步引入了，也会打包成一个文件。

举例：

async: loadsh这个包被多个文件异步引入，是会被打成一个公共包的
initial:  loadsh这个包被多个文件异步引入或被多个文件同步引入 ，是会被打成一个公共包的，如果同时被多个文件异步引入或和多个文件同步引入会被打成两个包
all:  loadsh这个包被多个文件异步引入或被多个文件同步引入 ，是会被打成一个公共包的，如果同时被多个文件异步引入或和多个文件同步引入也会被打成一个包