Vue CLI 瀏覽器兼容性

browserslist

你會(huì)發(fā)現(xiàn)有 package.json 文件里的 browserslist 字段 (或一個(gè)單獨(dú)的 .browserslistrc 文件)，指定了項(xiàng)目的目標(biāo)瀏覽器的范圍。這個(gè)值會(huì)被 @babel/preset-env 和 Autoprefixer 用來確定需要轉(zhuǎn)譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。

現(xiàn)在查閱這里了解如何指定瀏覽器范圍。

Polyfill

useBuiltIns: 'usage'

一個(gè)默認(rèn)的 Vue CLI 項(xiàng)目會(huì)使用 @vue/babel-preset-app，它通過 @babel/preset-env 和 browserslist 配置來決定項(xiàng)目需要的 polyfill。

默認(rèn)情況下，它會(huì)把 useBuiltIns: 'usage' 傳遞給 @babel/preset-env，這樣它會(huì)根據(jù)源代碼中出現(xiàn)的語(yǔ)言特性自動(dòng)檢測(cè)需要的 polyfill。這確保了最終包里 polyfill 數(shù)量的最小化。然而，這也意味著如果其中一個(gè)依賴需要特殊的 polyfill，默認(rèn)情況下 Babel 無法將其檢測(cè)出來。

如果有依賴需要 polyfill，你有幾種選擇：

1. 如果該依賴基于一個(gè)目標(biāo)環(huán)境不支持的 ES 版本撰寫: 將其添加到 vue.config.js 中的 transpileDependencies 選項(xiàng)。這會(huì)為該依賴同時(shí)開啟語(yǔ)法轉(zhuǎn)換和根據(jù)使用情況檢測(cè) polyfill。
2. 如果該依賴交付了 ES5 代碼并顯式地列出了需要的 polyfill: 你可以使用 @vue/babel-preset-app 的 polyfills 選項(xiàng)預(yù)包含所需要的 polyfill。注意 es6.promise 將被默認(rèn)包含，因?yàn)楝F(xiàn)在的庫(kù)依賴 Promise 是非常普遍的。// babel.config.js module.exports = { presets: [ ['@vue/app', { polyfills: [ 'es6.promise', 'es6.symbol' ] }] ] } 提示我們推薦以這種方式添加 polyfill 而不是在源代碼中直接導(dǎo)入它們，因?yàn)槿绻@里列出的 polyfill 在 browserslist 的目標(biāo)中不需要，則它會(huì)被自動(dòng)排除。
3. 如果該依賴交付 ES5 代碼，但使用了 ES6+ 特性且沒有顯式地列出需要的 polyfill (例如 Vuetify)：請(qǐng)使用 useBuiltIns: 'entry' 然后在入口文件添加 import 'core-js/stable'; import 'regenerator-runtime/runtime';。這會(huì)根據(jù) browserslist 目標(biāo)導(dǎo)入所有 polyfill，這樣你就不用再擔(dān)心依賴的 polyfill 問題了，但是因?yàn)榘艘恍]有用到的 polyfill 所以最終的包大小可能會(huì)增加。

更多細(xì)節(jié)可查閱 @babel-preset/env 文檔。

構(gòu)建庫(kù)或是 Web Component 時(shí)的 Polyfills

當(dāng)使用 Vue CLI 來構(gòu)建一個(gè)庫(kù)或是 Web Component 時(shí)，推薦給 @vue/babel-preset-app 傳入 useBuiltIns: false 選項(xiàng)。這能夠確保你的庫(kù)或是組件不包含不必要的 polyfills。通常來說，打包 polyfills 應(yīng)當(dāng)是最終使用你的庫(kù)的應(yīng)用的責(zé)任。

現(xiàn)代模式

有了 Babel 我們可以兼顧所有最新的 ES2015+ 語(yǔ)言特性，但也意味著我們需要交付轉(zhuǎn)譯和 polyfill 后的包以支持舊瀏覽器。這些轉(zhuǎn)譯后的包通常都比原生的 ES2015+ 代碼會(huì)更冗長(zhǎng)，運(yùn)行更慢?，F(xiàn)如今絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了原生的 ES2015，所以因?yàn)橐С指系臑g覽器而為它們交付笨重的代碼是一種浪費(fèi)。

Vue CLI 提供了一個(gè)“現(xiàn)代模式”幫你解決這個(gè)問題。以如下命令為生產(chǎn)環(huán)境構(gòu)建：

vue-cli-service build --modern

Vue CLI 會(huì)產(chǎn)生兩個(gè)應(yīng)用的版本：一個(gè)現(xiàn)代版的包，面向支持 ES modules 的現(xiàn)代瀏覽器，另一個(gè)舊版的包，面向不支持的舊瀏覽器。

最酷的是這里沒有特殊的部署要求。其生成的 HTML 文件會(huì)自動(dòng)使用 Phillip Walton 精彩的博文中討論到的技術(shù)：

• 現(xiàn)代版的包會(huì)通過 <script type="module"> 在被支持的瀏覽器中加載；它們還會(huì)使用 <link rel="modulepreload"> 進(jìn)行預(yù)加載。
• 舊版的包會(huì)通過 <script nomodule> 加載，并會(huì)被支持 ES modules 的瀏覽器忽略。
• 一個(gè)針對(duì) Safari 10 中 <script nomodule> 的修復(fù)會(huì)被自動(dòng)注入。

對(duì)于一個(gè) Hello World 應(yīng)用來說，現(xiàn)代版的包已經(jīng)小了 16%。在生產(chǎn)環(huán)境下，現(xiàn)代版的包通常都會(huì)表現(xiàn)出顯著的解析速度和運(yùn)算速度，從而改善應(yīng)用的加載性能。

提示

<script type="module"> 需要配合始終開啟的 CORS 進(jìn)行加載。這意味著你的服務(wù)器必須返回諸如 Access-Control-Allow-Origin: * 的有效的 CORS 頭。如果你想要通過認(rèn)證來獲取腳本，可使將 crossorigin 選項(xiàng)設(shè)置為 use-credentials。

同時(shí)，現(xiàn)代瀏覽器使用一段內(nèi)聯(lián)腳本來避免 Safari 10 重復(fù)加載腳本包，所以如果你在使用一套嚴(yán)格的 CSP，你需要這樣顯性地允許內(nèi)聯(lián)腳本：

Content-Security-Policy: script-src 'self' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMB