webpack4.15.1 学习笔记(四) — Tree shaking

最新推荐文章于 2024-09-20 10:08:33 发布

Echoyya、

最新推荐文章于 2024-09-20 10:08:33 发布

阅读量117

点赞数

分类专栏： Webpack 文章标签：学习笔记 webpack javascript 前端

本文链接：https://blog.csdn.net/angel1003645956/article/details/130437878

版权

Webpack 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Tree shaking

Tree shaking

本质上为了消除无用的js代码，减少加载文件体积的方式，使其整体执行时间更短。无用的代码，又有另外一种叫法：Dead Code：

代码不可到达，不会执行，如不可能进入的分支，return 之后的语句等
代码中的某个变量只有写，而没有读操作
Tree Shaking 的执行环境宿主一般是Node，而不是浏览器，且必须遵循ES6 Module规范，因为 ES6 Module 可以静态分析，可以推导出变量和导入依赖变量的引用关系。

原理

Tree-Shaking实现步骤

标记出模块导出值哪些没有被用过，标记功能需要配置 optimization.useExports = true 开启
- Make 阶段，收集导出变量并记录到模块依赖图ModuleGraph 变量中。
- Seal 阶段，遍历ModuleGraph 标记模块导出变量有没有被使用
- 生成产物时，若变量没有被其他模块使用时则删除对应的导出语句
使用Terser删除掉没有被用到的导出语句

标记效果

webpack 负责对代码进行标记，把import & export 标记为3类：

所有 import 标记为 /\* harmony import \*/；
被使用过的 export 标记为/\* harm export([type])\*/ ；
未被使用过的 export 标记为 /\* unused harmony export [FuncName] \*/，其中[FuncName] 为export 的方法名称

副作用代码不可被删除

副作用是函数式编程的一个概念，是指当调用函数时，除了返回函数值之外，还会对调用函数产生附加的影响。比如console，读取和修改外部变量，导入css文件，引入Polyfill 等

会导致document.title 没有成功被设置导致出现bug。const setTitle = ()=>{  
  document.title = "tree shaking learn";
}
const a = setTitle();  // 虽然a变量没有被其他地方使用，但由于副作用，如果将其删除,会导致document.title 没有成功被设置导致出现bug。

如何实现 Tree shaking 的几种方法

执行 webpack --mode development时，打包后的代码并没有压缩且包含注释，添加 --optimize-minimize 命令进行压缩后。将打包后的代码压缩至一行，并删除了未引用的代码，可以把这串命令放入 package.json 的 scripts 字段中执行。
当没有设置 webpack mode模式时。会提示一行黄字 The 'mode' option has not been set, webpack will fallback to 'production' for this value. 因此该配置在mode=production时默认为true，也就是说webpack生产模式中，自动开启了Tree Shaking这个功能，可以直接执行 webpack 命令进行打包。
其实--optimize-minimize的底层实现是一个插件UglifyJsPlugin，参考其他教程直接在webpack.config.js里配置，运行后报错，原因是在新版本的webpack中，移除了这个插件，因此该方法不可行。
- RemovedPluginError: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

const webpack = require('webpack');
module.exports = {
  // ...
  plugins:[
    new webpack.optimize.UglifyJsPlugin(), // RemovedPluginError webpack.optimize.UglifyJsPlugin has been removed
  ],  
}

Tree Shaking并不是 webpack 的某个配置选项，而是一组功能搭配使用后的优化效果。并且在生产模式production下自动使用。根据上述RemovedPluginError报错提示，配置optimization中的 usedExports 和 minimize 优化功能实现Tree Shaking。

module.exports = {
   // ...
    optimization: {
        usedExports: true, // 表示在输出结果中模块只导出外部使用了的成员。
        minimize: true, // 开启代码压缩优化, 删除注释、删除没有用到的代码、删除空白、替换变量名为简短的名称等,
    },
};

webpack打包后，将每个模块放到一个函数中，包含成员的定义和成员的导出。usedExports 可以标记模块导出的成员是否被外部使用，从而在打包结果中，不导出未使用的成员。标记打包后表现为：包裹模块的函数中保留定义这些成员的代码，但是移除导出它们的代码，并添加注释 /* unused harmony export */。
而函数中没有了导出它们的代码，也就表示这些成员未使用，那定义它们的代码也没有了意义，minimize就会将这些未使用的定义成员的垃圾代码一并删除。