browserslist

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

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

Polyfill

useBuiltIns: 'usage'

一個默認的 Vue CLI 項目會使用 @vue/babel-preset-app，它通過 @babel/preset-env 和 browserslist 配置來決定項目需要的 polyfill。

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

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

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

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

構建庫或是 Web Component 時的 Polyfills

當使用 Vue CLI 來構建一個庫或是 Web Component 時，推薦給 @vue/babel-preset-app 傳入 useBuiltIns: false 選項。這能夠確保你的庫或是組件不包含不必要的 polyfills。通常來說，打包 polyfills 應當是最終使用你的庫的應用的責任。

現(xiàn)代模式

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

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

vue-cli-service build --modern

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

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

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

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

提示

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

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

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