tree-shaking
简介
通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。
配置
前置
在这之前我们安装下,分析插件,可以更好配合我们看到效果
执行 npm install webpack-bundle-analyzer
打开 webpack.config.js
, 配置 webpack-bundle-analyzer
plugins: [
new BundleAnalyzerPlugin({
// analyzerMode: "disabled", // 不启动展示打包报告的http服务器
// generateStatsFile: true, // 是否生成stats.json文件
}),
],
配置 tree-shaking
webpack5
中 tree-shaking
中的配置
打开项目下 package.json
, 加入配置 "sideEffects"
sideEffects
有三种情况
sideEffects:true
所有文件都有副作用,全都不可tree-shaking
sideEffects:false
有这些文件有副作用,所有其他文件都可以tree-shaking
,但会保留这些文件sideEffects:[]
部分tree-shaking
, 除了数组外都tree-shaking
基本测试
新建 src
下的 util.js
// util.js
export function getTreeShaking(){
return 'Hello TreeShaking'
}
在 index.js
引入
//index.js
import {getTreeShaking } from './util'
// var div = document.createElement("div");
// div.textContent = getTreeShaking() + ' and ' + Object.effectConsole()
// document.getElementById('app').appendChild(div)
在 sideEffects:true
的时候,也就是都不进行 tree-shaking
运行 npm run build
即使不存在调用,bundle.js
依旧把 util
打进去
在 sideEffects:false
的时候,也就是都进行 tree-shaking
运行 npm run build
将 util
去掉了,体积也缩小了 ~
副作用
所谓 副作用
指的是 在导入时会执行特殊行为的代码,而不是仅仅暴露一个 export 或多个 export。举例说明,例如 polyfill,它影响全局作用域,并且通常不提供 export。
修改代码
添加 effect.js
export function updateObjectFunction(){
return 'console.log'
}
// 这段代码其实使我们添加进去的副作用
// 其实就是一段全局代码,如果直接 tree-shaking , 这段代码不会执行
// Object.effectConsole() 会直接报错
Object.prototype.effectConsole = function(){
return 'effect'
}
修改 index.js
import {getTreeShaking } from './util'
import {updateObjectFunction} from './effect'
var div = document.createElement("div");
div.textContent = getTreeShaking() + ' and ' + Object.effectConsole()
document.getElementById('app').appendChild(div)
运行后, 打开 index.html
直接报错
这时候我们需要配置 sideEffects
设置 sideEffects:["./src/effect.js"]
不将他直接 tree-shaking