webpack 的 scope hoisting 是什么？

or0fun 发布于2019-08-23 15:22 / 1945人阅读

摘要：原文链接是的新功能，直译过来就是作用域提升。作用域提升也类似于此，会把引入的文件提升到它的引入者顶部。接下来尝试在使用这个功能，对比启用前后的打包区别，相信你一定能很快理解他的作用。

原文链接：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() 时，不会应用作用域提升，模块依然会拆分开，不过具体代码会跟正常的引入有一点差异。

云服务器 GPU云服务器 scope是什么意思 webpack是什么 webpack的作用 hoist

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101938.html

webpack2 示例之：Scope Hoisting 和 Code Splitting

摘要：原文链接译者这个示例演示了与代码拆分相结合的。这是示例的依赖图实线表示同步导入，虚线表示异步导入除之外的所有模块都是模块。为了避免冲突，模块中的模块连接标识符被重命名，并简化了内部导入。根模块的外部导入和导出使用现有的结构。原文链接：https://github.com/webpack/we...译者：@justjavac 这个示例演示了与代码拆分相结合的 Scope Hoistin...

chunquedong 2019-08-20 18:52 评论0 收藏0
Webpack 最佳实践总结(三)

摘要：这里要介绍的是工作流中的一种很普遍的代码加工流程正常的业务逻辑开发流程需要经过预处理器如或，然后再经过后处理器如进行深加工。还未看的，可以点击查看上两篇文章哟：Webpack 最佳实践总结(一)、Webpack 最佳实践总结(二) 好了，这篇是第三篇，也是完结篇，我感觉这一篇是最乱的一篇，凑合着看吧，不会让你失望的整合 CSS 加工流有时候，前端项目中除了 JavaScript ...

pkhope 2019-08-20 18:53 评论0 收藏0
Webpack 最佳实践总结(三)

摘要：这里要介绍的是工作流中的一种很普遍的代码加工流程正常的业务逻辑开发流程需要经过预处理器如或，然后再经过后处理器如进行深加工。还未看的，可以点击查看上两篇文章哟：Webpack 最佳实践总结(一)、Webpack 最佳实践总结(二) 好了，这篇是第三篇，也是完结篇，我感觉这一篇是最乱的一篇，凑合着看吧，不会让你失望的整合 CSS 加工流有时候，前端项目中除了 JavaScript ...

jerryloveemily 2019-08-29 13:13 评论0 收藏0
性能优化篇---Webpack构建代码质量压缩

摘要：运行构建带上可追踪到的工作只能正确的分析出如何剔除死代码，需要接入处理剔除配置见上开启即作用域提升在构建过程中，会借助模块化的静态特性，确定模块的依赖关系，将一个中的静态依赖提升到顶部。 Webpack构建速度优化基本优化完毕，接下来考虑的就是：线上代码质量的优化，即如何使用webpack构建出高质量的代码 Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确...

KunMinX 2019-08-23 16:22 评论0 收藏0