# tree shaking(摇树优化)
- 概念:1 个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到bundle 里面去,tree shaking 就是只把用到的方法打入 bundle ,没用到的方法会在uglify 阶段被擦除掉
- 使用:
- webpack 默认支持,在 .babelrc 里设置 modules: false 即可
- production mode的情况下默认开启
- 要求:
- 必须是 ES6 的语法,CJS 的方式不支持
- 需要tree shaking的模块代码是没有副作用的,否则tree shaking会失效
- Tree Shaking的使用和原理分析
# 无用的 CSS 如何删除掉?
- PurifyCSS: 遍历代码,识别已经用到的 CSS class,没有用到的已经识别的就会做一个标记。
- uncss: HTML 需要通过 jsdom 加载,所有的样式通过PostCSS解析,通过document.querySelector 来识别在 html 文件里面不存在的选择器
# 在 webpack 中如何使用 PurifyCSS?
purifycss-webpack以停止维护,建议使用purgecss-webpack-plugin
使用 purgecss-webpack-plugin和 mini-css-extract-plugin 配合使用
const path = require('path') const glob = require('glob') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const PurgecssPlugin = require('purgecss-webpack-plugin') //需要进行解析的文件目录 绝对路径 const PATHS = { src: path.join(__dirname, 'src') } module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, optimization: { splitChunks: { cacheGroups: { styles: { name: 'styles', test: /\.css$/, chunks: 'all', enforce: true } } } }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader" ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: "[name].css", }), new PurgecssPlugin({ //path:您可以使用文件数组指定purgecss应分析的内容。它可以是html,pug,blade,...文件。您可以使用glob或glob-all之类的模块轻松获取文件列表 paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }), }), ] }