如何将未声明sideEffects的大型依赖从Webpack4构建bundle拆分为独立chunk

完全可以不使用动态导入实现依赖拆分，通过Webpack 4原生的splitChunks配置即可实现，具体操作如下：

核心配置方法 #

在webpack.config.js的optimization节点下配置拆分规则，直接指定要抽离的依赖即可，示例配置：

module.exports = {
  // 其余基础配置省略
  optimization: {
    splitChunks: {
      chunks: 'all', // 覆盖默认仅处理异步chunk的限制，同时处理初始加载的模块
      cacheGroups: {
        standaloneDep: {
          test: /[\\/]node_modules[\\/]目标依赖的包名[\\/]/, // 匹配要拆分的依赖路径，[\\/]兼容多系统路径分隔符
          name: '独立chunk的输出文件名', // 拆分后生成的chunk名称
          priority: 10, // 优先级设为高于其他缓存组，避免被其他通用拆分规则合并
          enforce: true // 强制抽离，忽略默认的体积阈值、chunk数量限制，保证一定会拆分
        }
      }
    }
  }
}

工具库场景的适配说明 #

如果当前项目是对外提供的工具库，可根据使用场景选择配套优化方案：

• 如果你可以接受使用方同时加载多个chunk，在output配置项中指定合理的publicPath，保证使用方可以正常加载拆分出的独立chunk即可
• 如果你希望进一步减小工具库体积，也可以直接将该依赖配置到externals节点，完全不将其打进产物，由使用方自行安装引入该依赖

配置不生效排查方式 #

• 打包时添加--display-modules参数查看模块加载路径，核对test的正则是否正确匹配到目标依赖
• 确认没有其他优先级更高的缓存组匹配到了该依赖，导致规则被覆盖

内容的提问来源于stack exchange，提问作者Giovanni Benussi