刚开始接触bundle内容的时候一直有如下一个问题:
bundle不就是js文件的集合体么,为什么不是直接将压缩好的js内容复制过来,而是设计成如此格式呢
让我很诧异的是在网上竟然没有找到相关的资料,起初以为很多人没有意识到这个问题,搞明白以后才发现原来是这个是前端比较基础的内容,应该是很多人不屑于谈这个,泪目呀
要搞明白这个问题,首先我们要知道前端常用的export/module/require等是属于CommonJS规范,而CommonJS规范起源于Node,本身是不支持浏览器的,之所以我们用着没问题,是因为Webpack在bundle
文件中帮我们实现了Commonjs规范
,可能有朋友会问,我在调试中并没有加载bundle呀,那为啥调试没问题呢,这是因为调试过程中使用的是没有写入文件的bundle,其实跟在生产环境使用的内容是一致的
如上所说,bundle被设计成如此格式,主要就是为了实现CommonJS规范
,建议大家在分析bundle的时候(webpack 打包后文件分析),优先要搞明白里面是如何实现CoomonJS的如下两个功能,这两个问题搞懂了,你基本就明白bundle是个啥情况了
- 实现模块化开发,提高代码复用率
- 实现封装作用域,避免命名冲突
格式的原因分析完后,脑袋里又有如下一个问题:
bundle为啥要是自执行函数呢
这个问题就比较简单了,在webpack是支持同时打出多个bundle的,浏览器也会同时加载多个bundle,使用自执行函数就是为了区分两个bundle的作用域,避免两个bundle的变量在互相污染