Tree-Shaking的作用
- Tree-shaking的本质是消除无用的js代码：在 webpack 项目中，当我们在入口文件中引入一个模块的时候，可能不会引入这个模块的所有代码，只引入了我们需要的代码，那么在使用webpack进行打包时，tree-shaking会自动帮我们把不用的代码过滤掉。
- 提升项目性能：JS绝大多数情况需要通过网络进行加载，然后执行，加载的文件越小，整体执行时间更短，所以去除无用代码以减少文件体积, 从而提升项目性能。
Tree-Shaking的模块引入方式
tree-shaking只支持ES模块的引入（import方式的引入），如果使用CommonJS的引入方法，tree-shaking是不支持的。因为CommonJS底层是动态引入的方式，import底层是静态引入的方式，tree-shaking只支持静态引入的方法，所以只支持ES模块引入。
// 正确的引入方式
import { add } from './math.js';
// 错误的引入方式 (tree shaking不支持)
// const add = require('./math.js');
Tree-Shaking的用法（配置）
目录结构：
|--demo
|--node_modules
|--src
|--index.html
|--index.js
|--math.js
|--package-lock.json
|--package.json
|--webpack.config.js
index.js
// 引入math.js模块中的一个方法
import { add } from './math.js';
add(1, 2);
math.js
// 导出两个方法
export const add = (a, b) => {
console.log(a + b)
}
export const minus = (a, b) => {
console.log(a - b)
}
开发模式下的使用（development）
在开发模式下(development), 默认是没有tree-shaking这个功能的，如果想在此模式下添加tree-shaking, 需要配置optimization项: （webpack.config.js具体如下）
// 在这里做打包配置
const path = require('path'); // 引入node的path模块（loader模块）
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// Common.js语法
module.exports = {
mode: 'development', // 开发模式
devtool: 'cheap-module-eval-source-map', // 开发环境下的devtool
entry: {
main: './src/index.js'
},
devServer: {
contentBase: './dist',
open: true,
port: 8080
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: [["@babel/preset-env", {
targets: {
chrome: "67"
},
useBuiltIns: "usage"
}]]
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
],
optimization: { // 在开发环境里需要使用此配置
usedExports: true // 哪些导出的模块被使用了，再做打包
},
output: {
filename: 'dist.js', // 打包之后的输出文件
path: path.resolve(__dirname, 'dist')
}
}
- optimization ：开发环境下需要此配置项，使用usedExports属性，来帮助webpack识别哪些导出的模块被使用了，再做打包。
在package.json里做如下配置：
也可以通过数组的形式配置:
"sideEffects": false,
// "sideEffects": ["@babel/polyfill"],
// "sideEffects": ["*.css"],
sideEffects配置的含义：遇到任何的css文件和@babel/polyfill需要填充注入的特性，不使用tree-shaking。如果某些文件，不想让它做tree-shaking, 那么就可以通过数组的形式配置在sideEffects里边就可以了。若没有要配置的东西，此值就设置为false.
打包：
npx webpack
在打包后的dist.js中，可以看出，tree-shaking已经帮我们做了处理，已经区分了哪些是导出模块，哪些是导出使用了的模块。但在development环境下做打包的时候，即时用了tree-shaking, 也不会帮我们把导出没有使用的模块从打包生成的dist.js文件里去除掉，只是会在代码里给与提示。⭐️（这个问题出现的原因是：因为在开发环境中，我们可能会对代码做一定的调试，如果tree-shaking 把部分代码去除，可能在调试时，代码对应的行数都会出错，所以开发环境下，tree-shaking还会保留代码）
生产模式下的使用（production）
当我们的项目要打包上线的时候，mode的值为production的时候。此时tree-shaking就会生效了，配置如下：
// 在这里做打包配置
const path = require('path'); // 引入node的path模块（loader模块）
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// Common.js语法
module.exports = {
mode: 'production', // 生产模式
devtool: 'cheap-module-source-map', // 生产环境下的devtool
entry: {
main: './src/index.js'
},
devServer: {
contentBase: './dist',
open: true,
port: 8080
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: [["@babel/preset-env", {
targets: {
chrome: "67"
},
useBuiltIns: "usage"
}]]
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
],
output: {
filename: 'dist.js', // 打包之后的输出文件
path: path.resolve(__dirname, 'dist')
}
}
由于在生产环境下，tree-shaking是默认配置好的，所以生产环境下，不需要写以下配置项：
optimization: { // 在开发环境里需要使用此配置
usedExports: true // 哪些导出的模块被使用了，再做打包
}
在package.json中同样做如下配置:
执行打包：
npx webpack
由此可以看出，在我们打包生成线上代码的时候，Tree-Shaking已经把导出未使用的模块代码剔除掉了。使项目在运行时，加载脚本体积减小，缩短了加载时间，从而提升项目性能。✨
