一、原因
没有使用scope hoisting时,打包之后的代码,每一个使用es6语法引入的文件,都会创建一个这样的闭包:
(function (module, __webpack_exports__, __webpack_require__){
....// 每个文件打包之后的代码
})
然后将打包之后的文件代码放到这个闭包中,有n个文件,就会创建n个闭包,就会有n个函数作用域和闭包,会占用大量的内存,并且打包之后的文件体积也很大,所以为了减少内存,我们要将一个chunk的的代码放在一个闭包中,按照其中文件的引入顺序放,这样一个bundle.js中只有一个闭包。
二、模块转换
模块转换就是上面我们所说的,将es代码进行转换,放在闭包中。并且将import转换成__webpack_exports,export转换成__webpack_require__。
三、scope hoisting原理
原理:将所有模块按照引用的顺序放在一个函数作用域中,并重新命名防止命名冲突。
作用:通过将所有的模块放在一个函数作用域中,减少函数声明和内存开销。
四、使用
webpack4及以上版本在mode为production时默认开启,只支持es6代码,不支持CJS。