Webpack5打包原生Web组件CSS避免样式重复的方案咨询

方案1：保留@import写法（兼容性最好，无polyfill依赖） #

你之前遇到@import被插入到document.head的问题是css-loader默认解析了@import语句当成模块依赖，被全局CSS规则处理了。修改配置如下就能保留CSS文件中的@import语句，无需修改原有业务代码：

webpack配置修改 #

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

module.exports = {
  // 其余基础配置省略
  plugins: [
    // 单独提取共享CSS到输出目录，保证@import路径可访问
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    })
  ],
  module: {
    rules: [
      // 全局普通CSS规则，自动插入head
      {
        test: /\.css$/i,
        exclude: [path.resolve(__dirname, "src/ui"), path.resolve(__dirname, "src/css")],
        use: ["style-loader", "css-loader"]
      },
      // UI组件目录下的CSS规则，保留@import不解析
      {
        test: /\.css$/i,
        include: [path.resolve(__dirname, "src/ui")],
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "lazyStyleTag",
              insert: function insertIntoTarget(element, options) {
                var parent = options.target || document.head;
                parent.appendChild(element);
              },
            },
          },
          {
            loader: "css-loader",
            options: {
              // 不解析@import和url语句，原样保留
              import: false,
              url: false
            }
          }
        ]
      },
      // 共享CSS单独提取规则
      {
        test: /\.css$/i,
        include: [path.resolve(__dirname, "src/css")],
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  }
}

说明 #

打包后共享CSS会输出到dist/css/目录下，UI组件的style标签内会保留完整的@import '../css/shared.css'语句，所有组件实例共用同一份共享CSS文件，不会重复插入样式，内存占用和原生@import一致。

方案2：adoptedStyleSheets + polyfill（性能最优） #

你之前配置报错是因为两条规则同时匹配到了带assert { type: "css" }的导入，导致css-loader执行了两次。修改配置如下即可去掉冗余的内联loader写法：

webpack配置修改 #

module.exports = {
  module: {
    rules: [
      // 匹配带assert { type: "css" }的导入，导出CSSStyleSheet实例
      {
        test: /\.css$/i,
        assert: { type: "css" },
        use: [
          {
            loader: "css-loader",
            options: {
              exportType: "css-style-sheet",
            }
          }
        ]
      },
      // 普通CSS导入规则，排除带assert的情况，自动插入head
      {
        test: /\.css$/i,
        exclude: [{ assert: { type: "css" } }],
        use: ["style-loader", "css-loader"]
      }
    ]
  }
}

组件代码修改 #

// 不需要加内联loader参数
import sharedStyle from '../css/shared.css' assert { type: "css" };
import uiComponentStyle from './uicomponent.css' assert { type: "css" };

export default class UIComponent extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.shadowRoot.adoptedStyleSheets = [sharedStyle, uiComponentStyle];
        // 其余逻辑省略
    }
}
customElements.define('ui-component', UIComponent);

polyfill性能优化说明 #

官方polyfill没有采用URL.createObjectURL实现降级主要有两个原因：

1. 兼容性限制：大部分站点的内容安全策略(CSP)会禁止blob:协议的样式资源，直接拦截加载
2. 资源泄漏风险：动态生成的blob URL需要手动调用URL.revokeObjectURL释放，否则会造成内存泄漏，批量组件场景下泄漏风险更高

如果要自行优化降级逻辑，可以判断浏览器原生支持adoptedStyleSheets时用原生实现，不支持时插入带@import的style标签指向提前打包好的共享CSS文件即可，性能优于polyfill默认的全量style标签插入方案。

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