開(kāi)發環境 vs. 生産環境
在開(kāi)發過程中,Vue 提供了(le)許多功能(néng)來(lái)提升開(kāi)發體驗:
對(duì)常見錯誤和(hé)隐患的警告
對(duì)組件 props / 自(zì)定義事(shì)件的校驗
響應性調試鈎子
開(kāi)發工(gōng)具集成
然而,這(zhè)些(xiē)功能(néng)在生産環境中并不會(huì)被使用(yòng),一些(xiē)警告檢查也(yě)會(huì)産生少量的性能(néng)開(kāi)銷。當部署到(dào)生産環境中時(shí),我們應該移除所有未使用(yòng)的、僅用(yòng)于開(kāi)發環境的代碼分支,來(lái)獲得更小(xiǎo)的包體積和(hé)更好(hǎo)的性能(néng)。
不使用(yòng)構建工(gōng)具
如果你(nǐ)沒有使用(yòng)任何構建工(gōng)具,而是從(cóng) CDN 或其他(tā)源來(lái)加載 Vue,請(qǐng)确保在部署時(shí)使用(yòng)的是生産環境版本(以 .prod.js 結尾的構建文(wén)件)。生産環境版本會(huì)被最小(xiǎo)化,并移除了(le)所有僅用(yòng)于開(kāi)發環境的代碼分支。
如果需要使用(yòng)全局變量版本(通過 Vue 全局變量訪問):請(qǐng)使用(yòng) vue.global.prod.js。
如果需要 ESM 版本(通過原生 ESM 導入訪問):請(qǐng)使用(yòng) vue.esm-browser.prod.js。
更多細節請(qǐng)參考構建文(wén)件指南。
使用(yòng)構建工(gōng)具
通過 create-vue(基于 Vite)或是 Vue CLI(基于 webpack)搭建的項目都已經預先做好(hǎo)了(le)針對(duì)生産環境的配置。
如果使用(yòng)了(le)自(zì)定義的構建,請(qǐng)确保:
vue 被解析爲 vue.runtime.esm-bundler.js。
編譯時(shí)功能(néng)标記已被正确配置。
process.env.NODE_ENV 會(huì)在構建時(shí)被替換爲 "production"。
其他(tā)參考:
Vite 生産環境指南
Vite 部署指南
Vue CLI 部署指南
追蹤運行時(shí)錯誤
應用(yòng)級錯誤處理(lǐ) 可以用(yòng)來(lái)向追蹤服務報(bào)告錯誤:
js
import { createApp } from 'vue'
const app = createApp(...)
app.config.errorHandler = (err, instance, info) => {
// 向追蹤服務報(bào)告錯誤
}
諸如 Sentry 和(hé) Bugsnag 等服務也(yě)爲 Vue 提供了(le)官方集成。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發