webpack 的 scope hoisting 是什么?
原文链接:https://ssshooter.com/2019-02...
scope hoisting 是 webpack3 的新功能,直译过来就是「作用域提升」。熟悉 JavaScript 都应该知道「函数提升」和「变量提升」,JavaScript 会把函数和变量声明提升到当前作用域的顶部。「作用域提升」也类似于此,webpack 会把引入的 js 文件“提升到”它的引入者顶部。
接下来尝试在 webpack4 使用这个功能,对比启用前后的打包区别,相信你一定能很快理解他的作用。
启用插件
在 webpack4 中使用 scope hoisting,需要添加 ModuleConcatenationPlugin
(模块关联)插件:
// webpack.config.js
const webpack = require('webpack')module.exports = mode => {if (mode === 'production') {return {}}return {devtool: 'source-map',plugins: [new webpack.optimize.ModuleConcatenationPlugin()],}
}
文件准备
现在已经在开发环境添加上 scope hoisting。但是因为我们希望测试文件引入效果的不同,所以需要添加 4 个文件。
// shouldImport.js
export let sth = 'something you need'export default {others: '',
}
// one.js two.js 皆为此代码
import other from './shouldImport'
let a = other
export default a
// index.js
import one from './one'
import two from './two'let test = 'this is a variable'export default {one,two,test,
}
文件间的引用关系是这样的:
文件都准备好了,立即运行 node_modules/.bin/webpack --mode development
打包文件。
这就是 scope hoisting
这是打包文件的入口模块部分:
{'./src/index.js': function(module,__webpack_exports__,__webpack_require__) {'use strict'__webpack_require__.r(__webpack_exports__)// 关联 ./src/shouldImport.js 模块let sth = 'something you need'/* es6 默认引入 */ var shouldImport = {others: ''}// 关联 ./src/one.js 模块let a = shouldImport/* es6 默认引入 */ var one = a// 关联 ./src/two.js 模块let two_a = shouldImport/* es6 默认引入 */ var two = two_a// 关联 ./src/index.js 模块let test = 'this is a variable'/* es6 默认引入 */ var src = (__webpack_exports__['default'] = {one: one,two: two,test})}}
正常来说 webpack 的引入都是把各个模块分开,通过 __webpack_require__
导入导出模块(对原理不熟悉的话可以看这里),但是使用 scope hoisting 后会把需要导入的文件直接移入导入者顶部,这就是所谓的 hoisting。
可以看出,这么优化后:
- 代码量明显减少
- 减少多个函数后内存占用减少
- 不用多次使用
__webpack_require__
调用模块,运行速度也会得到提升
当然几时你开启了 scope hoisting,webpack 也不会一股脑地把所有东西都堆砌到一个模块。官网对这个问题也清楚地说明了,这里举个例子,在你使用非 ES6 模块或使用异步 import() 时,不会应用作用域提升,模块依然会拆分开,不过具体代码会跟正常的引入有一点差异。
webpack 的 scope hoisting 是什么?相关推荐
- 46 webpack优化- Scope Hoisting
Scope Hoisting Webpack构建出来的文件源码,比如演练是实战中的build.js里面的内容里面包含了大量的函数声明语句,其原因是项目中引用了许多模块,每一个模块都有自己的作用域,导致 ...
- webpack之Scope Hoisting
我们先来简单分析一下:(没有开启Scope Hoisting ) 现象:构建后的代码存在大量的闭包代码 [(function (module, __webpack_exports__, __webpa ...
- webpack构建中tree shaking、scope Hoisting(面试题)
一.tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的方法打到 ...
- Webpack之Tree Shaking与Scope Hoisting
Webpack之Tree Shaking与Scope Hoisting 一.Tree Shaking 二.webpack中使用Tree-shanking 三.Scope Hoisting 一.Tree ...
- Scope Hoisting(范围提升)
Scope Hoisting(范围提升) 什么是Scope Hoisting呢? Scope Hoisting从webpack3开始增加的一个新功能: 功能是对作用域进行提升,并且让webpack打包 ...
- wepack scope hoisting
背景 有一次在使用webpack构建组件项目时,需要动态指定publicpath,类似如下的代码: 构建后,在运行态下,发现模块A中,并没有应用动态指定的publicPath.查看了构建后的资源: 可 ...
- webpack5 基础配置(性能优化)12 DLL Terser Scope Hoisting
认识DLL库(了解) DLL全称是 动态链接库,是为软件在winodw种实现共享函数库的一种实现方式,而Webpack也内置了DLL的功能,为的就是可以共享,不经常改变的代码,抽成一个共享的库.这个库 ...
- 了不起的 Webpack Scope Hoisting 学习指南
最近原创文章
- (六)构建优化(揭开webpack性能优化的内幕)
构建优化 webpack的优化配置[了解这些优化配置才敢说会用webpack] Tree-shaking JS压缩 作用域提升 Babel的优化配置 webpack的依赖优化 noParse(不解析) ...
最新文章
- 层次建模---建模软件包
- mqtt android封装,Android之MQTT封装使用
- 何谓CRT,CRT的由来
- ewsa 字典_湖南字典头条胖U
- 页面滚动到某一位置吸顶_vue监听滚动事件某元素吸顶或固定位置显示详解
- ASP.NET2.0中的App_Data文件的作用
- Python基于迁移学习的猫狗大战实战【图像二分类任务】【实测准确度超过99.5%】
- python科学计算常用包-python常用包及功能介绍
- Selenium2学习笔记——自动化环境搭建
- 妈耶,摆脱机器音,二次宅的歌姬女友彻底活了
- 方兴东:让曲线告诉创业的痛楚和狂喜
- SSM整合(Spring+SpringMVC+MyBatis)
- 帆软报表,异常问题汇总
- 戴尔服务器虚拟 介质,使用Dell R710 IDRAC挂载虚拟介质
- UE4中修改模型的中心点
- 【如何处理信息收集时子域名爆破泛解析的问题】
- 在虚拟机上同步服务器上的时间_Hbase
- 阿里云域名相关操作(购买、解析、备案)
- 场强测试软件,无线场强测试系统的软件结构设计与实现
- 日本公路管理的基本模式
热门文章
- Ubantu下安装adobe flash player插件
- 杂谈---2013年,总结?吐槽?灌水?
- Spring MVC http消息转换类
- 博文视点大讲堂28期 “助你赢在软件外包行业”成功举办
- Objective-C ,ios,iphone开发基础:UIAlertView使用详解
- centos6.5远程桌面连接(VNC\SPice)
- zbb20180929 thread 自旋锁、阻塞锁、可重入锁、悲观锁、乐观锁、读写锁、对象锁和类锁...
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件...
- es6 let和const命令(1)
- adb devices 找不到夜神模拟器解决方法