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 配合使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49const 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 }),
}),
]
}