我在目前的項(xiàng)目中遇到了一個(gè)匪夷所思的問(wèn)題：CommonJS規(guī)范是同步加載模塊資源崔梗，為什么前端項(xiàng)目中webpack使用的寫法卻可以遵循這個(gè)偏服務(wù)器端的一個(gè)規(guī)范呢锋爪？為什么不用適合瀏覽器異步加載策略的AMD規(guī)范呢？
首先要理解一下CommonJS酪呻、AMD兩種規(guī)范各是什么意思？
CommonJS的核心思想是把一個(gè)文件當(dāng)做一個(gè)模塊，要在哪里使用這個(gè)模塊揽思，就在哪里require這個(gè)模塊，然后require方法開始加載這個(gè)模塊并且執(zhí)行其中的代碼见擦，最后會(huì)返回你指定的export對(duì)象钉汗。例如：
a.js中
module.export = function() {
hello: function() {
alert("你好");
}
}
你在其它js中可以這樣
var a = require('./xxx/a.js');
a.hello(); // ==> 彈窗“你好”
順便在這里說(shuō)一下commonJS中有的地方用module.export = xxx羹令，有的地方用export = xxx，其實(shí)它們沒(méi)有多大區(qū)別损痰，node.js中 module是個(gè)對(duì)象福侈，export是其中的一個(gè)屬性，而export就是對(duì)moudle.export這個(gè)屬性的一個(gè)引用罷了卢未。
參考鏈接：node.js中module.export與export的區(qū)別肪凛。
BUT
CommonJS 加載模塊是同步的，所以只有加載完成才能執(zhí)行后面的操作尝丐，不能非阻塞的并行加載多個(gè)模塊显拜。像Node.js主要用于服務(wù)器的編程，加載的模塊文件一般都已經(jīng)存在本地硬盤爹袁，所以加載起來(lái)比較快远荠，不用考慮異步加載的方式，所以CommonJS規(guī)范比較適用失息。但如果是瀏覽器環(huán)境譬淳，要從服務(wù)器加載模塊，這是就必須采用異步模式盹兢。所以就有了 AMD CMD 解決方案邻梆。
AMD和CMD規(guī)范都是異步加載的方式，CMD沒(méi)有具體了解過(guò)就不多說(shuō)了绎秒，它的典型實(shí)現(xiàn)是SeaJS浦妄，據(jù)說(shuō)是按需加載就近原則，as lazy as posible.
AMD全稱(Asynchromous Module Definition)见芹，它主要是采用了異步加載模塊的方式剂娄，可以并行加載多個(gè)模塊，等所有模塊都加載并且解釋執(zhí)行完成后玄呛，才會(huì)執(zhí)行接下來(lái)的代碼（包括用AMD規(guī)范轉(zhuǎn)換成CommonJS模塊定義）阅懦，講究一個(gè)“提前執(zhí)行”的思想，RequireJS就是對(duì)AMD規(guī)范最直接的實(shí)現(xiàn)徘铝。
下面用RequireJS來(lái)執(zhí)行幾個(gè)模塊耳胎，看看會(huì)發(fā)生什么。
a.js
define(function() {
console.log("I am module a, I have been required and excuted");
});
b.js
define(['c'], function(c) {
console.log("I am module b, I have been required and excuted, I depend on module c");
});
c.js
define(function() {
console.log("I am module c, I have been required and excuted");
});
main.js
//轉(zhuǎn)換成CommonJS模塊定義
define(function(require, exports, module) {
require("a");
console.log("a required");
require("b");
console.log("b required");
console.log("all modules have been required");
});
然后你覺(jué)得結(jié)果會(huì)是這樣嗎惕它？
No! No! No怕午！
如果你用的是實(shí)現(xiàn)CommonJS規(guī)范的Browserify或者用webpack來(lái)運(yùn)行這些模塊的話，結(jié)果確實(shí)是上述那樣淹魄，上圖就是CommonJS規(guī)范所得到的結(jié)果郁惜。
實(shí)際結(jié)果是：
仔細(xì)一想，RequireJS是標(biāo)準(zhǔn)的采用AMD規(guī)范異步加載方式的揭北，也就是說(shuō)不管你用了AMD規(guī)范轉(zhuǎn)換成CommonJS規(guī)范寫的模塊（偽同步扳炬，和CommonJS寫法相同而已實(shí)際還是異步）還是直接異步加載，AMD規(guī)范始終遵循一切模塊皆優(yōu)先加載并執(zhí)行搔体，所以就算把require模塊寫到某句執(zhí)行的代碼后面恨樟，它仍然會(huì)被拉到最先去執(zhí)行。
這里想記一下我查詢資料得知的一些關(guān)于模塊加載和解析執(zhí)行的東西疚俱。
一個(gè)模塊被require之后它會(huì)經(jīng)歷兩個(gè)步驟劝术，首先是加載，這個(gè)加載呆奕，可以是從本地加載的养晋，比如webpack打包后的模塊，也可以是從服務(wù)器請(qǐng)求來(lái)的模塊資源梁钾。接著模塊中的代碼會(huì)被瀏覽器解釋執(zhí)行绳泉。CommonJS規(guī)范和AMD規(guī)范最大區(qū)別就體現(xiàn)在加載那一步驟上，如果都是從本地加載的姆泻，ok零酪，是不是并行加載無(wú)所謂，反正都很快拇勃，如果是前端請(qǐng)求服務(wù)器獲取模塊資源四苇，CommonJS的同步加載方式就坑爹了，它會(huì)由于某個(gè)請(qǐng)求加載的時(shí)間過(guò)長(zhǎng)導(dǎo)致瀏覽器阻塞方咆，不會(huì)往下執(zhí)行月腋，所以就會(huì)出現(xiàn)網(wǎng)頁(yè)打開緩慢的現(xiàn)象。但是CommonJS和AMD的模塊執(zhí)行那一步所用的時(shí)間是一樣的瓣赂。
所以這就很好解釋了為什么webpack可以讓前端模塊開發(fā)使用CommonJS榆骚，原因是無(wú)所謂。webpack也支持AMD钩述、CMD規(guī)范寨躁，我自己試驗(yàn)過(guò)用無(wú)論是采用CommonJS還是AMD規(guī)范編寫模塊，最后都會(huì)被webpack分析依賴關(guān)系牙勘，然后打包到本地职恳。之后瀏覽器加載的時(shí)候其實(shí)都是在讀取本地文件（我的理解，總之同步異步?jīng)]有什么區(qū)別了）方面。
最后放出一張我覺(jué)得很好地幫我理解RequireJS放钦、SeaJS和Browserify、Webpack的圖
RequireJS和SeaJS都是在線編譯的恭金，就是在瀏覽器上加了一個(gè)CommonJS和AMD規(guī)范的解釋器解釋執(zhí)行操禀。
browserify和webpack是預(yù)編譯，在本地將你寫的CommonJS和AMD模塊編譯裝換成瀏覽器認(rèn)識(shí)的JS横腿。
