webpack之scope hoisting

• 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
  

测试代码

https://github.com/baixc1/csdn/tree/master/note/note17