- scope hoisting:作用域提升
不使用 scope hoisting 情况
- 代码
// webpack.config.js
module.exports = {
mode: 'none',
}
// index.js
import { count } from './b.js'
console.log(count);
// b.js
import all from './a.js'
export let count = 5;
console.log(all)
console.log('b.js')
// a.js
export default 'aa'
console.log('a.js')
-
输出的bundle中模块部分
-
函数调用栈
-> webpack_require(0)
-> webpack_modules[0]()
-> webpack_modules[1]()
-> webpack_modules[2]() -
导致问题
- 函数大量嵌套,函数调用栈太多降低性能
使用 scope hoisting
- 配置及代码
// webpack.config.js
const webpack = require('webpack')
module.exports = {
mode: 'none',
optimization: {
concatenateModules: true
}
// plugins: [
// new webpack.optimize.ModuleConcatenationPlugin()
// ]
}
// 其他代码不变
- 输入
var __webpack_modules__ = ([/* 0 */
/***/
((__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
;// CONCATENATED MODULE: ./src/a.js
// a.js
/* harmony default export */
const a = ('aa');
console.log('a.js');
// CONCATENATED MODULE: ./src/b.js
// b.js
let count = 5;
console.log(a)
console.log('b.js');
// CONCATENATED MODULE: ./src/index.js
// index.js
console.log(count);
/***/
}
)/*
- 结论:函数嵌套没了,在同一个函数中执行
- 生产环境默认开启改功能
Prevent and Root
- Prevent : 同一个作用域内(如上例)
- Root:新模块作用域(例如 require,import() 等)
require 示例
// b.js
// import all from './a.js'
const all = require('./a')
export let count = 5;
console.log(all)
console.log('b.js')
- 新函数
import() 函数示例
// b.js
// import all from './a.js'
// const all = require('./a')
const all = import('./a')
export let count = 5;
all.then(v => console.log(v.default))
console.log('b.js')
- 新 chunk