目性能優(yōu)化實(shí)戰(zhàn)：從代碼到部署的全鏈路指南)
1. 項(xiàng)目概述為什么Vue項(xiàng)目需要持續(xù)優(yōu)化接手一個(gè)Vue項(xiàng)目從零到一搭建時(shí)我們往往更關(guān)注功能的快速實(shí)現(xiàn)。但當(dāng)項(xiàng)目迭代到一定階段特別是頁(yè)面數(shù)量突破幾十個(gè)、組件庫(kù)變得龐大、依賴包越來越多時(shí)你可能會(huì)發(fā)現(xiàn)首次打開頁(yè)面要等上好幾秒操作稍微復(fù)雜點(diǎn)的表單就感覺卡頓打包出來的dist文件夾大得驚人。這時(shí)候優(yōu)化就不再是“可選項(xiàng)”而是“必選項(xiàng)”。我經(jīng)歷過不少?gòu)摹澳苡谩钡健昂糜谩痹俚健敖z滑”的項(xiàng)目改造過程。Vue項(xiàng)目的優(yōu)化本質(zhì)上是一場(chǎng)與瀏覽器性能、網(wǎng)絡(luò)傳輸、代碼質(zhì)量和開發(fā)體驗(yàn)的持續(xù)博弈。它不是為了炫技而是為了實(shí)實(shí)在在提升用戶體驗(yàn)降低服務(wù)器帶寬成本以及讓后續(xù)的開發(fā)和維護(hù)更順暢。一個(gè)優(yōu)化良好的Vue應(yīng)用應(yīng)該做到首屏秒開、交互流暢、打包高效。網(wǎng)上關(guān)于Vue優(yōu)化的文章很多但往往比較零散或者只講理論缺乏實(shí)操細(xì)節(jié)。今天我就結(jié)合自己踩過的坑和總結(jié)的經(jīng)驗(yàn)系統(tǒng)性地梳理幾種最常用、最有效的Vue項(xiàng)目?jī)?yōu)化方法。這些方法覆蓋了從代碼編寫、構(gòu)建配置到運(yùn)行時(shí)性能的多個(gè)層面無論你是維護(hù)一個(gè)歷史包袱沉重的老項(xiàng)目還是正在開啟一個(gè)對(duì)性能有要求的新項(xiàng)目都能找到可以直接“抄作業(yè)”的方案。2. 代碼層面的優(yōu)化從源頭控制體積與性能代碼是性能的基石。在編寫Vue組件時(shí)養(yǎng)成一些好習(xí)慣往往能事半功倍避免后期大規(guī)模的返工。2.1 組件懶加載按需加載加速首屏這是提升大型應(yīng)用首屏速度最立竿見影的方法。Vue Router 天然支持基于動(dòng)態(tài)import()的懶加載。為什么有效傳統(tǒng)的打包方式會(huì)把所有路由對(duì)應(yīng)的組件代碼都打包進(jìn)同一個(gè)巨大的JavaScript文件中。用戶訪問首頁(yè)時(shí)不得不下載整個(gè)應(yīng)用的代碼其中大部分他暫時(shí)用不到。懶加載則將每個(gè)路由組件單獨(dú)打包成獨(dú)立的塊chunk只有當(dāng)用戶訪問該路由時(shí)對(duì)應(yīng)的JavaScript文件才會(huì)被下載和執(zhí)行。具體操作在路由配置文件中將靜態(tài)導(dǎo)入改為動(dòng)態(tài)導(dǎo)入。// 靜態(tài)導(dǎo)入不推薦用于大型項(xiàng)目 import Home from /views/Home.vue import About from /views/About.vue const routes [ { path: /, component: Home }, { path: /about, component: About } ] // 動(dòng)態(tài)導(dǎo)入懶加載推薦 const routes [ { path: /, // 使用 () import(...) 語法 component: () import(/views/Home.vue) }, { path: /about, component: () import(/views/About.vue), // 還可以為這個(gè)chunk命名便于在打包分析時(shí)識(shí)別 meta: { chunkName: about } } ]實(shí)操心得與避坑命名ChunkWebpack在打包懶加載組件時(shí)默認(rèn)會(huì)生成0.js1.js這樣的文件名不利于調(diào)試和長(zhǎng)期緩存?？梢酝ㄟ^/* webpackChunkName: “about” */魔法注釋來指定chunk名稱。component: () import(/* webpackChunkName: “about” */ ‘/views/About.vue’)預(yù)加載/預(yù)獲取對(duì)于用戶接下來很可能訪問的頁(yè)面比如首頁(yè)的主要功能入口可以使用webpackPrefetch。瀏覽器會(huì)在空閑時(shí)間提前加載這些資源當(dāng)用戶點(diǎn)擊時(shí)體驗(yàn)就像瞬間打開一樣。component: () import(/* webpackChunkName: “dashboard”, webpackPrefetch: true */ ‘/views/Dashboard.vue’)不要過度拆分對(duì)于極小的組件比如一個(gè)按鈕、一個(gè)彈窗單獨(dú)懶加載可能得不償失因?yàn)镠TTP請(qǐng)求本身也有開銷。通常建議對(duì)路由級(jí)組件和非常大的非路由組件進(jìn)行懶加載。2.2 第三方庫(kù)的按需引入與CDN引入項(xiàng)目中經(jīng)常會(huì)用到Element Plus、Lodash、Moment.js這類第三方庫(kù)。全量引入會(huì)顯著增加打包體積。按需引入以Element Plus和Lodash為例Element Plus: 務(wù)必使用官方推薦的自動(dòng)導(dǎo)入插件unplugin-vue-components,unplugin-auto-import。你只需要在代碼中直接使用組件插件會(huì)在構(gòu)建時(shí)自動(dòng)幫你引入對(duì)應(yīng)的樣式和組件代碼真正做到“用多少打包多少”。Lodash: 避免import _ from ‘lodash’。應(yīng)該使用import debounce from ‘lodash/debounce’或import { debounce } from ‘lodash-es’后者是ES模塊版本支持Tree Shaking。CDN引入對(duì)于一些體積巨大、更新不頻繁的庫(kù)如Vue本身、Vue Router、Axios可以考慮通過CDN引入利用公共CDN的緩存優(yōu)勢(shì)。操作步驟在index.html中通過script和link標(biāo)簽引入CDN資源。!DOCTYPE html html lang“en” head link href“https://cdn.jsdelivr.net/npm/element-plus2.x/dist/index.css” rel“stylesheet” /head body div id“app”/div script src“https://cdn.jsdelivr.net/npm/vue3.x/dist/vue.global.prod.js”/script script src“https://cdn.jsdelivr.net/npm/vue-router4.x/dist/vue-router.global.prod.js”/script script src“https://cdn.jsdelivr.net/npm/axios1.x/dist/axios.min.js”/script script src“https://cdn.jsdelivr.net/npm/element-plus2.x/dist/index.full.js”/script !-- 你的應(yīng)用主腳本 -- /body /html在vue.config.js或vite.config.js中配置externals告訴打包工具這些模塊不需要打包。// vue.config.js (Webpack) module.exports { configureWebpack: { externals: { ‘vue’: ‘Vue’, ‘vue-router’: ‘VueRouter’, ‘a(chǎn)xios’: ‘a(chǎn)xios’, ‘element-plus’: ‘ElementPlus’ } } }// vite.config.js (Vite) import { defineConfig } from ‘vite’ export default defineConfig({ build: { rollupOptions: { external: [‘vue’, ‘vue-router’, ‘a(chǎn)xios’, ‘element-plus’], output: { globals: { vue: ‘Vue’, ‘vue-router’: ‘VueRouter’, axios: ‘a(chǎn)xios’, ‘element-plus’: ‘ElementPlus’ } } } } })注意使用CDN引入需要確保腳本加載順序正確Vue必須先于Vue Router等加載并且要處理好在非瀏覽器環(huán)境如SSR下的兼容性問題。對(duì)于內(nèi)部網(wǎng)絡(luò)或?qū)Ψ€(wěn)定性要求極高的項(xiàng)目建議使用自建CDN或謹(jǐn)慎評(píng)估。2.3 善用計(jì)算屬性與偵聽器避免不必要的渲染Vue的響應(yīng)式系統(tǒng)非常強(qiáng)大但濫用也會(huì)導(dǎo)致性能問題。一個(gè)常見的誤區(qū)是在模板中直接使用復(fù)雜表達(dá)式或方法調(diào)用。反面例子template div {{ expensiveCalculation() }} !-- 每次渲染都會(huì)執(zhí)行 -- span v-for“item in filterList()” :key“item.id”{{ item.name }}/span !-- 每次渲染都會(huì)執(zhí)行 -- /div /template script export default { data() { return { list: […] } }, methods: { expensiveCalculation() { /* 耗時(shí)計(jì)算 */ }, filterList() { return this.list.filter(…) } } } /script優(yōu)化方案使用計(jì)算屬性 (computed)計(jì)算屬性基于它們的響應(yīng)式依賴進(jìn)行緩存只在相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。上述例子應(yīng)改為template div {{ computedResult }} span v-for“item in filteredList” :key“item.id”{{ item.name }}/span /div /template script export default { data() { return { list: […] } }, computed: { computedResult() { /* 耗時(shí)計(jì)算依賴變化時(shí)才重新計(jì)算 */ return … }, filteredList() { return this.list.filter(…) } } } /script謹(jǐn)慎使用偵聽器 (watch)watch適用于在數(shù)據(jù)變化后執(zhí)行有副作用的操作如發(fā)起請(qǐng)求、操作DOM。對(duì)于單純的數(shù)據(jù)派生優(yōu)先使用computed。深度偵聽 (deep: true) 和立即執(zhí)行 (immediate: true) 會(huì)帶來額外的性能開銷只在必要時(shí)使用。2.4 列表渲染優(yōu)化key的作用與虛擬滾動(dòng)渲染長(zhǎng)列表是前端常見的性能瓶頸。務(wù)必提供唯一的keykey是Vue識(shí)別節(jié)點(diǎn)身份的唯一標(biāo)識(shí)。使用index作為key在列表順序變化時(shí)如排序、增刪會(huì)導(dǎo)致不必要的DOM操作和狀態(tài)錯(cuò)亂。必須使用數(shù)據(jù)中唯一且穩(wěn)定的字段如id。虛擬滾動(dòng)當(dāng)列表有成千上萬條數(shù)據(jù)時(shí)即使使用了key渲染所有DOM節(jié)點(diǎn)也會(huì)導(dǎo)致內(nèi)存占用過高和渲染卡頓。解決方案是虛擬滾動(dòng)只渲染可視區(qū)域內(nèi)的元素?？梢允褂贸墒斓膸?kù)如vue-virtual-scroller或element-plus的虛擬化表格組件。3. 構(gòu)建與打包優(yōu)化讓產(chǎn)物體積最小化代碼寫好了構(gòu)建打包是下一道關(guān)卡。這里的目標(biāo)是讓最終生成的靜態(tài)文件JS, CSS, 圖片盡可能小。3.1 依賴分析與可視化在優(yōu)化之前你必須知道“胖”在哪里。使用打包分析工具可以直觀地看到每個(gè)模塊的體積。Webpack項(xiàng)目使用webpack-bundle-analyzer。安裝npm install --save-dev webpack-bundle-analyzer在vue.config.js中配置const BundleAnalyzerPlugin require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin module.exports { configureWebpack: { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: ‘static’, // 生成靜態(tài)HTML報(bào)告 openAnalyzer: false, // 不自動(dòng)打開瀏覽器 }) ] } }運(yùn)行npm run build完成后會(huì)在dist目錄生成report.html用瀏覽器打開即可查看分析圖。Vite項(xiàng)目使用內(nèi)置的rollup-plugin-visualizer。安裝npm install --save-dev rollup-plugin-visualizer在vite.config.js中配置import { visualizer } from ‘rollup-plugin-visualizer’; export default defineConfig({ plugins: [vue(), visualizer({ open: false, // 構(gòu)建后自動(dòng)打開報(bào)告 filename: ‘stats.html’ })], });分析報(bào)告會(huì)清晰地展示哪些依賴包體積最大哪些模塊有重復(fù)為你后續(xù)的優(yōu)化提供明確方向。3.2 代碼壓縮與Tree Shaking現(xiàn)代打包工具Webpack 4 / Vite默認(rèn)都支持ES模塊和Tree Shaking。確保你的代碼和依賴庫(kù)是ES模塊格式以便打包工具能安全地移除未使用的代碼dead code。關(guān)鍵檢查點(diǎn)package.json中的sideEffects字段如果你的庫(kù)有副作用如引入CSS、polyfill需要正確配置此字段幫助打包工具判斷。對(duì)于應(yīng)用項(xiàng)目通常設(shè)為false或一個(gè)數(shù)組。{ “name”: “your-project”, “sideEffects”: false }生產(chǎn)模式構(gòu)建確保構(gòu)建命令是npm run build對(duì)應(yīng)vue-cli-service build或vite build它會(huì)自動(dòng)啟用代碼壓縮Terser和優(yōu)化。開發(fā)模式的構(gòu)建包是不壓縮的。3.3 圖片等靜態(tài)資源優(yōu)化圖片通常是體積的大頭。壓縮圖片在將圖片放入項(xiàng)目前使用工具如 TinyPNG、Squoosh進(jìn)行壓縮。對(duì)于圖標(biāo)優(yōu)先使用SVG格式它體積小且不失真。使用現(xiàn)代圖片格式在支持的情況下使用WebP格式替代PNG/JPG通常能減少30%-70%的體積。可以使用vue-cli的image-webpack-loader或Vite的vite-plugin-imagemin在構(gòu)建時(shí)自動(dòng)壓縮和轉(zhuǎn)換。小圖片轉(zhuǎn)Base64對(duì)于非常小的圖片如幾KB的圖標(biāo)可以將其轉(zhuǎn)換為Base64編碼內(nèi)嵌到CSS或JS中減少HTTP請(qǐng)求。Webpack的url-loaderVue CLI已內(nèi)置或Vite的默認(rèn)行為會(huì)自動(dòng)處理。配置合理的limit在vue.config.js中可以調(diào)整內(nèi)聯(lián)文件的體積閾值。module.exports { chainWebpack: config { config.module .rule(‘images’) .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use(‘url-loader’) .loader(‘url-loader’) .tap(options { options.limit 4096 // 小于4KB的文件轉(zhuǎn)為Base64 return options }) .end() } }3.4 拆分Chunk與長(zhǎng)效緩存合理的文件拆分策略不僅能減少首屏加載量還能利用瀏覽器緩存。分離第三方庫(kù)將node_modules中的代碼單獨(dú)打包成一個(gè)或多個(gè)chunk如vendor。因?yàn)樗鼈儾怀Ｗ儎?dòng)可以被瀏覽器長(zhǎng)期緩存。// vue.config.js module.exports { configureWebpack: { optimization: { splitChunks: { chunks: ‘a(chǎn)ll’, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { // 將第三方庫(kù)拆分得更細(xì)按包名組織 const packageName module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]; return vendor.${packageName.replace(‘’, ‘’)}; }, chunks: ‘a(chǎn)ll’ } } } } } }配置輸出文件的哈希名Webpack/Vite可以通過[contenthash]根據(jù)文件內(nèi)容生成哈希字符串。只有當(dāng)文件內(nèi)容變化時(shí)哈希才會(huì)變這樣就能確保用戶總能獲取到最新的文件同時(shí)最大化緩存命中率。// vue.config.js module.exports { configureWebpack: { output: { filename: ‘[name].[contenthash:8].js’, chunkFilename: ‘[name].[contenthash:8].js’ } } }4. 運(yùn)行時(shí)與部署優(yōu)化提升用戶體驗(yàn)的最后一公里即使代碼和打包都優(yōu)化了在瀏覽器中運(yùn)行時(shí)的表現(xiàn)也同樣重要。4.1 服務(wù)端渲染SSR與靜態(tài)站點(diǎn)生成SSG對(duì)于內(nèi)容主導(dǎo)型網(wǎng)站如博客、新聞、電商列表頁(yè)首屏加載時(shí)的白屏?xí)r間和SEO是核心痛點(diǎn)。Vue提供了服務(wù)端渲染SSR和靜態(tài)站點(diǎn)生成SSG兩種方案。SSR (Nuxt.js)在服務(wù)器端將Vue組件渲染成HTML字符串直接發(fā)送給瀏覽器。用戶能立即看到內(nèi)容然后Vue再在客戶端“激活”hydrate這些靜態(tài)HTML使其變成可交互的應(yīng)用。這極大地提升了首屏加載速度和SEO友好性。但SSR需要Node.js服務(wù)器增加了架構(gòu)復(fù)雜度和服務(wù)器負(fù)載。SSG (VitePress, Nuxt.js)在構(gòu)建階段就預(yù)渲染所有路由的靜態(tài)HTML。適合內(nèi)容變化不頻繁的網(wǎng)站。部署簡(jiǎn)單純靜態(tài)文件性能極佳SEO友好。是博客、文檔站點(diǎn)的首選。選擇SSR還是SSG取決于內(nèi)容的動(dòng)態(tài)程度和你的技術(shù)棧偏好。對(duì)于高度交互的管理后臺(tái)CSR客戶端渲染可能更簡(jiǎn)單對(duì)于營(yíng)銷頁(yè)面、博客SSG是更好的選擇。4.2 利用瀏覽器緩存策略正確的HTTP緩存頭可以避免重復(fù)下載未變化的資源。強(qiáng)緩存通過Cache-Control如max-age31536000告訴瀏覽器在一年內(nèi)直接使用本地緩存。適用于帶有哈希值的靜態(tài)資源/assets/logo.[contenthash].png。協(xié)商緩存通過Last-Modified/ETag和If-Modified-Since/If-None-Match請(qǐng)求頭讓服務(wù)器判斷資源是否過期。適用于HTML文件因?yàn)槠銾RL不變但內(nèi)容可能變。在Nginx中可以這樣配置location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 1y; # 設(shè)置一年過期時(shí)間 add_header Cache-Control “public, immutable”; } location / { try_files $uri $uri/ /index.html; # 用于Vue Router的history模式 # 對(duì)HTML文件不設(shè)置長(zhǎng)期緩存或設(shè)置較短的緩存時(shí)間 expires -1; }4.3 開啟Gzip/Brotli壓縮在服務(wù)器端對(duì)文本資源JS、CSS、HTML進(jìn)行壓縮通常能減少60%-80%的傳輸體積。Gzip最廣泛支持。Brotli比Gzip壓縮率更高現(xiàn)代瀏覽器都支持。在Nginx中開啟Gzip和Brotli# Gzip gzip on; gzip_vary on; gzip_min_length 1024; gzip_types text/plain text/css text/xml text/javascript application/javascript application/xmlrss application/json; # Brotli (需要安裝ngx_brotli模塊) brotli on; brotli_comp_level 6; brotli_types text/plain text/css text/xml text/javascript application/javascript application/xmlrss application/json;4.4 使用性能監(jiān)測(cè)工具APM優(yōu)化不是一勞永逸的需要持續(xù)監(jiān)控?？梢允褂们岸薃PM應(yīng)用性能管理工具如LighthouseChrome DevTools內(nèi)置可以本地運(yùn)行給出性能、可訪問性、SEO等方面的綜合評(píng)分和改進(jìn)建議。Web VitalsGoogle推出的核心用戶體驗(yàn)指標(biāo)包括LCP最大內(nèi)容繪制、FID首次輸入延遲、CLS累積布局偏移?？梢允褂脀eb-vitals庫(kù)在真實(shí)用戶環(huán)境中進(jìn)行測(cè)量和上報(bào)。Sentry / Fundebug錯(cuò)誤監(jiān)控工具也能捕獲性能相關(guān)的數(shù)據(jù)幫你發(fā)現(xiàn)導(dǎo)致頁(yè)面卡頓或崩潰的具體操作。將這些工具集成到你的開發(fā)流程和線上監(jiān)控中能讓你對(duì)應(yīng)用的性能表現(xiàn)心中有數(shù)并快速定位問題。5. 常見問題與排查技巧實(shí)錄在實(shí)際優(yōu)化過程中總會(huì)遇到一些意想不到的問題。這里記錄幾個(gè)我踩過的坑和解決方法。5.1 打包后文件體積依然很大問題按照上述方法優(yōu)化后vendor.js文件還是有好幾MB。排查運(yùn)行打包分析工具看體積最大的模塊是什么。檢查是否不小心全量引入了某個(gè)UI庫(kù)或工具庫(kù)如import ElementPlus from ‘element-plus’而未使用自動(dòng)導(dǎo)入。檢查是否有重復(fù)依賴。不同版本的同一個(gè)庫(kù)可能被打包多次。使用npm ls package-name或yarn why package-name查看依賴樹。檢查是否引入了未使用的Polyfill。通過browserslist配置在package.json或.browserslistrc文件中調(diào)整需要兼容的瀏覽器范圍避免為過于古老的瀏覽器生成兼容代碼。5.2 懶加載的組件加載過慢出現(xiàn)白屏問題點(diǎn)擊路由跳轉(zhuǎn)后頁(yè)面會(huì)白屏一小會(huì)兒才顯示。排查與解決網(wǎng)絡(luò)慢這是最常見的原因?？梢蕴砑右粋€(gè)加載中的狀態(tài)Loading Component提升用戶體驗(yàn)。許多UI庫(kù)都提供了骨架屏Skeleton組件在內(nèi)容加載前展示比單純的旋轉(zhuǎn)圖標(biāo)體驗(yàn)更好。組件本身太大即使被懶加載如果單個(gè)組件文件依然很大比如包含了一個(gè)巨大的圖表庫(kù)加載時(shí)間也會(huì)很長(zhǎng)?？紤]對(duì)該組件內(nèi)部再進(jìn)行更細(xì)粒度的拆分或者對(duì)重型庫(kù)使用CDN。預(yù)加載策略如前所述對(duì)高概率訪問的路由使用webpackPrefetch。5.3 內(nèi)存泄漏導(dǎo)致頁(yè)面越來越卡問題在單頁(yè)面應(yīng)用中長(zhǎng)期使用后頁(yè)面響應(yīng)變慢甚至崩潰。排查全局事件監(jiān)聽未移除在組件mounted中使用了window.addEventListener必須在beforeUnmount或unmounted生命周期中用removeEventListener移除。定時(shí)器未清理setInterval或setTimeout同理需要在組件銷毀前用clearInterval/clearTimeout清理。第三方庫(kù)實(shí)例未銷毀例如ECharts圖表、地圖實(shí)例等它們可能持有對(duì)DOM的引用。確保在組件銷毀時(shí)調(diào)用其dispose或類似方法。閉包引用被閉包引用的變量可能無法被垃圾回收。檢查在異步回調(diào)、事件處理函數(shù)中是否引用了不必要的組件實(shí)例或大對(duì)象?？梢允褂肅hrome DevTools的Memory面板和Performance面板錄制內(nèi)存快照和時(shí)間線觀察內(nèi)存占用是否持續(xù)增長(zhǎng)并定位到具體的泄漏點(diǎn)。5.4 部署后資源加載404問題本地開發(fā)正常部署到服務(wù)器后JS、CSS文件加載失敗。排查路徑問題如果應(yīng)用部署在子路徑如https://example.com/my-app/需要在Vue Router中設(shè)置base選項(xiàng)在Vite/Webpack配置中設(shè)置publicPath。// vue.config.js module.exports { publicPath: process.env.NODE_ENV ‘production’ ? ‘/my-app/’ : ‘/’, }// router/index.js const router createRouter({ history: createWebHistory(‘/my-app/’), // 或 createWebHashHistory() routes, })服務(wù)器配置對(duì)于History模式需要配置服務(wù)器將所有非靜態(tài)文件請(qǐng)求重定向到index.html參見前面Nginx配置示例。緩存問題可能是瀏覽器或CDN緩存了舊版本的文件。確保構(gòu)建輸出的文件名使用了[contenthash]并檢查服務(wù)器緩存配置是否正確。優(yōu)化是一個(gè)持續(xù)的過程沒有銀彈。最好的策略是在項(xiàng)目初期就建立良好的開發(fā)規(guī)范如按需引入、組件懶加載在開發(fā)過程中定期使用分析工具進(jìn)行檢查在上線前進(jìn)行性能測(cè)試并在線上持續(xù)監(jiān)控。把這些方法融入到你的開發(fā)流程里就能持續(xù)交付高性能的Vue應(yīng)用。 Vue項(xiàng)目性能優(yōu)化實(shí)戰(zhàn)：從代碼到部署的全鏈路指南
1. 項(xiàng)目概述為什么Vue項(xiàng)目需要持續(xù)優(yōu)化接手一個(gè)Vue項(xiàng)目從零到一搭建時(shí)我們往往更關(guān)注功能的快速實(shí)現(xiàn)。但當(dāng)項(xiàng)目迭代到一定階段特別是頁(yè)面數(shù)量突破幾十個(gè)、組件庫(kù)變得龐大、依賴包越來越多時(shí)你可能會(huì)發(fā)現(xiàn)首次打開頁(yè)面要等上好幾秒操作稍微復(fù)雜點(diǎn)的表單就感覺卡頓打包出來的dist文件夾大得驚人。這時(shí)候優(yōu)化就不再是“可選項(xiàng)”而是“必選項(xiàng)”。我經(jīng)歷過不少?gòu)摹澳苡谩钡健昂糜谩痹俚健敖z滑”的項(xiàng)目改造過程。Vue項(xiàng)目的優(yōu)化本質(zhì)上是一場(chǎng)與瀏覽器性能、網(wǎng)絡(luò)傳輸、代碼質(zhì)量和開發(fā)體驗(yàn)的持續(xù)博弈。它不是為了炫技而是為了實(shí)實(shí)在在提升用戶體驗(yàn)降低服務(wù)器帶寬成本以及讓后續(xù)的開發(fā)和維護(hù)更順暢。一個(gè)優(yōu)化良好的Vue應(yīng)用應(yīng)該做到首屏秒開、交互流暢、打包高效。網(wǎng)上關(guān)于Vue優(yōu)化的文章很多但往往比較零散或者只講理論缺乏實(shí)操細(xì)節(jié)。今天我就結(jié)合自己踩過的坑和總結(jié)的經(jīng)驗(yàn)系統(tǒng)性地梳理幾種最常用、最有效的Vue項(xiàng)目?jī)?yōu)化方法。這些方法覆蓋了從代碼編寫、構(gòu)建配置到運(yùn)行時(shí)性能的多個(gè)層面無論你是維護(hù)一個(gè)歷史包袱沉重的老項(xiàng)目還是正在開啟一個(gè)對(duì)性能有要求的新項(xiàng)目都能找到可以直接“抄作業(yè)”的方案。2. 代碼層面的優(yōu)化從源頭控制體積與性能代碼是性能的基石。在編寫Vue組件時(shí)養(yǎng)成一些好習(xí)慣往往能事半功倍避免后期大規(guī)模的返工。2.1 組件懶加載按需加載加速首屏這是提升大型應(yīng)用首屏速度最立竿見影的方法。Vue Router 天然支持基于動(dòng)態(tài)import()的懶加載。為什么有效傳統(tǒng)的打包方式會(huì)把所有路由對(duì)應(yīng)的組件代碼都打包進(jìn)同一個(gè)巨大的JavaScript文件中。用戶訪問首頁(yè)時(shí)不得不下載整個(gè)應(yīng)用的代碼其中大部分他暫時(shí)用不到。懶加載則將每個(gè)路由組件單獨(dú)打包成獨(dú)立的塊chunk只有當(dāng)用戶訪問該路由時(shí)對(duì)應(yīng)的JavaScript文件才會(huì)被下載和執(zhí)行。具體操作在路由配置文件中將靜態(tài)導(dǎo)入改為動(dòng)態(tài)導(dǎo)入。// 靜態(tài)導(dǎo)入不推薦用于大型項(xiàng)目 import Home from /views/Home.vue import About from /views/About.vue const routes [ { path: /, component: Home }, { path: /about, component: About } ] // 動(dòng)態(tài)導(dǎo)入懶加載推薦 const routes [ { path: /, // 使用 () import(...) 語法 component: () import(/views/Home.vue) }, { path: /about, component: () import(/views/About.vue), // 還可以為這個(gè)chunk命名便于在打包分析時(shí)識(shí)別 meta: { chunkName: about } } ]實(shí)操心得與避坑命名ChunkWebpack在打包懶加載組件時(shí)默認(rèn)會(huì)生成0.js1.js這樣的文件名不利于調(diào)試和長(zhǎng)期緩存?？梢酝ㄟ^/* webpackChunkName: “about” */魔法注釋來指定chunk名稱。component: () import(/* webpackChunkName: “about” */ ‘/views/About.vue’)預(yù)加載/預(yù)獲取對(duì)于用戶接下來很可能訪問的頁(yè)面比如首頁(yè)的主要功能入口可以使用webpackPrefetch。瀏覽器會(huì)在空閑時(shí)間提前加載這些資源當(dāng)用戶點(diǎn)擊時(shí)體驗(yàn)就像瞬間打開一樣。component: () import(/* webpackChunkName: “dashboard”, webpackPrefetch: true */ ‘/views/Dashboard.vue’)不要過度拆分對(duì)于極小的組件比如一個(gè)按鈕、一個(gè)彈窗單獨(dú)懶加載可能得不償失因?yàn)镠TTP請(qǐng)求本身也有開銷。通常建議對(duì)路由級(jí)組件和非常大的非路由組件進(jìn)行懶加載。2.2 第三方庫(kù)的按需引入與CDN引入項(xiàng)目中經(jīng)常會(huì)用到Element Plus、Lodash、Moment.js這類第三方庫(kù)。全量引入會(huì)顯著增加打包體積。按需引入以Element Plus和Lodash為例Element Plus: 務(wù)必使用官方推薦的自動(dòng)導(dǎo)入插件unplugin-vue-components,unplugin-auto-import。你只需要在代碼中直接使用組件插件會(huì)在構(gòu)建時(shí)自動(dòng)幫你引入對(duì)應(yīng)的樣式和組件代碼真正做到“用多少打包多少”。Lodash: 避免import _ from ‘lodash’。應(yīng)該使用import debounce from ‘lodash/debounce’或import { debounce } from ‘lodash-es’后者是ES模塊版本支持Tree Shaking。CDN引入對(duì)于一些體積巨大、更新不頻繁的庫(kù)如Vue本身、Vue Router、Axios可以考慮通過CDN引入利用公共CDN的緩存優(yōu)勢(shì)。操作步驟在index.html中通過script和link標(biāo)簽引入CDN資源。!DOCTYPE html html lang“en” head link href“https://cdn.jsdelivr.net/npm/element-plus2.x/dist/index.css” rel“stylesheet” /head body div id“app”/div script src“https://cdn.jsdelivr.net/npm/vue3.x/dist/vue.global.prod.js”/script script src“https://cdn.jsdelivr.net/npm/vue-router4.x/dist/vue-router.global.prod.js”/script script src“https://cdn.jsdelivr.net/npm/axios1.x/dist/axios.min.js”/script script src“https://cdn.jsdelivr.net/npm/element-plus2.x/dist/index.full.js”/script !-- 你的應(yīng)用主腳本 -- /body /html在vue.config.js或vite.config.js中配置externals告訴打包工具這些模塊不需要打包。// vue.config.js (Webpack) module.exports { configureWebpack: { externals: { ‘vue’: ‘Vue’, ‘vue-router’: ‘VueRouter’, ‘a(chǎn)xios’: ‘a(chǎn)xios’, ‘element-plus’: ‘ElementPlus’ } } }// vite.config.js (Vite) import { defineConfig } from ‘vite’ export default defineConfig({ build: { rollupOptions: { external: [‘vue’, ‘vue-router’, ‘a(chǎn)xios’, ‘element-plus’], output: { globals: { vue: ‘Vue’, ‘vue-router’: ‘VueRouter’, axios: ‘a(chǎn)xios’, ‘element-plus’: ‘ElementPlus’ } } } } })注意使用CDN引入需要確保腳本加載順序正確Vue必須先于Vue Router等加載并且要處理好在非瀏覽器環(huán)境如SSR下的兼容性問題。對(duì)于內(nèi)部網(wǎng)絡(luò)或?qū)Ψ€(wěn)定性要求極高的項(xiàng)目建議使用自建CDN或謹(jǐn)慎評(píng)估。2.3 善用計(jì)算屬性與偵聽器避免不必要的渲染Vue的響應(yīng)式系統(tǒng)非常強(qiáng)大但濫用也會(huì)導(dǎo)致性能問題。一個(gè)常見的誤區(qū)是在模板中直接使用復(fù)雜表達(dá)式或方法調(diào)用。反面例子template div {{ expensiveCalculation() }} !-- 每次渲染都會(huì)執(zhí)行 -- span v-for“item in filterList()” :key“item.id”{{ item.name }}/span !-- 每次渲染都會(huì)執(zhí)行 -- /div /template script export default { data() { return { list: […] } }, methods: { expensiveCalculation() { /* 耗時(shí)計(jì)算 */ }, filterList() { return this.list.filter(…) } } } /script優(yōu)化方案使用計(jì)算屬性 (computed)計(jì)算屬性基于它們的響應(yīng)式依賴進(jìn)行緩存只在相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。上述例子應(yīng)改為template div {{ computedResult }} span v-for“item in filteredList” :key“item.id”{{ item.name }}/span /div /template script export default { data() { return { list: […] } }, computed: { computedResult() { /* 耗時(shí)計(jì)算依賴變化時(shí)才重新計(jì)算 */ return … }, filteredList() { return this.list.filter(…) } } } /script謹(jǐn)慎使用偵聽器 (watch)watch適用于在數(shù)據(jù)變化后執(zhí)行有副作用的操作如發(fā)起請(qǐng)求、操作DOM。對(duì)于單純的數(shù)據(jù)派生優(yōu)先使用computed。深度偵聽 (deep: true) 和立即執(zhí)行 (immediate: true) 會(huì)帶來額外的性能開銷只在必要時(shí)使用。2.4 列表渲染優(yōu)化key的作用與虛擬滾動(dòng)渲染長(zhǎng)列表是前端常見的性能瓶頸。務(wù)必提供唯一的keykey是Vue識(shí)別節(jié)點(diǎn)身份的唯一標(biāo)識(shí)。使用index作為key在列表順序變化時(shí)如排序、增刪會(huì)導(dǎo)致不必要的DOM操作和狀態(tài)錯(cuò)亂。必須使用數(shù)據(jù)中唯一且穩(wěn)定的字段如id。虛擬滾動(dòng)當(dāng)列表有成千上萬條數(shù)據(jù)時(shí)即使使用了key渲染所有DOM節(jié)點(diǎn)也會(huì)導(dǎo)致內(nèi)存占用過高和渲染卡頓。解決方案是虛擬滾動(dòng)只渲染可視區(qū)域內(nèi)的元素?？梢允褂贸墒斓膸?kù)如vue-virtual-scroller或element-plus的虛擬化表格組件。3. 構(gòu)建與打包優(yōu)化讓產(chǎn)物體積最小化代碼寫好了構(gòu)建打包是下一道關(guān)卡。這里的目標(biāo)是讓最終生成的靜態(tài)文件JS, CSS, 圖片盡可能小。3.1 依賴分析與可視化在優(yōu)化之前你必須知道“胖”在哪里。使用打包分析工具可以直觀地看到每個(gè)模塊的體積。Webpack項(xiàng)目使用webpack-bundle-analyzer。安裝npm install --save-dev webpack-bundle-analyzer在vue.config.js中配置const BundleAnalyzerPlugin require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin module.exports { configureWebpack: { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: ‘static’, // 生成靜態(tài)HTML報(bào)告 openAnalyzer: false, // 不自動(dòng)打開瀏覽器 }) ] } }運(yùn)行npm run build完成后會(huì)在dist目錄生成report.html用瀏覽器打開即可查看分析圖。Vite項(xiàng)目使用內(nèi)置的rollup-plugin-visualizer。安裝npm install --save-dev rollup-plugin-visualizer在vite.config.js中配置import { visualizer } from ‘rollup-plugin-visualizer’; export default defineConfig({ plugins: [vue(), visualizer({ open: false, // 構(gòu)建后自動(dòng)打開報(bào)告 filename: ‘stats.html’ })], });分析報(bào)告會(huì)清晰地展示哪些依賴包體積最大哪些模塊有重復(fù)為你后續(xù)的優(yōu)化提供明確方向。3.2 代碼壓縮與Tree Shaking現(xiàn)代打包工具Webpack 4 / Vite默認(rèn)都支持ES模塊和Tree Shaking。確保你的代碼和依賴庫(kù)是ES模塊格式以便打包工具能安全地移除未使用的代碼dead code。關(guān)鍵檢查點(diǎn)package.json中的sideEffects字段如果你的庫(kù)有副作用如引入CSS、polyfill需要正確配置此字段幫助打包工具判斷。對(duì)于應(yīng)用項(xiàng)目通常設(shè)為false或一個(gè)數(shù)組。{ “name”: “your-project”, “sideEffects”: false }生產(chǎn)模式構(gòu)建確保構(gòu)建命令是npm run build對(duì)應(yīng)vue-cli-service build或vite build它會(huì)自動(dòng)啟用代碼壓縮Terser和優(yōu)化。開發(fā)模式的構(gòu)建包是不壓縮的。3.3 圖片等靜態(tài)資源優(yōu)化圖片通常是體積的大頭。壓縮圖片在將圖片放入項(xiàng)目前使用工具如 TinyPNG、Squoosh進(jìn)行壓縮。對(duì)于圖標(biāo)優(yōu)先使用SVG格式它體積小且不失真。使用現(xiàn)代圖片格式在支持的情況下使用WebP格式替代PNG/JPG通常能減少30%-70%的體積。可以使用vue-cli的image-webpack-loader或Vite的vite-plugin-imagemin在構(gòu)建時(shí)自動(dòng)壓縮和轉(zhuǎn)換。小圖片轉(zhuǎn)Base64對(duì)于非常小的圖片如幾KB的圖標(biāo)可以將其轉(zhuǎn)換為Base64編碼內(nèi)嵌到CSS或JS中減少HTTP請(qǐng)求。Webpack的url-loaderVue CLI已內(nèi)置或Vite的默認(rèn)行為會(huì)自動(dòng)處理。配置合理的limit在vue.config.js中可以調(diào)整內(nèi)聯(lián)文件的體積閾值。module.exports { chainWebpack: config { config.module .rule(‘images’) .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use(‘url-loader’) .loader(‘url-loader’) .tap(options { options.limit 4096 // 小于4KB的文件轉(zhuǎn)為Base64 return options }) .end() } }3.4 拆分Chunk與長(zhǎng)效緩存合理的文件拆分策略不僅能減少首屏加載量還能利用瀏覽器緩存。分離第三方庫(kù)將node_modules中的代碼單獨(dú)打包成一個(gè)或多個(gè)chunk如vendor。因?yàn)樗鼈儾怀Ｗ儎?dòng)可以被瀏覽器長(zhǎng)期緩存。// vue.config.js module.exports { configureWebpack: { optimization: { splitChunks: { chunks: ‘a(chǎn)ll’, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { // 將第三方庫(kù)拆分得更細(xì)按包名組織 const packageName module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]; return vendor.${packageName.replace(‘’, ‘’)}; }, chunks: ‘a(chǎn)ll’ } } } } } }配置輸出文件的哈希名Webpack/Vite可以通過[contenthash]根據(jù)文件內(nèi)容生成哈希字符串。只有當(dāng)文件內(nèi)容變化時(shí)哈希才會(huì)變這樣就能確保用戶總能獲取到最新的文件同時(shí)最大化緩存命中率。// vue.config.js module.exports { configureWebpack: { output: { filename: ‘[name].[contenthash:8].js’, chunkFilename: ‘[name].[contenthash:8].js’ } } }4. 運(yùn)行時(shí)與部署優(yōu)化提升用戶體驗(yàn)的最后一公里即使代碼和打包都優(yōu)化了在瀏覽器中運(yùn)行時(shí)的表現(xiàn)也同樣重要。4.1 服務(wù)端渲染SSR與靜態(tài)站點(diǎn)生成SSG對(duì)于內(nèi)容主導(dǎo)型網(wǎng)站如博客、新聞、電商列表頁(yè)首屏加載時(shí)的白屏?xí)r間和SEO是核心痛點(diǎn)。Vue提供了服務(wù)端渲染SSR和靜態(tài)站點(diǎn)生成SSG兩種方案。SSR (Nuxt.js)在服務(wù)器端將Vue組件渲染成HTML字符串直接發(fā)送給瀏覽器。用戶能立即看到內(nèi)容然后Vue再在客戶端“激活”hydrate這些靜態(tài)HTML使其變成可交互的應(yīng)用。這極大地提升了首屏加載速度和SEO友好性。但SSR需要Node.js服務(wù)器增加了架構(gòu)復(fù)雜度和服務(wù)器負(fù)載。SSG (VitePress, Nuxt.js)在構(gòu)建階段就預(yù)渲染所有路由的靜態(tài)HTML。適合內(nèi)容變化不頻繁的網(wǎng)站。部署簡(jiǎn)單純靜態(tài)文件性能極佳SEO友好。是博客、文檔站點(diǎn)的首選。選擇SSR還是SSG取決于內(nèi)容的動(dòng)態(tài)程度和你的技術(shù)棧偏好。對(duì)于高度交互的管理后臺(tái)CSR客戶端渲染可能更簡(jiǎn)單對(duì)于營(yíng)銷頁(yè)面、博客SSG是更好的選擇。4.2 利用瀏覽器緩存策略正確的HTTP緩存頭可以避免重復(fù)下載未變化的資源。強(qiáng)緩存通過Cache-Control如max-age31536000告訴瀏覽器在一年內(nèi)直接使用本地緩存。適用于帶有哈希值的靜態(tài)資源/assets/logo.[contenthash].png。協(xié)商緩存通過Last-Modified/ETag和If-Modified-Since/If-None-Match請(qǐng)求頭讓服務(wù)器判斷資源是否過期。適用于HTML文件因?yàn)槠銾RL不變但內(nèi)容可能變。在Nginx中可以這樣配置location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 1y; # 設(shè)置一年過期時(shí)間 add_header Cache-Control “public, immutable”; } location / { try_files $uri $uri/ /index.html; # 用于Vue Router的history模式 # 對(duì)HTML文件不設(shè)置長(zhǎng)期緩存或設(shè)置較短的緩存時(shí)間 expires -1; }4.3 開啟Gzip/Brotli壓縮在服務(wù)器端對(duì)文本資源JS、CSS、HTML進(jìn)行壓縮通常能減少60%-80%的傳輸體積。Gzip最廣泛支持。Brotli比Gzip壓縮率更高現(xiàn)代瀏覽器都支持。在Nginx中開啟Gzip和Brotli# Gzip gzip on; gzip_vary on; gzip_min_length 1024; gzip_types text/plain text/css text/xml text/javascript application/javascript application/xmlrss application/json; # Brotli (需要安裝ngx_brotli模塊) brotli on; brotli_comp_level 6; brotli_types text/plain text/css text/xml text/javascript application/javascript application/xmlrss application/json;4.4 使用性能監(jiān)測(cè)工具APM優(yōu)化不是一勞永逸的需要持續(xù)監(jiān)控?？梢允褂们岸薃PM應(yīng)用性能管理工具如LighthouseChrome DevTools內(nèi)置可以本地運(yùn)行給出性能、可訪問性、SEO等方面的綜合評(píng)分和改進(jìn)建議。Web VitalsGoogle推出的核心用戶體驗(yàn)指標(biāo)包括LCP最大內(nèi)容繪制、FID首次輸入延遲、CLS累積布局偏移?？梢允褂脀eb-vitals庫(kù)在真實(shí)用戶環(huán)境中進(jìn)行測(cè)量和上報(bào)。Sentry / Fundebug錯(cuò)誤監(jiān)控工具也能捕獲性能相關(guān)的數(shù)據(jù)幫你發(fā)現(xiàn)導(dǎo)致頁(yè)面卡頓或崩潰的具體操作。將這些工具集成到你的開發(fā)流程和線上監(jiān)控中能讓你對(duì)應(yīng)用的性能表現(xiàn)心中有數(shù)并快速定位問題。5. 常見問題與排查技巧實(shí)錄在實(shí)際優(yōu)化過程中總會(huì)遇到一些意想不到的問題。這里記錄幾個(gè)我踩過的坑和解決方法。5.1 打包后文件體積依然很大問題按照上述方法優(yōu)化后vendor.js文件還是有好幾MB。排查運(yùn)行打包分析工具看體積最大的模塊是什么。檢查是否不小心全量引入了某個(gè)UI庫(kù)或工具庫(kù)如import ElementPlus from ‘element-plus’而未使用自動(dòng)導(dǎo)入。檢查是否有重復(fù)依賴。不同版本的同一個(gè)庫(kù)可能被打包多次。使用npm ls package-name或yarn why package-name查看依賴樹。檢查是否引入了未使用的Polyfill。通過browserslist配置在package.json或.browserslistrc文件中調(diào)整需要兼容的瀏覽器范圍避免為過于古老的瀏覽器生成兼容代碼。5.2 懶加載的組件加載過慢出現(xiàn)白屏問題點(diǎn)擊路由跳轉(zhuǎn)后頁(yè)面會(huì)白屏一小會(huì)兒才顯示。排查與解決網(wǎng)絡(luò)慢這是最常見的原因?？梢蕴砑右粋€(gè)加載中的狀態(tài)Loading Component提升用戶體驗(yàn)。許多UI庫(kù)都提供了骨架屏Skeleton組件在內(nèi)容加載前展示比單純的旋轉(zhuǎn)圖標(biāo)體驗(yàn)更好。組件本身太大即使被懶加載如果單個(gè)組件文件依然很大比如包含了一個(gè)巨大的圖表庫(kù)加載時(shí)間也會(huì)很長(zhǎng)?？紤]對(duì)該組件內(nèi)部再進(jìn)行更細(xì)粒度的拆分或者對(duì)重型庫(kù)使用CDN。預(yù)加載策略如前所述對(duì)高概率訪問的路由使用webpackPrefetch。5.3 內(nèi)存泄漏導(dǎo)致頁(yè)面越來越卡問題在單頁(yè)面應(yīng)用中長(zhǎng)期使用后頁(yè)面響應(yīng)變慢甚至崩潰。排查全局事件監(jiān)聽未移除在組件mounted中使用了window.addEventListener必須在beforeUnmount或unmounted生命周期中用removeEventListener移除。定時(shí)器未清理setInterval或setTimeout同理需要在組件銷毀前用clearInterval/clearTimeout清理。第三方庫(kù)實(shí)例未銷毀例如ECharts圖表、地圖實(shí)例等它們可能持有對(duì)DOM的引用。確保在組件銷毀時(shí)調(diào)用其dispose或類似方法。閉包引用被閉包引用的變量可能無法被垃圾回收。檢查在異步回調(diào)、事件處理函數(shù)中是否引用了不必要的組件實(shí)例或大對(duì)象?？梢允褂肅hrome DevTools的Memory面板和Performance面板錄制內(nèi)存快照和時(shí)間線觀察內(nèi)存占用是否持續(xù)增長(zhǎng)并定位到具體的泄漏點(diǎn)。5.4 部署后資源加載404問題本地開發(fā)正常部署到服務(wù)器后JS、CSS文件加載失敗。排查路徑問題如果應(yīng)用部署在子路徑如https://example.com/my-app/需要在Vue Router中設(shè)置base選項(xiàng)在Vite/Webpack配置中設(shè)置publicPath。// vue.config.js module.exports { publicPath: process.env.NODE_ENV ‘production’ ? ‘/my-app/’ : ‘/’, }// router/index.js const router createRouter({ history: createWebHistory(‘/my-app/’), // 或 createWebHashHistory() routes, })服務(wù)器配置對(duì)于History模式需要配置服務(wù)器將所有非靜態(tài)文件請(qǐng)求重定向到index.html參見前面Nginx配置示例。緩存問題可能是瀏覽器或CDN緩存了舊版本的文件。確保構(gòu)建輸出的文件名使用了[contenthash]并檢查服務(wù)器緩存配置是否正確。優(yōu)化是一個(gè)持續(xù)的過程沒有銀彈。最好的策略是在項(xiàng)目初期就建立良好的開發(fā)規(guī)范如按需引入、組件懶加載在開發(fā)過程中定期使用分析工具進(jìn)行檢查在上線前進(jìn)行性能測(cè)試并在線上持續(xù)監(jiān)控。把這些方法融入到你的開發(fā)流程里就能持續(xù)交付高性能的Vue應(yīng)用。