webpack5中默认会进行tree shaking,只要是满足模块化与mode=production 就能剔除掉被没有被使用到的代码
css中的tree shaking 使用purgecss-webpack-plugin插件,具体配置如下
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
const PATHS = {
src: path.join(__dirname, 'src')
}
new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
safelist: ['body']
})
需要注意的是,如果在css中指定哪些 CSS 选择器可以保留在最终的 CSS 中。这可以通过 PurgeCSS 的 safelist 参数或者直接在 CSS 中添加特殊注释来达成。
默认情况下,不是自定义选择器都会剔除掉。例如body,header等选择器