使用terser shaking擦除无用的js和css

488 阅读1分钟

一、JS删除

tree shaking原理:

将未使用的方法在编译阶段进行标记,再uglify阶段擦除,就不会被打包到bundle中。

使用:

webpack默认支持的,不过要在生产环境才启用。.babelrc文件中设置modules为false。

注意:必须是es6代码,cjs不支持。

二、css删除

  • PurifyCSS:遍历代码,找出已使用的css

  • uncss:html需要jsdom加载,所有的样式要通过PostCss进行解析,通过document.querySelector来使用在html中不存在的选择器。

PurifyCSS的使用:

purgecss-webpack-plugin:要和mini-css-extract-plugin搭配使用,并且该插件已经不再维护了。