- 頁面中越來越多的js
- 現(xiàn)在瀏覽器提供更多接口
- 更少的頁面重載刷新，頁面中有更多的代碼
這些導(dǎo)致瀏覽器端存在大量的代碼瞬捕，需要重新組織鞍历，于是出現(xiàn)了模塊系統(tǒng)劣砍。
模塊系統(tǒng)目前有很多標(biāo)準(zhǔn)：
- <script>標(biāo)簽風(fēng)格（沒有模塊系統(tǒng)）
- Commonjs
- AMD規(guī)范以及對應(yīng)實現(xiàn)
- ES6模塊
- 其它
<script>標(biāo)簽風(fēng)格
如果沒有模塊系統(tǒng)秆剪，我們經(jīng)常會這樣處理模塊化的代碼
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>
各個模塊把接口暴露給全局對象，比如window對象仅讽。各個模塊之間可以通過全局對象進(jìn)行訪問互相依賴的接口。
普遍的問題：
- 全局對象的沖突
- 加載的順序是重要的
- 開發(fā)者需要解決模塊的依賴問題
- 在大項目中模塊引入的數(shù)目將會非常長并且難以維護(hù)
commomJs：同步的require
這種風(fēng)格使用同步的require方法來加載依賴和返回暴露的接口饱岸。一個模塊可以通過給exports對象添加屬性苫费，或者設(shè)置module.exports的值來描述暴露對象双抽。
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;
CommonJs規(guī)范在服務(wù)端nodejs中使用。
優(yōu)點：服務(wù)端代碼可以被重用铐维；npm中有大量模塊慎菲；用起來簡單方便
缺點：阻塞調(diào)用無法在網(wǎng)絡(luò)環(huán)境應(yīng)用，網(wǎng)絡(luò)請求是異步的睬棚；不能并行requrie多個模塊
CommonJs規(guī)范的實現(xiàn)
- node.js -server端
- browserify
- modules-webmake - 編譯成一個 bundle
- wreq -client端
AMD：異步的require
require(["module", "../file"], function(module, file) { /* ... */ }); define("mymodule", ["dep1", "dep2"], function(d1, d2) {
return someExportedValue;
});
優(yōu)點：符合了在網(wǎng)絡(luò)中異步請求的風(fēng)格抑党；可以并行加載多個模塊
缺點：編碼成本增加,可讀性不好寫起來麻煩撵摆；更像是一種臨時修補(bǔ)方案
AMD 規(guī)范的實現(xiàn)有：
require.js - client 端
curl - client 端
ES6模塊
ECMAScript 2015 (6th Edition) 給 JavaScript添加了一些語法結(jié)構(gòu)，用來實現(xiàn)另外一種模塊系統(tǒng)
import "jquery";
export function doStuff() {}
module "localModule" {}
優(yōu)點：靜態(tài)分析方便；作為ES的標(biāo)準(zhǔn)前途是光明
缺點：瀏覽器支持還需要很長時間篱瞎；這種風(fēng)格的模塊不多
傳輸
實現(xiàn)了模塊化，將模塊從server端傳輸?shù)綖g覽器端又是另一個問題牵素，傳輸模塊會出現(xiàn)兩個極端：
- 每個模塊都是一個請求
- 一個請求包含了所有模塊
這兩種情況目前使用的都很普遍笆呆，但都不是最佳方案请琳，第一種雖然只傳輸需要的模塊俄精，但是要發(fā)多個請求榕堰，請求的延遲會導(dǎo)致應(yīng)用啟動的很慢；第二種雖然請求少圾旨、延遲低魏蔗，但是傳輸不需要的模塊又形成了浪費(fèi)
webpack就提出了一種更靈活的方式：
當(dāng)編譯所有模塊時，將模塊集分成多個較小的組(塊)
這會使得多個請求更小廓鞠、更快产雹。初始化階段不需要的模塊組可以按需加載。這樣就可以加速初始加載夕土，當(dāng)你實際需要代碼時也能加載更多的代碼塊瘟判。
「分割點」取決于開發(fā)者
一個大的代碼庫也是可能的
并且webpack除了能處理js模塊，其他資源也可以處理篮撑，這樣我們使用起來就更方便
