使用import()动态加载CSS时Webpack生成额外JS chunk问题

为什么会出现这个小JS chunk？ #

Webpack的import()本质是代码分割语法，原本是用来动态加载JS模块的。当你用它加载CSS时，mini-css-extract-plugin确实会把CSS抽离成独立的.css文件，但Webpack仍然会生成一个极小的JS chunk——这个JS里就是Webpack的runtime代码，作用是告诉浏览器「去请求对应的CSS资源」，相当于一个加载触发的桥梁。因为import()返回的是Promise，Webpack需要这个小JS来处理Promise的回调逻辑，所以它是代码分割机制下的必然产物。

如何避免多余请求？ #

有两种实用方案，根据你的需求选择：

方案1：合并所有CSS加载器小JS #

把所有动态加载CSS生成的小JS合并成一个单独的chunk，这样不管你有多少个动态CSS导入，只需要多一次请求，而非每个CSS对应一次。在Webpack配置里添加splitChunks的缓存组：

module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      cacheGroups: {
        cssBridge: {
          // 匹配所有动态加载CSS生成的小JS
          test: /\.css$/,
          chunks: 'async',
          name: 'css-bridge',
          enforce: true // 强制合并
        }
      }
    }
  }
};

打包后所有这类小JS会被合并成css-bridge.js，只发一次请求。

方案2：用原生方式动态加载CSS（完全消除额外JS） #

如果不想依赖Webpack的import()加载CSS，可以直接用原生DOM操作创建<link>标签，这样不会生成任何额外JS chunk：

// 比如在需要加载CSS的条件判断里：
if (你的条件) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  // 路径对应打包后的CSS文件名，若配置了publicPath记得加前缀
  link.href = 'widget.css';
  document.head.appendChild(link);
}

这种方式完全绕开Webpack的代码分割机制，直接加载CSS文件，没有多余请求。

补充：用魔法注释优化chunk命名 #

如果还是想用import()，可以加webpackChunkName注释让生成的小JS名字更清晰，方便调试：

import(/* webpackChunkName: "widget" */ './widget.css')

这样对应的小JS会被命名为widget.js，而非默认的数字命名。

内容的提问来源于stack exchange，提问作者Deo Kumar