webpack 的 scope hoisting 是什么?

栏目: 编程语言 · 发布时间: 5年前

内容简介:原文链接:scope hoisting 是 webpack3 的新功能,直译过来就是「作用域提升」。熟悉 JavaScript 都应该知道「函数提升」和「变量提升」,JavaScript 会把函数和变量声明提升到当前作用域的顶部。「作用域提升」也类似于此,webpack 会把引入的 js 文件“提升到”它的引入者顶部。接下来尝试在 webpack4 使用这个功能,对比启用前后的打包区别,相信你一定能很快理解他的作用。

原文链接: 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 个文件。

webpack 的 scope hoisting 是什么?

// 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,
}

文件间的引用关系是这样的:

webpack 的 scope hoisting 是什么?

文件都准备好了,立即运行 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 是什么?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Access2003数据库开发典型范例

Access2003数据库开发典型范例

王樵民 / 第1版 (2006年8月1日) / 2006-8 / 42.00元

Access数据库管理软件是一套集数据管理、程序开发功能于一体的高级办公软件,是特别适合普通办公人员进行日常工作的有力助手。本书面向非计算机专业人员,通过多个实例讲解Access中的各种开发技术,介绍实际工作过程中应用软件的编制方法,以及与Excel等软件之间的信息互用技术等内容。能够帮助读者快速掌握Access数据库的开发技术,构建解决自己工作中实际问题的数据库管理系统,从而提高办公效率。一起来看看 《Access2003数据库开发典型范例》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具