webpack之SplitChunksPlugin

使用 SplitChunksPlugin 提取 chunks 中的公共代码，生成新的 chunk

• chunk 的三种情况

  • 项目入口 entry
  • 通过import()动态引入的代码
  • 通过 splitChunks 拆分出来的代码

• splitChunks 默认配置（部分）

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async', // chunk 类别， async 查动态导入模块（import），all 查全部，initial - 非动态
      minSize: 20000, // 最小大小
      minChunks: 1, // 最小引用数
      automaticNameDelimiter: '~', // 生成 chunk 文件名中的连接符
      cacheGroups: { // 继承或重写 splitChunks.*
        defaultVendors: { // cacheGroups 名
          test: /[\\/]node_modules[\\/]/, // 文件过滤，省略查询所有模块
          priority: -10, // 权重
        },
        default: {	 // 
          minChunks: 2,
          priority: -20,
        }
      }
    }
  }
};

多项目入口提取 公共chunk

// a.js
import './helpers.js'

// b.js
import './helpers.js'

// helpers.js
console.log('helpers')

module.exports = {
	// ...
  entry: {
    a: path.resolve(__dirname, './src/a.js'),
    b: path.resolve(__dirname, './src/b.js')
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js'
  },
  optimization: {
    splitChunks: {
      cacheGroups: { // 继承或重写 splitChunks.*
        default: {
          name: 'common', // chunk 名称
          chunks: 'initial', // chunk 类别
          minSize: 0, // 最小大小
          minChunks: 2,
          priority: -20,
        }
      }
    }
  }
}

node_modules 提取 chunk

// a.js
import './helpers.js'

// helpers.js
console.log('helpers')


import _ from 'lodash'

console.log(_.join(['Hello', 'webpack'], ' '));

module.exports = {
  entry: {
    a: path.resolve(__dirname, './src/a.js'),
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js'
  },
  optimization: {
    splitChunks: {
      cacheGroups: { // 继承或重写 splitChunks.*
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial', // chunk 类别
          name: 'vendors'
        },
      }
    }
  }
}

开箱即用的 splitChunks （使用默认值）

• 动态导入，使用 lodash 依赖，生成两个 chunk

// a.js
import(/* webpackChunkName: "helpers" */'./helpers')

// helpers.js
console.log('helpers')
import _ from 'lodash'

console.log(_.join(['Hello', 'webpack'], ' '));

• 参考链接
  • https://webpack.docschina.org/plugins/split-chunks-plugin/#optimizationsplitchunks
  • https://www.cnblogs.com/kwzm/p/10314438.html
• 测试代码
  • https://github.com/baixc1/csdn/tree/master/note/note14