webpack5中的 tree-shaking

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 有三种情况

1. sideEffects:true 所有文件都有副作用，全都不可 tree-shaking
2. sideEffects:false 有这些文件有副作用，所有其他文件都可以 tree-shaking，但会保留这些文件
3. 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