[[414443]]

本文轉(zhuǎn)載自微信公眾號「勾勾的前端世界」，作者加班的打工人1234。轉(zhuǎn)載本文請聯(lián)系勾勾的前端世界公眾號。

閑逛知乎的時候看到了這個問題，下面只有 2 個回答。賀師俊大佬竟然也關(guān)注了這個問題，于是......

以下是知乎原文，歡迎各位去知乎為俺三連：點贊、評論和收藏。

沒人邀請，我來勇敢回答一把子這個問題。

首先來看下這個提案到底是什么。

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 模塊語法的一個提案，我們也可以叫它 “模塊片段”，可用于在單個 JavaScript 文件中寫多個模塊代碼。

簡單來說，目前的 ES Modules 是以文件為單位劃分的，而 TC39 這個提案的意思是可以更進一步，在同一個 JS 文件中，對代碼進行模塊的拆分，這有點類似于很多其它編程語言中的 `region` 注釋片段。

舉個例子，上代碼：

// filename: app.js  
 
// 定義一個模塊 #count  
module "#count" { 
  let i = 0; 
   // 模塊導(dǎo)出一個函數(shù) 
  export function count() { 
    i++; 
    return i; 
  } 
} 
 
// 定義另外一個模塊 #uppercase 
module "#uppercase" { 
  // 導(dǎo)出一個函數(shù) 
  export function uppercase(string) { 
    return string.toUpperCase(); 
  } 
} 
 
// 導(dǎo)入模塊，此處與 ES 標(biāo)準(zhǔn)化模塊語法一致， 
import { count } from "#count"; 
import { uppercase } from "#uppercase"; 
 
console.log(count()); // 1 
console.log(uppercase("daniel")); // "DANIEL" 

沒錯，這就是提案中的示例代碼，我加了注釋。

之所以有這樣的提案，大家可以在提案中的動機中找到，大致可以總結(jié)為小文件在各類環(huán)境中的加載成本很高，并且需要借助其他打包工具。

截取一段，用我小學(xué)二年級的翻譯水平來展示一下：

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 增加了一種語法，該語法允許在一個文件中包含多個 JavaScript 模塊。這種格式的模塊可以被打包輸出，以此降低執(zhí)行成本，因此，傳統(tǒng)意義上的打包工具就不再那么重要了，JS 引擎本身可以就可以完成這一系列工作，便于開發(fā)者可以直接使用原始的 JavaScript，而且這也很容易讓其融入到現(xiàn)有的開發(fā)流程之中。

我個人是很支持這個提案的。

從根本上來講，JavaScript 的誕生太過快速(“草率”)，當(dāng)時也沒想到今天會有這么大的應(yīng)用規(guī)模，所以很多高級特性并不完備。

歷史上，JavaScript 一直沒有模塊系統(tǒng)，無法將一個大程序按照各自職責(zé)拆分成互相依賴的小模塊，再用簡單的方法拼裝起來。這對構(gòu)建復(fù)雜的大型應(yīng)用形成了巨大障礙。

現(xiàn)在大家耳詳能熟的 Webpack 就是為了更好的解決這一問題而誕生的，不過這一次，不再是社區(qū)方案或者工具，終于有人向語言標(biāo)準(zhǔn)下手了，試圖從語言層面站出來徹底根治這個問題。

這一語法的出現(xiàn)，在現(xiàn)階段最大的核心能力就是“模塊打包相關(guān)”。在該提案的動機里有提到一個非常重要的點：“瀏覽器預(yù)判” ，即瀏覽器提前預(yù)判是否需要預(yù)先加載模塊，這樣一來，就能夠區(qū)分模塊是否需要被加載，從而有效提升加載性能。

當(dāng)然，如果此提案能夠被最終通過，也一定是漸進式的，至于能夠釋放多大的能量，就看各位大佬的聰明才智了。

xdm，支持此提案的給我點贊走一波……