Uni-App 中优化小程序平台 CSS 运行时注入代码的技巧

在 Uni-App 开发过程中，当我们在小程序平台使用组件样式时，会发现编译后的代码中包含了 mini-css-extract-plugin 的 CSS runtime 代码。这些代码在小程序环境中实际上是冗余的，因为它们依赖于浏览器环境的 document 对象，而小程序平台并不支持。

问题现象分析

在构建后的 dist/build/mp-weixin/common/runtime.js 文件中，我们可以看到类似以下的代码片段：

// mini-css-extract-plugin CSS loading
if(typeof document !== 'undefined') {
  // ...大量CSS加载相关代码...
}

这段代码会随着项目中使用的组件数量增加而不断膨胀，导致最终打包体积增大。对于小程序平台而言，这些代码完全不会执行，因为小程序环境根本没有 document 对象。

技术解决方案

方案一：配置 runtime: false（推荐）

对于使用 webpack v5 的项目（如 @vue/cli-service 5.0+），我们可以直接在配置中设置：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({
        runtime: false
      })
    ]
  }
}

这个配置会完全禁用 mini-css-extract-plugin 的运行时注入，是最简洁的解决方案。

方案二：正则匹配移除（兼容旧版本）

对于 webpack v4 项目（如 @vue/cli-service 4.x），由于不支持 runtime 配置选项，我们可以通过自定义 webpack 插件来移除这些代码：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      {
        apply(compiler) {
          compiler.hooks.thisCompilation.tap('SkipMiniCssExtractRuntime', (compilation) => {
            const { mainTemplate } = compilation;
            const reg = /\/\/ mini-css-extract-plugin CSS loading[\s\S]*installedCssChunks\[chunkId\] = 0;\s*\}\)\);\s*\}/;
            mainTemplate.hooks.requireEnsure.tap('SkipMiniCssExtractRuntime', (source) => {
              return reg.test(source) ? source.replace(reg, '') : source;
            });
          });
        }
      }
    ]
  }
}

这个方案通过正则匹配移除特定的代码块，虽然不如第一个方案优雅，但在旧版本中同样有效。

实施建议

1. 版本检查：首先确认项目中使用的 webpack 版本，选择适合的优化方案
2. 构建测试：优化后进行完整的构建测试，确保不影响其他功能
3. 体积对比：比较优化前后的包大小，验证优化效果

注意事项

• 这些优化仅针对小程序平台，H5 和 App 平台需要保留这些运行时代码
• 正则方案在生产环境同样有效，因为代码混淆是在插件处理之后进行的
• 随着 Uni-App 版本的更新，建议优先使用官方推荐的配置方案

通过实施这些优化，我们可以有效减少小程序平台的冗余代码，提升应用性能，特别是在使用大量组件的复杂项目中效果更为明显。