深入理解webpack打包机制(2)
})([ module.exports = <span style="color: #800000">"<span style="color: #800000">Hello World<span style="color: #800000">"<span style="color: #000000">; }),<span style="color: #008000">/<span style="color: #008000"> 1 <span style="color: #008000">/<span style="color: #000000"> module.exports = __webpack_require__(<span style="color: #800080">2<span style="color: #000000">); }),<span style="color: #008000">/<span style="color: #008000"> 2 <span style="color: #008000">/<span style="color: #000000"> <span style="color: #0000ff">var index2 = webpack_require(<span style="color: #800080">3<span style="color: #000000">); console.log(index2); }),<span style="color: #008000">/<span style="color: #008000"> 3 <span style="color: #008000">/<span style="color: #000000"> <span style="color: #0000ff">var util = __webpack_require__(<span style="color: #800080">0<span style="color: #000000">); }) ]);
上述过程还是比较简单的,但有些点需要注意: 1、每个模块只会加载一次,所以重复加载的模块只会执行一次,加载过的模块会放到 installedModules,下次需要需要该模块的值就直接从里面拿了。 2、模块的id 直接通过数组下标去一一对应的,这样能保证简单且唯一,通过其它方式比如文件名或文件路径的方式就比较麻烦,因为文件名可能出现重名,不唯一,文件路径则会增大文件体积,并且将路径暴露给前端,不够安全。 3、modules[ 二、多入口文件如何进行代码切割 我们在开发一些较复杂的应用时,如果没有对代码进行切割,将第三方库(jQuery)或框架(React) 和业务代码全部打包在一起,就会导致用户访问页面速度很慢,不能有效利用缓存。 utilA = require( utilB = require(<span style="color: #008000">//<span style="color: #008000"> /src/multiple/pageB.js<span style="color: #0000ff">const utilB = require(<span style="color: #800000">'<span style="color: #800000">./js/utilB<span style="color: #800000">'<span style="color: #000000">); console.log(utilB); <span style="color: #008000">//<span style="color: #008000"> 异步加载文件,类似于 import() <span style="color: #0000ff">const utilC = () => require.ensure([<span style="color: #800000">'<span style="color: #800000">./js/utilC<span style="color: #800000">'<span style="color: #000000">],function(require) { console.log(require(<span style="color: #800000">'<span style="color: #800000">./js/utilC<span style="color: #800000">'<span style="color: #000000">)) }); utilC(); (编辑:ASP站长网) |