VUE如何做CSS Tree Shaking
发布于 3 个月前 作者 ab8512 280 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

使用webpack4手动构建的配置。之前在做ES6的构建过程中运行完美。为了支持单文件组件,根据官网配置了vue-loader和vue-template-compiler。在开发环境下运行完美,但是在生产环境下会存在如下问题

//package.json
  ...
  "sideEffects": [
    "*.scss",
    "*.css"
  ],
  ...


//webpack.prod.js

...
    optimization: {
        usedExports: true,
        sideEffects: true,

    },
...

一般为了tree shaking会做上述配置,这样做在非VUE的环境下是可行的,但是对于VUE文件,会发现打包后dist目录下没有CSS文件

所以不得不去掉package.json中对应的配置。

2.purgecss-webpack-plugin无法对vue中的css tree shaking

3 回复

试试 postcss-purgecss?

经过实验,.vue里面的写在style里的css无法tree shaking,但是外部导入的css可以。tree shaking设计的初衷应该是shaking掉第三方引入的样式中无用的代码。业务代码,尤其像.vue这样的组件化开发tree shaking的使用有限,估计就直接抛弃,不支持了

got it:upside_down_face:

回到顶部