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等选择器