为什么需要在purgecss选项中指定路径或内容?



我查看了Purgecss webpack文档,我有点困惑。

为什么我需要在插件选项中指定paths?

new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
}),

或在postcss:

purgecss({
content: ['./src/**/*.html']
})

通过这样做,我告诉purgecss查看这些HTML文件和javascript文件。

但是当我使用webpack时,它有应用程序所需的所有源文件。Purgecss无法查看它捆绑的HTML或js ?

这是一个棘手的问题。Purge-css工具可能是危险的,因为它可能会删除在应用程序中发生某些事情时将要使用的css代码,这取决于应用程序的状态,例如当用户注册时,如果Purge-css删除了css的那一部分,你将看到你的组件以一种丑陋的方式进行样式化。

这些工具采取你的css,从那里提取的选择器的css规则和document.querySelector,他们测试是否存在一个元素的页面与该选择器,如果是这种情况下,css保留,否则它被删除。但是你必须指出要测试的html页面是什么(注意,有时你也应该指出*.js,例如,如果你在应用程序中使用js放置标签)。瞧,解释了purgecss插件中content的含义。要了解更多,您可以阅读这篇很棒的文章:https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/

最新更新