webpack---tree-shaking

好记性不如烂笔头

2024-10-14 105 阅读1分钟

定义

Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。

使用Tree Shaking的前提

基于ESmodule的模块导入导出规则，实现静态编译时处理模块间的依赖。

Tree Shaking的原理

先标记：optimization.usedExports:true,启动标记功能。
再剔除：使用Terser-webpack-plugin插件

代码配置

usedExports

module.exports = {
  mode: 'development', // 我们先使用开发模式下验证
  devtool: 'cheap-module-source-map',  //使用source map的这个模式
  optimization: {
    usedExports: true,  // 表示开启使用tree shaking,对无效代码进行标记
    minimize:true,   // 开启代码压缩，压缩会删除已经标记过的无用代码
  },
}

sideEffects(副作用) 开启 tree shaking 之后，webpack 进行代码分析的时候可能会具有副作用；在 package.json中设置 sideEffects告诉 webpack ，哪一部分代码需要 / 不需要开启 tree shaking。


// package.json文件
{
 "sideEffects":false // false,所有文件都有副作用，不可以tree-shaking
 "sideEffects":true // true,所有文件没有副作用，可以tree-shaking
 "sideEffects":["./src/a.js",...] // 数组中的文件有副作用，其他的都可以tree-shaking
}