0

我尝试使用 webpacks PurifyCSSPlugin。我的配置看起来像这样

new PurifyCSSPlugin({
    paths: glob.sync([
          path.join(env.outputDirectory, './*.html'),
          path.join(env.outputDirectory, './**/*.js'),
          path.join(__dirname, './**/*.tsx')
        ]),
    purifyOptions: {
        info: true,
        minify: false
    }
})

我以这种方式使用样式：

import { title } from "./styles.scss";
...
return <h1  className={title}>Hello!</h1>;

（整个项目可以在GitHub上找到）。

我遇到的问题是

  1. 如果在获取此输出时第一次运行构建：

    PurifyCSS 将文件大小减少了约 99.4%

    并且页面未正确呈现，因为 tsx/jsx 中的样式引用丢失（或传递样式依赖项）。

  2. 如果我第二次运行构建，那么我会得到以下输出：

    PurifyCSS 将文件大小减少了约 93.2%

    并且页面正确呈现。我的路径设置导致找到以前构建的 bunde.js，这就是为什么我的 tsx/jsx 样式也受到尊重的原因。输出完美优化。

  3. 如果我遵循 PurifiyCSS对 CSS 模块的提示，我会得到以下输出：

    PurifyCSS 将文件大小减少了约 1.5%

    并且页面也正确呈现。但是所有样式（使用过的和未使用过的）都包括在内，而且包装尺寸要大得多。只比没有 PurifyCSS 小几个字节。

我现在的问题是：我怎样才能获得“2”的输出。即使在第一次构建运行？似乎输出没有在任何地方序列化，所以我不能告诉 PurifyCSS 将其考虑在内。

有没有人解决过这个问题？我在网上找不到任何东西。

谢谢，斯蒂芬

4

0 回答 0