什么是webpack scope hoisting?

526 阅读1分钟

翻译过来就是,webpack作用域提升。它是webpack的内置优化,在生产环境打包时会自动开启。

在未开启scope hoisting时,webpack会将每个模块的代码放置在一个独立的函数环境中,这样做是为了保证模块的作用域互不干扰。

而scope hoisting的作用恰恰相反,是把多个模块的代码合并到一个函数作用域中执行。在这一过程中,webpack会按照顺序正确的合并模块代码,同时对设计的标识符做适当处理以避免重名。

这样做的好处是减少了函数调用,对运行效率有一定提升,同时也降低了打包体积。

但scope hoisting 的启用是有前提的,如果遇到某些模块多次被其他模块引用,或者使用了动态导入的模块,或者是非ESM的模块,都不会有scope hoisting。