資訊專(zhuān)欄INFORMATION COLUMN
摘要：在中，你可以使用關(guān)鍵字輸出任何東西等。新的和語(yǔ)法僅限于在模塊腳本中使用，不能用在常規(guī)腳本中。開(kāi)發(fā)者工具的代碼覆蓋率檢查能幫助你檢測(cè)源碼中是否存在無(wú)用代碼。以達(dá)到無(wú)需加載其他無(wú)用函數(shù)的目的。
本文由云+社區(qū)發(fā)表譯者序作者：
原文：《Using JavaScript modules on the web》 https://developers.google.com...
JS modules，即ES6的模塊化特性，通過(guò)
本文將介紹JS模塊化；怎樣在不經(jīng)過(guò)打包的情況下直接在瀏覽器中使用模塊化；以及Chrome團(tuán)隊(duì)在JS模塊化的優(yōu)化和普及上正在做的一些事情。
JS模塊化你可能用過(guò)命名空間、CommonJS或者AMD規(guī)范進(jìn)行JS模塊化，但所有的這些模塊解決方案萬(wàn)變不離其宗：引入(import)其他模塊，作為一個(gè)模塊輸出(export)。如果說(shuō)命名空間、CommonJS、AMD都是野路子，那ES6的JS modules則是正規(guī)軍，將模塊化語(yǔ)法統(tǒng)一起來(lái)（一統(tǒng)江湖，千秋萬(wàn)代）。
在JS modules中，你可以使用 export關(guān)鍵字輸出任何東西： const、 function等。
// lib.mjsexport const repeat = (string) => `${string} ${string}`;export function shout(string) { return `${string.toUpperCase()}!`;}
然后你可以用 import關(guān)鍵字從另一個(gè)模塊中引進(jìn)來(lái)。下面代碼將lib模塊中的 repeat和 shout函數(shù)引到了我們的主模塊main中。
// main.mjsimport {repeat, shout} from "./lib.mjs";repeat("hello");// → "hello hello"shout("Modules in action");// → "MODULES IN ACTION!"
你也可以通過(guò) default關(guān)鍵字，輸出一個(gè)默認(rèn)值。
// lib.mjsexport default function(string) { return `${string.toUpperCase()}!`;}
而通過(guò)上面的 default輸出的模塊，在引入時(shí)可以用其他任何變量名。
// main.mjsimport shout from "./lib.mjs";// ^^^^^
模塊腳本與常規(guī)腳本有所區(qū)別：
模塊腳本默認(rèn)開(kāi)啟了嚴(yán)格模式
不支持HTML風(fēng)格的注釋
模塊具有詞法頂級(jí)作用域。也就是說(shuō)在模塊中 varfoo=42;并不會(huì)像傳統(tǒng)腳本一樣，創(chuàng)建一個(gè)全局變量 foo，可以通過(guò) window.foo訪問(wèn)。
新的 import和 export語(yǔ)法僅限于在模塊腳本中使用，不能用在常規(guī)腳本中。
正因?yàn)檫@些差異，模塊腳本和傳統(tǒng)腳本顯然需要各自不同的解析方式。因此JS解析器需要標(biāo)識(shí)出哪些腳本屬于是模塊類(lèi)型的。
瀏覽器如何識(shí)別模塊腳本你可以通過(guò)設(shè)置
那些支持 type=module的瀏覽器會(huì)忽略掉 nomodule的腳本，而不兼容也會(huì)優(yōu)雅降級(jí)，執(zhí)行fallback.js。
譯者注：親測(cè)在IE7+到edge，oppo手機(jī)自帶的瀏覽器都能夠降級(jí)而執(zhí)行fallback.js。不過(guò)加載fallback的同時(shí)，也會(huì)把index.mjs一并加載，而支持module的瀏覽器則不會(huì)加載fallback。
IE系列均會(huì)執(zhí)行fallback.js
加載fallback的同時(shí)，也會(huì)把index.mjs一并加載
而支持module的瀏覽器則只會(huì)加載模塊
有沒(méi)想過(guò)另外一個(gè)好處：既然瀏覽器能夠識(shí)別module，那它必然也能夠支持ES67的其他特性，如箭頭函數(shù)、async-await。你不需要為這些特性進(jìn)行babel編譯，現(xiàn)代瀏覽器跑著更小和最大部分未編譯的模塊化代碼，而不兼容的則使用nomodule的降級(jí)代碼。
瀏覽器加載方面的異同：模塊腳本vs傳統(tǒng)腳本上面介紹了模塊腳本和傳統(tǒng)腳本在語(yǔ)言層面的異同，除此之外，在瀏覽器加載過(guò)程中也有所不同。
同樣的模塊腳本只會(huì)執(zhí)行一次，而傳統(tǒng)腳本會(huì)聲明多次。 模塊腳本跨域需要加跨域頭模塊腳本及其依賴(lài)是通過(guò)CORS來(lái)獲取的，也就是說(shuō)模塊腳本一旦跨域就需要加上適當(dāng)?shù)姆祷仡^，比如 Access-Control-Allow-Origin:*。而眾所周知，傳統(tǒng)腳本則不需要（譯者注：還記得傳說(shuō)中的JSONP嗎）。
async屬性對(duì)內(nèi)聯(lián)腳本有效加了async屬性會(huì)使得腳本在下載過(guò)程中不阻塞DOM渲染，而下載完成后立即執(zhí)行，兩個(gè)async腳本之間的執(zhí)行時(shí)序不確定，執(zhí)行時(shí)機(jī)也不確定，有可能在domContentLoaded之前或者之后。但這一屬性對(duì)傳統(tǒng)的內(nèi)聯(lián)腳本是無(wú)效的，而對(duì)模塊的內(nèi)聯(lián)腳本卻是有效的。
關(guān)于 .mjs文件后綴你可能會(huì)對(duì)前面的 .mjs后綴感到好奇，但是在互聯(lián)網(wǎng)的世界里，文件后綴并不重要，只要服務(wù)器下發(fā)的MIME類(lèi)型( Content-Type:text/javascript)正確就可以。瀏覽器是通過(guò)script標(biāo)簽上的type屬性來(lái)識(shí)別模塊腳本的，而不是后綴名。
所以無(wú)論使用 .js還是 .mjs都是可以的。但是我們還是建議使用 .mjs，原因有兩個(gè)：
在開(kāi)發(fā)的時(shí)候，可以不需要看代碼，通過(guò)后綴名非常直觀地看出哪些是模塊腳本。
nodejs中，ES6的模塊化特性仍在實(shí)驗(yàn)性階段，而該特性只支持 .mjs后綴的腳本。
模塊資源標(biāo)識(shí)符 - module specifier在import一個(gè)模塊時(shí)，后面的相對(duì)或絕對(duì)路徑字符串稱(chēng)為module specifier或import specifier，也就是模塊資源路徑。
import {shout} from "./lib.mjs";// ^^^^^^^^^^^
瀏覽器對(duì)于模塊資源路徑做了一些限制。不支持類(lèi)似下面這種只有模塊名或部分文件名的資源路徑（稱(chēng)之為bare module specifiers）。這樣的限制是為了以后瀏覽器在支持自定義模塊加載器之后，加載器能夠自行決定bare module specifiers的解析方式。
// Not supported (yet):import {shout} from "jquery";import {shout} from "lib.mjs";import {shout} from "modules/lib.mjs";
目前，模塊資源路徑必須是完整的URL，或者以 /, ./, ../開(kāi)頭的相對(duì)URL
// Supported:import {shout} from "./lib.mjs";import {shout} from "../lib.mjs";import {shout} from "/modules/lib.mjs";import {shout} from "https://simple.example/modules/lib.mjs";
模塊script默認(rèn)是defer
傳統(tǒng)腳本的加載和解析會(huì)阻塞html的解析，可以通過(guò)添加 defer屬性解決（讓腳本加載和html解析并行）
但這里想告訴你的是，模塊腳本默認(rèn)具備defer的并行功能，因此無(wú)需畫(huà)蛇添足加上defer屬性。還有不僅僅只有主模塊與html解析并行，其他子模塊也一樣。
JS模塊化的其他特性 動(dòng)態(tài)引入： import()我們之前僅僅用到了靜態(tài)的 import，它需要在首屏就把全部模塊資源都下載下來(lái)。但有時(shí)候按需加載或異步加載會(huì)更為合理，這有助于提高首次加載時(shí)間，而 import()可以用來(lái)解決這個(gè)問(wèn)題。
不像靜態(tài) import只能用在
其中一個(gè)原因是 import/ export語(yǔ)法是可以靜態(tài)分析的，因此打包工具在打包過(guò)程中就可以進(jìn)行靜態(tài)分析并移除冗余未使用的模塊。從這可以看出，靜態(tài)的 import/ export不僅僅只是語(yǔ)法特性，還具備關(guān)鍵的工具屬性（可靜態(tài)分析）！
我們的總體建議是繼續(xù)使用打包工具進(jìn)行上線前的模塊打包處理。畢竟從某種程度上，打包可以幫助你盡可能減少代碼體積，用戶(hù)不必要加載無(wú)用的腳本，更有利于頁(yè)面性能。
開(kāi)發(fā)者工具的代碼覆蓋率檢查能幫助你檢測(cè)源碼中是否存在無(wú)用代碼。我們同時(shí)也建議通過(guò)代碼分割對(duì)模塊進(jìn)行合理拆分，以及延遲加載非首屏關(guān)鍵路徑的腳本。
打包與使用模塊腳本的權(quán)衡取舍
通常在web開(kāi)發(fā)領(lǐng)域，所有方案都有利弊，需要權(quán)衡取舍。與加載一個(gè)未經(jīng)過(guò)代碼拆分的打包腳本相比，使用模塊腳本也許會(huì)降低首次加載性能（cold cache），但是可以提升用戶(hù)再次加載（warm cache）的速度。比如對(duì)于總大小200KB的代碼，在修改一個(gè)細(xì)顆?；哪K之后，那么用戶(hù)只需要更新有變更的代碼，這總比重新加載所有代碼（打包腳本）要強(qiáng)。
如果相對(duì)于首次訪問(wèn)體驗(yàn)來(lái)說(shuō)，你更關(guān)注用戶(hù)再次訪問(wèn)體驗(yàn)，并且你的應(yīng)用不超過(guò)數(shù)百個(gè)細(xì)顆?；K的話，你不妨嘗試下使用模塊腳本，通過(guò)性能數(shù)據(jù)對(duì)比之后再做出最后的選擇。
瀏覽器工程師們正努力提升模塊腳本的性能，我們希望模塊腳本以后能夠適用于更多的應(yīng)用場(chǎng)景。
使用細(xì)顆?；哪K盡可能讓你的代碼以細(xì)顆?；哪K進(jìn)行組織。當(dāng)在開(kāi)發(fā)時(shí)，每個(gè)模塊最好不要輸出過(guò)多的內(nèi)容。
下面的 ./util.mjs模塊，輸出了 drop pluck和 zip三個(gè)函數(shù)。
export function drop() { /* … */ }export function pluck() { /* … */ }export function zip() { /* … */ }
如果你的代碼僅僅只需要 pluck，你也許會(huì)這樣引入：
import { pluck } from "./util.mjs";
在這種情況下，如果沒(méi)有構(gòu)建打包編譯，瀏覽器會(huì)還是會(huì)下載、解析和編譯整個(gè) ./util.js模塊，即使只僅僅需要其中一個(gè)export。
如果 pluck不與 drop和 zip有引用或依賴(lài)關(guān)系的話，最好還是將它獨(dú)立成一個(gè)模塊 ./pluck.mjs。以達(dá)到無(wú)需加載其他無(wú)用函數(shù)的目的。
export function pluck() { /* … */ }
這不僅能夠讓你的源碼簡(jiǎn)潔，還能夠減少對(duì)打包工具（移除冗余代碼）的依賴(lài)。如果在你的應(yīng)用中其中一個(gè)模塊從未被 import過(guò)，那么瀏覽器就不會(huì)去下載。而那些真正有用的模塊則會(huì)被瀏覽器緩存起來(lái)。
此外，使用細(xì)顆粒化的模塊也有助于對(duì)接未來(lái)的瀏覽器原生打包功能。
預(yù)加載模塊通過(guò)
這對(duì)于有復(fù)雜依賴(lài)關(guān)系模塊的應(yīng)用尤為重要。沒(méi)有 rel="modulepreload"，瀏覽器需要發(fā)出多個(gè)HTTP請(qǐng)求來(lái)計(jì)算出整個(gè)依賴(lài)關(guān)系。而如果你把所有依賴(lài)模塊通過(guò) rel="modulepreload"提前告訴瀏覽器，那么瀏覽器則無(wú)需再漸進(jìn)式地去計(jì)算。
采用HTTP/2協(xié)議HTTP/2支持多路復(fù)用，多個(gè)請(qǐng)求及響應(yīng)信息可以同時(shí)進(jìn)行傳輸，這有助于提高模塊樹(shù)的加載效率。
Chrome團(tuán)隊(duì)還預(yù)研了服務(wù)器推送——另一個(gè)HTTP/2特性，是否能夠作為部署高度模塊化應(yīng)用的一個(gè)可行方案。但結(jié)局令人失望，HTTP/2的服務(wù)器推送比想象中要難以應(yīng)用，并且web服務(wù)器及瀏覽器的對(duì)其實(shí)現(xiàn)目前并沒(méi)有針對(duì)高度模塊化web應(yīng)用進(jìn)行優(yōu)化。另一方面，服務(wù)器很難只推送未被緩存的資源。如果通過(guò)告知服務(wù)器完整的用戶(hù)緩存狀態(tài)來(lái)解決這個(gè)問(wèn)題的話，又存在隱私泄露風(fēng)險(xiǎn)。
無(wú)論如何，采用HTTP/2協(xié)議吧！只要記住目前HTTP/2的服務(wù)器推送目前還不能作為一個(gè)好的解決方案。
目前的使用率JS modules正在緩慢地被接納使用。我們的使用統(tǒng)計(jì)顯示只有0.08%（不包括動(dòng)態(tài) import()或者worklets）的頁(yè)面目前使用了
這個(gè)模塊腳本引入了 virtual-scrollerAPI，如果瀏覽器支持則會(huì)直接讀取內(nèi)置layered APIs集合（std:virtual-scroller），反之則網(wǎng)絡(luò)加載對(duì)應(yīng)的polyfill。
譯者：對(duì)于Layered APIs更多的中文介紹 https://zhuanlan.zhihu.com/p/...
此文已由騰訊云+社區(qū)在各渠道發(fā)布
獲取更多新鮮技術(shù)干貨，可以關(guān)注我們騰訊云技術(shù)社區(qū)-云加社區(qū)官方號(hào)及知乎機(jī)構(gòu)號(hào)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102664.html
摘要：頁(yè)面搭建需要準(zhǔn)備什么工具首先我們會(huì)和設(shè)計(jì)師溝通我們需要一些檢驗(yàn)設(shè)計(jì)的工具自動(dòng)裁圖自動(dòng)測(cè)量工具我這里安利一下一個(gè)工具我用的可以使用阿里的工具拿到界面不要急著做看看有什么問(wèn)題有些我都會(huì)問(wèn)端問(wèn)題如果要兼容我要考慮成本如果是一個(gè)人辦可能會(huì)出現(xiàn)時(shí)間的 web頁(yè)面搭建需要準(zhǔn)備什么工具 首先我們會(huì)和設(shè)計(jì)師溝通 我們需要一些檢驗(yàn)設(shè)計(jì)的工具 ps 自動(dòng)裁圖 自動(dòng)測(cè)量工具 （我這里安利一下一個(gè)工具 我用...
摘要：頁(yè)面搭建需要準(zhǔn)備什么工具首先我們會(huì)和設(shè)計(jì)師溝通我們需要一些檢驗(yàn)設(shè)計(jì)的工具自動(dòng)裁圖自動(dòng)測(cè)量工具我這里安利一下一個(gè)工具我用的可以使用阿里的工具拿到界面不要急著做看看有什么問(wèn)題有些我都會(huì)問(wèn)端問(wèn)題如果要兼容我要考慮成本如果是一個(gè)人辦可能會(huì)出現(xiàn)時(shí)間的 web頁(yè)面搭建需要準(zhǔn)備什么工具 首先我們會(huì)和設(shè)計(jì)師溝通 我們需要一些檢驗(yàn)設(shè)計(jì)的工具 ps 自動(dòng)裁圖 自動(dòng)測(cè)量工具 （我這里安利一下一個(gè)工具 我用...
摘要：頁(yè)面搭建需要準(zhǔn)備什么工具首先我們會(huì)和設(shè)計(jì)師溝通我們需要一些檢驗(yàn)設(shè)計(jì)的工具自動(dòng)裁圖自動(dòng)測(cè)量工具我這里安利一下一個(gè)工具我用的可以使用阿里的工具拿到界面不要急著做看看有什么問(wèn)題有些我都會(huì)問(wèn)端問(wèn)題如果要兼容我要考慮成本如果是一個(gè)人辦可能會(huì)出現(xiàn)時(shí)間的 web頁(yè)面搭建需要準(zhǔn)備什么工具 首先我們會(huì)和設(shè)計(jì)師溝通 我們需要一些檢驗(yàn)設(shè)計(jì)的工具 ps 自動(dòng)裁圖 自動(dòng)測(cè)量工具 （我這里安利一下一個(gè)工具 我用...
摘要：感謝使用框架本文檔涵蓋構(gòu)建應(yīng)用所需的基礎(chǔ)知識(shí)。用于數(shù)據(jù)校驗(yàn)的組件及相關(guān)文件在此目錄進(jìn)行管理。除了自定義中間件外，還是用了諸多第三方的中間件，它們是五測(cè)試我們使用組件對(duì)服務(wù)端代碼進(jìn)行測(cè)試。識(shí)別當(dāng)前導(dǎo)航從已有導(dǎo)航中刪除給定標(biāo)識(shí)的導(dǎo)航配置。 本文同步至個(gè)人博客 MEAN.js 文檔，轉(zhuǎn)載請(qǐng)注明出處。 Overview 感謝使用 MEAN.js 框架！ 本文檔涵蓋構(gòu)建 MEAN 應(yīng)用所需的基礎(chǔ)...
摘要：接下來(lái)安裝和，執(zhí)行命令安裝很順利，沒(méi)有遇到任何問(wèn)題。再總結(jié)一下我們遇到的坑初始化時(shí)的項(xiàng)目名稱(chēng)要合規(guī)，特別是不能出現(xiàn)中劃線下劃線。另外再增加，這樣刷新的速度會(huì)大大加快最終的文件目錄結(jié)構(gòu)為各文件的最終內(nèi)容本文也同步發(fā)表在我的公眾號(hào)“我的天空” 從零開(kāi)始，用最少的配置、最少的代碼、最少的依賴(lài)來(lái)搭建一個(gè)最簡(jiǎn)單的webpack+react環(huán)境。 最近在玩webpack+rea...
閱讀 2082·2019-08-30 15:52
閱讀 3064·2019-08-29 16:09
閱讀 1384·2019-08-28 18:30
閱讀 2519·2019-08-26 12:24
閱讀 1164·2019-08-26 12:12
閱讀 2325·2019-08-26 10:45
閱讀 630·2019-08-23 17:52
閱讀 970·2019-08-23 16:03
