Scope Hoisting（范围提升）

什么是Scope Hoisting呢？
1. Scope Hoisting从webpack3开始增加的一个新功能；
2. 功能是对作用域进行提升，并且让webpack打包后的代码更小、运行更快；
默认情况下webpack打包会有很多的函数作用域，包括一些（比如最外层的）IIFE：
1. 无论是从最开始的代码运行，还是加载一个模块，都需要执行一系列的函数；
2. Scope Hoisting可以将函数合并到一个模块中来运行；
使用Scope Hoisting非常的简单，webpack已经内置了对应的模块：
1. 在production模式下，默认这个模块就会启用；
2. 在development模式下，我们需要自己来打开该模块；

举个例子说明下：
如果文件a导出了字符串a，index.js引入了a，并且console.log(字符串a)，那么如果没有开启scope hosting，打包出来的结果是：
在modules数组中，有一个对象元素，key为a模块路径，value为一个函数，函数内部包含了a模块的内容；然后还有一个index.js模块，根据引用关系去找到modules中的a模块，然后加载进来。相当于打包后，a模块的内容都被打包进去了。
但其实，我只是在index.js中使用了一下a模块的导出结果，也就是字符串a，那么我只要把index.js中用到a的地方替换成字符串’a’就可以了，没必要把整个a模块都打包进来。scope hosting就是用来做到这一点的。

Scope Hoisting（范围提升）相关推荐

webpack 的 scope hoisting 是什么？
原文链接:https://ssshooter.com/2019-02... scope hoisting 是 webpack3 的新功能,直译过来就是「作用域提升」.熟悉 JavaScript 都应该 ...
webpack构建中tree shaking、scope Hoisting（面试题）
一.tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的方法打到 ...
webpack之Scope Hoisting
我们先来简单分析一下:(没有开启Scope Hoisting ) 现象:构建后的代码存在大量的闭包代码 [(function (module, __webpack_exports__, __webpa ...
Webpack之Tree Shaking与Scope Hoisting
Webpack之Tree Shaking与Scope Hoisting 一.Tree Shaking 二.webpack中使用Tree-shanking 三.Scope Hoisting 一.Tree ...
wepack scope hoisting
背景有一次在使用webpack构建组件项目时,需要动态指定publicpath,类似如下的代码: 构建后,在运行态下,发现模块A中,并没有应用动态指定的publicPath.查看了构建后的资源: 可 ...
webpack5 基础配置（性能优化）12 DLL Terser Scope Hoisting
认识DLL库(了解) DLL全称是动态链接库,是为软件在winodw种实现共享函数库的一种实现方式,而Webpack也内置了DLL的功能,为的就是可以共享,不经常改变的代码,抽成一个共享的库.这个库 ...
浅聊JavaScript中的Hoisting(变量提升)
一直有写博客的想法但因为懒惰等各种情况没有付出实际行动,择日不如撞日,那就今天让我给大家简单归纳总结一下JavaScript中的Hoisting(变量提升)吧! 1.对于变量 //variablesc ...
JavaScript 中的 Hoisting (变量提升和函数声明提升)
如何将函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) ...
46 webpack优化- Scope Hoisting
Scope Hoisting Webpack构建出来的文件源码,比如演练是实战中的build.js里面的内容里面包含了大量的函数声明语句,其原因是项目中引用了许多模块,每一个模块都有自己的作用域,导致 ...

Scope Hoisting（范围提升）

Scope Hoisting（范围提升）

Scope Hoisting（范围提升）相关推荐

最新文章

热门文章