关于前端:Treeshaking到底有啥用简简单单地说一下

43次阅读

共计 1611 个字符,预计需要花费 5 分钟才能阅读完成。

前言

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

背景

大家平时在查 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 还是有用的。。

结语

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

正文完
 0