知乎問(wèn)題：如何看待 TC39 的提案 Module Fragments？
閑逛知乎的時(shí)候看到了這個(gè)問(wèn)題，下面只有 2 個(gè)回答。賀師俊大佬竟然也關(guān)注了這個(gè)問(wèn)題，于是......
以下是知乎原文，歡迎各位去知乎為俺三連：點(diǎn)贊、評(píng)論和收藏。
沒(méi)人邀請(qǐng)，我來(lái)勇敢回答一把子這個(gè)問(wèn)題。
首先來(lái)看下這個(gè)提案到底是什么。
JavaScript module fragments are a syntax for named, inline JS modules, which can be used for bundling multiple modules into a single JavaScript file.
直譯一下，JS module fragments 是 JS 模塊語(yǔ)法的一個(gè)提案，我們也可以叫它 “模塊片段”，可用于在單個(gè) JavaScript 文件中寫(xiě)多個(gè)模塊代碼。
簡(jiǎn)單來(lái)說(shuō)，目前的 ES Modules 是以文件為單位劃分的，而 TC39 這個(gè)提案的意思是可以更進(jìn)一步，在同一個(gè) JS 文件中，對(duì)代碼進(jìn)行模塊的拆分，這有點(diǎn)類(lèi)似于很多其它編程語(yǔ)言中的 `region` 注釋片段。
舉個(gè)例子，上代碼：
// filename: app.js
// 定義一個(gè)模塊 #count module "#count" { let i = 0; // 模塊導(dǎo)出一個(gè)函數(shù) export function count() { i++; return i; }}
// 定義另外一個(gè)模塊 #uppercasemodule "#uppercase" { // 導(dǎo)出一個(gè)函數(shù) export function uppercase(string) { return string.toUpperCase(); }}
// 導(dǎo)入模塊，此處與 ES 標(biāo)準(zhǔn)化模塊語(yǔ)法一致，import { count } from "#count";import { uppercase } from "#uppercase";
console.log(count()); // 1console.log(uppercase("daniel")); // "DANIEL"
沒(méi)錯(cuò)，這就是提案中的示例代碼，我加了注釋。
之所以有這樣的提案，大家可以在提案中的動(dòng)機(jī)中找到，大致可以總結(jié)為小文件在各類(lèi)環(huán)境中的加載成本很高，并且需要借助其他打包工具。
截取一段，用我小學(xué)二年級(jí)的翻譯水平來(lái)展示一下：
This proposal adds a syntax to JavaScript to allow for several JavaScript modules in one file. This format can be used as output by bundlers, with low overhead on execution, so that bundlers don't have to emulate as much, and JS engines can see what's going on. It's also convenient to be typed directly by JavaScript developers, and it should be low overhead to fit into existing workflows.
該提案為 JavaScript 增加了一種語(yǔ)法，該語(yǔ)法允許在一個(gè)文件中包含多個(gè) JavaScript 模塊。這種格式的模塊可以被打包輸出，以此降低執(zhí)行成本，因此，傳統(tǒng)意義上的打包工具就不再那么重要了，JS 引擎本身可以就可以完成這一系列工作，便于開(kāi)發(fā)者可以直接使用原始的 JavaScript，而且這也很容易讓其融入到現(xiàn)有的開(kāi)發(fā)流程之中。
我個(gè)人是很支持這個(gè)提案的。
從根本上來(lái)講，JavaScript 的誕生太過(guò)快速（“草率”），當(dāng)時(shí)也沒(méi)想到今天會(huì)有這么大的應(yīng)用規(guī)模，所以很多高級(jí)特性并不完備。
歷史上，JavaScript 一直沒(méi)有模塊系統(tǒng)，無(wú)法將一個(gè)大程序按照各自職責(zé)拆分成互相依賴(lài)的小模塊，再用簡(jiǎn)單的方法拼裝起來(lái)。這對(duì)構(gòu)建復(fù)雜的大型應(yīng)用形成了巨大障礙。
現(xiàn)在大家耳詳能熟的 Webpack 就是為了更好的解決這一問(wèn)題而誕生的，不過(guò)這一次，不再是社區(qū)方案或者工具，終于有人向語(yǔ)言標(biāo)準(zhǔn)下手了，試圖從語(yǔ)言層面站出來(lái)徹底根治這個(gè)問(wèn)題。
這一語(yǔ)法的出現(xiàn)，在現(xiàn)階段最大的核心能力就是“模塊打包相關(guān)”。在該提案的動(dòng)機(jī)里有提到一個(gè)非常重要的點(diǎn)：“瀏覽器預(yù)判” ，即瀏覽器提前預(yù)判是否需要預(yù)先加載模塊，這樣一來(lái)，就能夠區(qū)分模塊是否需要被加載，從而有效提升加載性能。
當(dāng)然，如果此提案能夠被最終通過(guò)，也一定是漸進(jìn)式的，至于能夠釋放多大的能量，就看各位大佬的聰明才智了。
xdm，支持此提案的給我點(diǎn)贊走一波……
推薦閱讀：
如何使用 Webpack 實(shí)現(xiàn)模塊化打包？
恭喜你又在前端道路上進(jìn)步了一點(diǎn)點(diǎn)。
點(diǎn)個(gè)“在看”和“贊”吧！