说明
玩转 webpack 学习笔记
tree shaking(摇树优化)
概念:1 个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到 bundle 里面去,tree shaking 就是只把用到的方法打入 bundle ,没用到的方法会在 uglify 阶段被擦除掉。
使用:webpack 默认支持,在 .babelrc 里设置 modules: false 即可
production mode的情况下默认开启
要求:必须是 ES6 的语法,CJS 的方式不支持
这里 js 方面的不多说,具体可以参考我这篇:webpack进阶篇(二十一):Tree Shaking的使用和原理分析
无用的 CSS 如何删除掉?
PurifyCSS: 遍历代码,识别已经用到的 CSS class
uncss: HTML 需要通过 jsdom 加载,所有的样式通过 PostCSS 解析,通过 document.querySelector 来识别在 html 文件里面不存在的选择器
在 webpack 中如何使用 PurifyCSS?
使用 purgecss-webpack-plugin:https://github.com/FullHuman/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 = { module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader" ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: "[name].css", }), // 路径需要的是绝对路径,多页面需要传递数组,通过 glob 找到符合路径下面的所有的都匹配出来 new PurgecssPlugin({ paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }), }), ] }
实战
没有优化掉无用的 css
我们在 search 的css 里添加一个没用使用的类
然后我们打包,去 dist 目录里找到 search 的 css 文件,可以看到这个类也打包进去了,我格式化了一下 css 文件
使用 purgecss-webpack-plugin 优化掉无用的 css
先安装依赖
npm i purgecss-webpack-plugin -D
添加配置
添加好之后,运行打包命令,我们可以看到没有使用的类就被清除掉了。