前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，根底是进阶的前提是我的初心

背景

大家平时在查 webpack构建体积优化 ，可能都会查到 tree-shaking 这个货色，很多人看到这个货色，就会把它背下来，用来应酬当前面试官可能会问到的状况。

然而，又有多少人去真的理解一下 tree-shaking 呢？本人去实际一下看 tree-shaking 到底起了哪些作用？对于咱们的打包体积的优化又有多少呢？

有啥用？

Tree Shaking 中文含意是摇树，在webpack中指的是打包时把无用的代码摇掉，以优化打包后果。

而 webpack5 曾经自带了这个性能了，当打包环境为 production 时，默认开启 tree-shaking 性能。

实际

前置筹备

筹备两个文件 main.js、util.js

  • util.js

    function a () {console.log('a')}function b () {console.log('b')}export default {a, b}

  • main.js

    import a from './util'// 应用a变量，调用文件外面的a函数，不应用b函数console.log(a.a())console.log('hello world')// 不可能执行的代码if (false) {console.log('haha')}// 定义了然而没用的变量const m = 1

打包

后面说了 webpack5 在环境 production 下打包的话，默认开启 tree-shaking ，那咱们运行 npm run build 进行一下打包，看看打包后的代码长啥样：

(()=>{"use strict";const o=function(){console.log("a")};console.log(o())console.log("hello world")})();
论断：能够看到打包后，把 b函数、不可能执行的代码、定义未用的变量 统统都剔除了，这在一个我的项目中，能缩小很多的代码量，进而缩小打包后的文件体积。

sideEffects

副作用

先来讲讲一个货色—— 副作用 ，是什么货色呢？ 副作用 指的是：除了导出成员之外所做的事件，我举个例子，上面的 a.js 是没副作用的， b.js 是有副作用的：

  • a.js

    function console () {console.log('console')}export default {console}

  • b.js

    function console () {console.log('console')}// 这个就是副作用，会影响全局的数组Array.prototype.func = () => {}export default {console}

有无 副作用 的判断，能够决定 tree-shaking 的优化水平，举个例子：

  • 我当初引入 a.js 然而我不必他的 console 函数，那么在优化阶段我齐全能够不打包 a.js 这个文件。
  • 我当初引入 b.js 然而我不必他的 console 函数，然而我不能够不打包 b.js 这个文件，因为他有 副作用 ，不能不打包。

sideEffects的应用

sideEffects 能够在 package.json 中设置：

// 所有文件都有副作用，全都不可 tree-shaking{ "sideEffects": true}// 没有文件有副作用，全都能够 tree-shaking{ "sideEffects": false}// 只有这些文件有副作用，// 所有其余文件都能够 tree-shaking，// 但会保留这些文件{ "sideEffects": [  "./src/file1.js",  "./src/file2.js" ]}

优化体积

当我把 sideEffects 设置成 true 之后，整个打包体积减少了 100k ，阐明默认的 false 还是有用的。。

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】