【vue2】小程序平台使用组件 style 时，编译后多出 mini-css-extract-plugin 的 css runtime 代码

[jackiotyu]

问题分类

uni-app

问题描述

使用组件后，dist/build/mp-weixin/common/runtime.js 会多出一段 mini-css-extract-plugin 的 css runtime 代码，这段代码在小程序平台是没用的，都没有 document 对象可用。并且这个代码是根据组件使用动态增加的，使用的组件越多，这段代码占的体积就会越大。
问题来源

mini-css-extract-plugin 2.3.0 版本后就新增了 runtime 选项，可以关闭这个 runtime 注入。

mini-css-extract-plugin 低于 2.3.0 的版本可以通过自定义插件的方法手动去除这段 runtime 注入。

    if(require('semver').lt(require('mini-css-extract-plugin/package.json').version, '2.3.0')) {
      const pluginName = 'skip-mini-css-extract-runtime'
      webpackConfig.plugin(pluginName).use(
        class SkipMiniCssExtractRuntimePlugin {
          apply(compiler) {
            compiler.hooks.thisCompilation.tap(pluginName, compilation => {
              const { mainTemplate } = compilation;
              const reg = /\/\/ mini-css-extract-plugin CSS loading[\s\S]*installedCssChunks\[chunkId\] = 0;\s*\}\)\);\s*\}/;
              mainTemplate.hooks.requireEnsure.tap(pluginName, (source, chunk) => {
                return reg.test(source) ? source.replace(reg, ''): source;
              });
            });
          }
        }
      )
    }

附加信息

No response

[jackiotyu]

任意一个vue2的版本都能复现的
这是我用 "@dcloudio/uni-app": "^2.0.2-4050520250307001" 版本复现的项目
项目地址：https://github.com/jackiotyu/uni-css-demo
预览地址：https://stackblitz.com/~/github.com/jackiotyu/uni-css-demo

[Otto-J]

感谢提供 PR。我使用 uvm 升级到 2.0.2-alpha-4050420250306001 版本，测试对比，使用 runtime:false 即可，不需要兼容低版本情况。兼容低版本的代码还有未想到的场景吗？

对比产物，的确减少了 typeof document 相关逻辑。

[jackiotyu]

感谢提供 PR。我使用 uvm 升级到 2.0.2-alpha-4050420250306001 版本，测试对比，使用 runtime:false 即可，不需要兼容低版本情况。兼容低版本的代码还有未想到的场景吗？

对比产物，的确减少了 typeof document 相关逻辑。

uni-app/package.json

Line 62 in bf64a92

"@vue/cli-service": "^4.3.1",

主要是看到这里@vue/cli-service版本是^4.3.1，5.0以上采用的是大于2.3.0的mini-css-extract-plugin

https://www.npmjs.com/package/@vue/cli-service/v/4.5.19?activeTab=code

https://www.npmjs.com/package/@vue/cli-service/v/5.0.1?activeTab=code

[jackiotyu]

@Otto-J 旧版本的mini-css-extract-plugin都是插入的一样的内容，应该没其他特殊情况

不需要兼容的话，我修改下pr内容