Question

我尝试使用网络包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）找到。

我遇到的问题是

如果第一次运行构建获取此输出：

PurifyCSS将文件大小减少了~99.4％

并且页面未正确呈现，因为缺少tsx / jsx中的样式引用（或传递样式依赖项）。
如果我第二次运行构建，那么我得到这个输出：

PurifyCSS将文件大小减少了~93.2％

并正确呈现页面。我的路径设置导致找到上一个构建的bunde.js，这也是为什么我的tsx / jsx样式也很受尊重的原因。输出完美优化。
如果我关注PurifiyCSS＆＃39; hint for CSS modules我得到了这个输出：

PurifyCSS将文件大小减少了~1.5％

并且页面也正确呈现。但是包括所有样式（使用和未使用）并且包装尺寸更大。只比没有PurifyCSS小几个字节。

我现在的问题是：如何获得＆＃34; 2的输出。＆＃34;即使在第一次构建运行？看来输出没有在任何地方序列化，所以我不能告诉PurifyCSS考虑它。

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

THX，斯蒂芬

webpack：PurfiyCSSPlugin不包含bundle.js引用的样式

0 个答案: