Webpack打包后如何移除已使用的CSS/HTML资源以减小Bundle体积？

核心结论 #

当你通过css-loader的exportType: "css-style-sheet"导入CSS，或用asset/source导入HTML时，这些内容会作为模块依赖被编译进JS bundle——因为你的运行时代码直接依赖这些导出的对象/字符串来操作Shadow DOM，Webpack不会自动移除它们。要缩减bundle体积，需要把这类资源从JS bundle中拆分出去，改为运行时动态加载。

具体解决方案 #

1. 拆分CSS到单独文件，运行时动态加载 #

使用mini-css-extract-plugin将CSS抽离为独立的静态文件，然后在代码中通过fetch加载并转换为CSSStyleSheet：

Webpack配置修改

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader' // 无需再设置exportType，因为我们将直接处理CSS文本
        ]
      }
    ]
  }
};

运行时代码调整

async function injectCSSIntoShadowDOM(shadowRoot, cssFileUrl) {
  const res = await fetch(cssFileUrl);
  const cssText = await res.text();
  const styleSheet = new CSSStyleSheet();
  styleSheet.replaceSync(cssText);
  shadowRoot.adoptedStyleSheets = [styleSheet];
}

// 使用示例
injectCSSIntoShadowDOM(yourShadowRootElement, './styles.[contenthash].css');

2. 拆分HTML到单独文件，运行时动态获取 #

同样将HTML抽为独立文件，通过fetch获取内容后插入Shadow DOM，替代asset/source的导入方式：

运行时代码调整

async function injectHTMLIntoShadowDOM(shadowRoot, htmlFileUrl) {
  const res = await fetch(htmlFileUrl);
  const htmlText = await res.text();
  shadowRoot.innerHTML = htmlText;
}

// 使用示例
injectHTMLIntoShadowDOM(yourShadowRootElement, './component.[contenthash].html');

3. 先缩减CSS体积（可选） #

如果不想完全拆分资源，可以先用purgecss-webpack-plugin剔除未使用的CSS规则，缩小CSS体积后再决定是否拆分：

Webpack配置修改

const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync('./src/**/*.{js,html}', { nodir: true }), // 扫描所有用到CSS的文件
      safelist: {
        standard: [/^dynamic-class-/] // 保留动态生成的类名，避免误删
      }
    })
  ]
};

关于Webpack模块存储的说明 #

你提到的__webpack__module是Webpack内部的模块管理结构，只要代码中导入并使用了CSS/HTML模块，它们就会被存储在这里——因为运行时需要直接访问这些内容。只有当你将资源移出JS bundle，改为外部静态资源加载时，这些内容才会从bundle中消失。

内容的提问来源于stack exchange，提问作者Shashank Bhatt