Webpack 通过 Scope Hoisting 来提升性能
前言
如果你是一位前端工程师，你一定听说过 Webpack，它是一款现代 JavaScript 应用程序的静态模块打包工具。在 Webpack 的“模块化”概念中，每个模块都有它们自己的作用域，所以在打包过程中，Webpack 会创建新的函数作用域，这就会导致打包后的 bundle.js 文件中包含很多 boiletplate（样板代码），从而导致 bundle.js 文件过大，加载时间变长，这显然不利于性能优化。
但是，Webpack 2 引入了 SCOPE HOISTING 这个新的特性，它通过将所有模块代码合并到一个函数作用域内，从而消除了 boiletplate 代码，并使得打包后的 bundle.js 文件更小、加载时间更短，这样就可以提升应用程序的性能，这也是我们本文要讨论的内容。
Scope Hoisting 是什么？
Scope Hoisting 是 Webpack 2 中一项新的特性，可以通过 webpack.optimize.ModuleConcatenationPlugin 插件来打开。它的主要思想是将模块代码合并到一个函数作用域内，从而消除掉其他模块系统中的一些 boiletplate 代码。这个过程有点像是将模块的导入和导出都当做函数参数，传递给模块函数的过程。
这里是 Scope Hoisting 的工作原理：
- 若干模块被识别为可以合并的模块；
- 一个函数包含着一个函数作用域，函数作用域中的代码被流程化，并且是在一个函数中运行；
- 满足要求的所有模块都会被当做一个参数列表，然后传递给这个函数；
- 模块中的作用域被替换成函数参数；
- 最终打包出来的结果是一个更小的、没有 boiletplate 代码的 bundle.js 文件。
对于代码比较大的应用来说，通过 Scope Hoisting 这个特性可以减少文件大小和加载时间，从而提高应用程序的性能。
下面我们来看一些示例代码：
-- -------------------- ---- -------
-- -------
------ - --- - ---- ---------
----- - - --
- - --
------------------ ----
-- -------
------ ----- --- - --- -- -- - - --通过 webpack.optimize.ModuleConcatenationPlugin 插件打包后的代码：
-- -------------------- ---- -------
---------------- ------ -
-------- ------ -- -
------ - - --
-
----- - - --
- - --
------------------ ----
------------- -
------ -----------------------
-- ---------- -
------ -----------------------
--
-- -------
-- - - -------
-- - - -------可以看到，在打包后的代码中，我们的模块已经被转换为参数传递给了一个函数，并且 module.id 也被移除，这是 Scope Hoisting 的实现原理。
如何使用 Scope Hoisting？
如果你正在使用 Webpack 2，那么只要通过 webpack.optimize.ModuleConcatenationPlugin 插件打开 Scope Hoisting 的配置，就可以在打包中使用 Scope Hoisting 了。
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};如果你正在使用 Webpack 3 或更新版本，你也许已经听说过，Scope Hoisting 已经成为了默认特性，所以不再需要额外的配置了。只需要确保你的 Webpack 版本是 3 或更新版本，然后运行打包即可。
总结
通过本文的介绍，我们了解了 Scope Hoisting 的工作原理和如何使用它来提升 Webpack 打包应用程序的性能。我们注意到这是一项非常有用的特性，可以减少包含大量小模块的应用程序的文件大小和加载时间，从而提高程序的性能和用户体验。
在实际开发中，我们可以通过在代码中引入一些优化措施，使得整个程序的性能比较高效。我们需要时刻关注前端技术的发展和新的语言特性，从而更好的优化我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647851e0968c7c53b0490384