Skip to content

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

@jackiotyu

Description

@jackiotyu

问题分类

uni-app

问题描述

Image

使用组件后,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

Metadata

Metadata

Assignees

Labels

questionFurther information is requested

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions