webpack5 tree shaking

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

 

原文地址:https://www.cnblogs.com/wmydb/p/15096299.html