js引擎運(yùn)行模塊時(shí):
- 語(yǔ)法解析: 閱讀模塊源代碼,檢查語(yǔ)法錯(cuò)誤;
- 加載: 遞歸的加載所有被導(dǎo)入的模塊(深度優(yōu)先遍歷),這一部分未被標(biāo)準(zhǔn)化.
- 連接: 每遇到一個(gè)新加載的模塊,為其創(chuàng)建作用域并將模塊內(nèi)聲明的所有綁定填充到該作用域中,包括由其他模塊導(dǎo)入的內(nèi)容;
- 運(yùn)行時(shí): 最終,在每一個(gè)新加載的模塊體內(nèi)執(zhí)行所有語(yǔ)句, 導(dǎo)入過(guò)程結(jié)束.
系統(tǒng)不指定加載過(guò)程的實(shí)現(xiàn)方式
你可以通過(guò)在源代碼中查找import聲明提前計(jì)算出所有依賴，你可以將ES6系統(tǒng)實(shí)現(xiàn)為：
在編譯時(shí)計(jì)算所有依賴并將所有模塊打包成一個(gè)文件，通過(guò)網(wǎng)絡(luò)一次傳輸所有模塊！像webpack這樣的工具就實(shí)現(xiàn)了這個(gè)功能。
為什么這樣做?
因?yàn)橥ㄟ^(guò)網(wǎng)絡(luò)加載腳本需要花費(fèi)時(shí)間，每當(dāng)你請(qǐng)求到一個(gè)模塊，你可能發(fā)現(xiàn)它里面也包含著import聲明，這就需要你再花費(fèi)一些時(shí)間加載更多的腳本。這會(huì)消耗更多的網(wǎng)絡(luò)往返時(shí)間
靜態(tài)的模塊系統(tǒng)
- 只可以在模塊的最外層作用域使用import, export,不可以在條件語(yǔ)句中使用,也不能在函數(shù)作用域中使用import.
- 所有到處的標(biāo)識(shí)符一定要在源代碼中明確地導(dǎo)出它們的名稱,你不能通過(guò)編寫(xiě)代碼遍歷一個(gè)數(shù)組然后用數(shù)據(jù)驅(qū)動(dòng)的方式導(dǎo)出一堆名稱.
- 模塊對(duì)象唄凍結(jié)了,無(wú)法hack模塊對(duì)象并為其添加polyfill風(fēng)格的新特性.
- 一個(gè)模塊的所有依賴必須在模塊代碼運(yùn)行前完全加載,解析并且及早連接,不存在一種通過(guò)import來(lái)按需懶加載的語(yǔ)法.
- import模塊產(chǎn)生的錯(cuò)誤沒(méi)有錯(cuò)誤恢復(fù)機(jī)制,一旦一個(gè)模塊加載出錯(cuò),所有的模塊都不會(huì)運(yùn)行.無(wú)法用try/catch 來(lái)捕獲錯(cuò)誤.
- 不支持在模塊加載依賴前運(yùn)行其它代碼的鉤子,這意味著無(wú)法控制模塊的依賴加載過(guò)程.
額外的動(dòng)態(tài)編程加載器API------"動(dòng)態(tài)",打破上面列舉的規(guī)則
webpack引入了代碼分割A(yù)PI來(lái)實(shí)現(xiàn)按需加載
" ES6模塊語(yǔ)法非常靜態(tài)，這是很好的——它通過(guò)強(qiáng)有力的編譯時(shí)工具的形式進(jìn)行彌補(bǔ)。但是設(shè)計(jì)靜態(tài)語(yǔ)法的初衷是要與豐富的動(dòng)態(tài)編程加載器API一起增強(qiáng)ES6的模塊系統(tǒng)。"
