tree shaking对打包体积优化及作用

目录
  • 背景
  • 有啥用？
  • 实践
    • 前置准备
    • 打包
  • sideEffects
    • 副作用
    • sideEffects的使用
    • 优化体积

背景

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

以上就是tree shaking对打包体积优化及作用的详细内容，更多关于tree shaking打包体积优化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 浅谈Webpack4 Tree Shaking 终极优化指南

    几个月前,我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4.我们的主要目标之一是利用 tree-shaking 的优势,即 Webpack 去掉了实际上并没有使用的代码来减少包的大小.现在,tree-shaking 的好处将根据你的代码库而有所不同.由于我们的几个架构决策,我们从公司内部的其他库中提取了大量代码,而我们只使用了其中的一小部分. 我写这篇文章是因为恰当地优化 Webpack 并不简单.一开始我以为这是一种简单的魔法,但后来我花了一个月的时间在网上搜索我遇到

  • 浅析webpack 如何优雅的使用tree-shaking（摇树优化）

    浅析webpack 如何优雅的使用tree-shaking（摇树优化）

    1.什么是tree-shaking webpack 2 的到来带来的最棒的新特性之一就是tree-shaking .tree-shaking源自于rollup.js,先如今,webpack 2也有类似的做法. webpack 里的tree-shaking的到来不得不归功于es6规范的模块.为什么这么说,如今的前端模块规范很多,比较出流行的比如commonJS , AMD , es6 ,我简单的说一下commonJS和es6模块的区别. commonJS 模块 commonJS的模块规范在Node

  • webpack的tree shaking的实现方法

    webpack的tree shaking util.js export const a = () => { console.log("a123456方法"); }; export const b = () => { console.log("b123456方法"); }; main.js import {a} from './utils'; a(); sideEffects 一般而言,上述代码,在 webpack 进行 tree shaking 能够不打

  • webpack4 CSS Tree Shaking的使用

    webpack4 CSS Tree Shaking的使用

    本次课程的代码目录(如下图所示): 什么是tree-shaking webpack 2 的到来带来的最棒的新特性之一就是tree-shaking .tree-shaking源自于rollup.js,先如今,webpack 2也有类似的做法. webpack 里的tree-shaking的到来不得不归功于es6规范的模块.为什么这么说,如今的前端模块规范很多,比较出流行的比如commonJS , AMD , es6 ,我简单的说一下commonJS和es6模块的区别. 1. CSS 也有 Tree

  • tree shaking对打包体积优化及作用

    目录 背景 有啥用? 实践 前置准备 打包 sideEffects 副作用 sideEffects的使用 优化体积 背景 大家平时在查 webpack构建体积优化 ,可能都会查到 tree-shaking 这个东西,很多人看到这个东西,就会把它背下来,用来应付以后面试官可能会问到的情况. 但是,又有多少人去真的了解一下 tree-shaking 呢?自己去实践一下看 tree-shaking 到底起了哪些作用?对于我们的打包体积的优化又有多少呢? 有啥用? Tree Shaking中文含义是摇树

  • 基于rollup的组件库打包体积优化小结

    背景 前段时间对公司内部的组件库(类似element-ui)做了打包体积优化,现在抽点时间记录下.以前也做过构建速度的优化,具体可以看组件库的webpack构建速度优化 一些存在的问题 最开始打包是基于webpack的,在按需加载上存在的体积冗余会比较大,如: webpack打包特有的模块加载器函数,这部分其实有些多余,最好去掉 使用babel转码时,babel带来的helper函数全部是内联状态,需要转成import或require来引入 使用transform-rumtime对一些新特性添加

  • Vue 打包体积优化方案小结

    Vue-cli3 打包体积优化方案 前言: 公司项目完成后 ,打包完成后有1.18MB,其实感觉还行了,但是还可以有优化的地方,对于咱们有精益求精(有没有还是有点*数的)的精神下再去优化,可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小 npm install webpack-bundle-analyzer -save-dev 在vue.config.js中进行配置 module.exports = { chainWebpack: config => { c

  • JS 加载性能Tree Shaking优化详解

    目录 正文 什么是 Tree Shaking 寻找 Tree Shaking 的机会 防止 Babel 将 ES6 模块转换为 CommonJS 模块 留意 side effects 只导入你需要的 更复杂的情况 总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月,在 httparchive 上有统计显示——在移动设备上 JS 传输大小大约为 447 KB,桌面端 JS 传输大小大约为 495 KB,注意这仅仅是在网络中传输的 JS 文件大小,JS

  • Vue项目打包编译优化方案

    1. 不生成.map文件 默认情况下,当我们执行 npm run build 命令打包完一个项目后,会得到一个dist目录,里面有一个js目录,存放了该项目编译后的所有js文件. 我们发现每个js文件都有一个相应的 .map 文件,它们仅是用来调试代码的,可以加快打包速度,但会增大打包体积,线上我们是不需要这个代码的.这里我们需要配置不生成map文件. vue-cli2 config/index.js文件中,找到 productionSourceMap: true 这一行,将 true 改为 f

  • vue项目打包以及优化的实现步骤

    vue项目打包以及优化的实现步骤

    目录 vue项目的打包上线及优化 vue项目的打包 项目托管 项目的常见优化 vue项目的打包上线及优化 项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理 vue项目的打包 脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包 打开终端,切换到项目根目录 输入命令:npm run build 会在当前项目的根目录下生成一个dist文件夹,里面就是打包后的文件 项目托管 我们可以创建一个简易的node服务器来托管打包后的项目,这样就可以模

  • Vite打包性能优化之开启Gzip压缩实践过程

    目录 前言 Gzip 开启 Gzip 插件的其他配置 总结 前言 在使用 vite 进行项目打包时,默认已经帮我们做了一些优化工作,比如代码的压缩,分包等等.除此之外,我们还有一些可选的优化策略,比如使用 CDN ,开启 Gzip 压缩等.本文会介绍在 vite 中使用插件来开启 Gzip 压缩. Gzip Gzip 是一种压缩算法,在网络传输中使用非常普遍.随便打开一个网页,都使用了 gzip 压缩: 需要注意的是,Gzip 压缩仅对于文本类型的资源有明显提示,压缩后的体积大约是压缩前的 1/

随机推荐