温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

tree shaking对打包体积优化及作用实例分析

发布时间:2022-07-06 13:40:26 来源:亿速云 阅读:102 作者:iii 栏目:开发技术

这篇“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还是有用的。

以上就是关于“tree shaking对打包体积优化及作用实例分析”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI