# 十一、打包優(yōu)化> 學(xué)習(xí)打包優(yōu)化前需要了解 webpack。所謂的優(yōu)化主要涉及到兩方面：- 構(gòu)建速度的優(yōu)化 - 構(gòu)建質(zhì)量的優(yōu)化大多數(shù) Vue 項(xiàng)目是基于 VueCLI 搭建的，而 VueCLI 的底層建筑是 webpack。webpack 是現(xiàn)在主流的功能強(qiáng)大的模塊化打包工具，在使用 webpack 時(shí)，如果不注意性能優(yōu)化，有非常大的可能會(huì)產(chǎn)生性能問題，性能問題主要分為**開發(fā)時(shí)打包構(gòu)建速度慢**、**開發(fā)調(diào)試時(shí)的重復(fù)性工作**、以及**輸出文件質(zhì)量不高**等，因此性能優(yōu)化也主要從這些方面來分析。本文主要針對(duì)是在 Vue 項(xiàng)目中關(guān)于底層建筑 webpack 優(yōu)化以及 Vue 本身相關(guān)的一些優(yōu)化事宜。## 把 VueCLI 升級(jí)到最新穩(wěn)定版> VueCLI 是基于 webpack 構(gòu)建的，它的升級(jí)可能會(huì)帶來編譯速度的提升或是編譯質(zhì)量的提升。使用下面的命令查看你的 VueCLI 版本：```sh vue --version ```升級(jí) VueCLI：```sh npm install -g @vue/cli ```升級(jí)你的項(xiàng)目中 VueCLI 相關(guān)的內(nèi)容，最好在升級(jí)之前確保你項(xiàng)目的 Git 工作區(qū)是干凈的，所有代碼都是已提交到歷史記錄中了，防止升級(jí)帶來問題影響，有了問題我們可以及時(shí)回退。```sh # 在你的項(xiàng)目目錄中執(zhí)行這個(gè)命令 vue upgrade ```## 分析打包結(jié)果> 如果你的編譯速度慢，那么可以通過分析打包結(jié)果來知道是哪個(gè)包比較費(fèi)時(shí)。- 了解打包的內(nèi)容 - 找出最大的模塊是什么 - 查找錯(cuò)誤到達(dá)的模塊 - 優(yōu)化它！通過分析打包結(jié)果，我們可以看到哪些包占用了打包的時(shí)間，還有哪些包的結(jié)果體積比較大。`vue-cli-service build` 會(huì)在 `dist/` 目錄產(chǎn)生一個(gè)可用于生產(chǎn)環(huán)境的包，帶有 JS/CSS/HTML 的壓縮，和為更好的緩存而做的自動(dòng)的 vendor chunk splitting。它的 chunk manifest 會(huì)內(nèi)聯(lián)在 HTML 里。這里還有一些有用的命令參數(shù)：- `--modern` 使用[現(xiàn)代模式](https://cli.vuejs.org/zh/guide/browser-compatibility.html#現(xiàn)代模式)構(gòu)建應(yīng)用，為現(xiàn)代瀏覽器交付原生支持的 ES2015 代碼，并生成一個(gè)兼容老瀏覽器的包用來自動(dòng)回退。 - `--target` 允許你將項(xiàng)目中的任何組件以一個(gè)庫(kù)或 Web Components 組件的方式進(jìn)行構(gòu)建。更多細(xì)節(jié)請(qǐng)查閱[構(gòu)建目標(biāo)](https://cli.vuejs.org/zh/guide/build-targets.html)。 - `--report` 和 `--report-json` 會(huì)根據(jù)構(gòu)建統(tǒng)計(jì)生成報(bào)告，它會(huì)幫助你分析包中包含的模塊們的大小。- 內(nèi)部使用的 [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) 插件。構(gòu)建打包并生成分析報(bào)告：```sh npm run build --report ```參考：- https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-build## Gzip 壓縮> Gzip 壓縮是一種數(shù)據(jù)傳輸過程中的壓縮方式，它可以極大的壓縮文件的大小。 > > 注意：它不影響原始文件。網(wǎng)站加載的速度很大程序取決于網(wǎng)站資源文件的大小，減少要傳輸?shù)奈募拇笮】梢允咕W(wǎng)站不僅加載更快，而且對(duì)于那些寬帶是按量計(jì)費(fèi)的用戶來說也更友好。HTTP協(xié)議上的GZIP編碼是一種用來改進(jìn)WEB應(yīng)用程序性能的技術(shù)。大流量的WEB站點(diǎn)常常使用GZIP[壓縮技術(shù)](https://baike.baidu.com/item/壓縮技術(shù))來讓用戶感受更快的速度。這一般是指WWW服務(wù)器中安裝的一個(gè)功能，當(dāng)有人來訪問這個(gè)服務(wù)器中的網(wǎng)站時(shí)，服務(wù)器中的這個(gè)功能就將網(wǎng)頁(yè)內(nèi)容壓縮后傳輸?shù)絹碓L的電腦瀏覽器中顯示出來.一般對(duì)純文本內(nèi)容可壓縮到原大小的40%.這樣傳輸就快了，效果就是你點(diǎn)擊網(wǎng)址后會(huì)很快的顯示出來.當(dāng)然這也會(huì)增加服務(wù)器的負(fù)載. 一般服務(wù)器中都安裝有這個(gè)功能模塊的。Gzip 是什么？``` 一種文件壓縮格式。 ```用于哪里？``` HTTP 協(xié)議 ```開啟 Gzip 有什么好處？``` Gzip 開啟以后會(huì)將輸出到用戶瀏覽器的數(shù)據(jù)進(jìn)行壓縮的處理，這樣就會(huì)減小通過網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量，提高文件傳輸?shù)乃俣取?```> 注意：`gzip`不一定適用于所有文件的壓縮。例如，文本文件壓縮得非常好，通常會(huì)縮小兩倍以上。另一方面，諸如JPEG或PNG文件之類的圖像已經(jīng)按其性質(zhì)進(jìn)行壓縮，使用`gzip`壓縮很難有好的壓縮效果或者甚至沒有效果。壓縮文件會(huì)占用服務(wù)器資源，因此最好只壓縮那些壓縮效果好的文件。 > > 資源太小的文件也不會(huì)壓縮。如何開啟？它需要前后端配置才可以。后端要把服務(wù)器軟件開啟 Gzip 壓縮功能（主流的服務(wù)器軟件都是默認(rèn)開啟 Gzip 壓縮的），客戶端不需要做任何處理，取決于瀏覽器（比較新的都支持）。不同服務(wù)器軟件配置不一樣，具體由部署項(xiàng)目的人負(fù)責(zé)，一般是運(yùn)維、后端開發(fā)人員，如果想要自行配置，可自行百度查詢。大多數(shù)服務(wù)器軟件都是默認(rèn)開啟的。- Nginx - Tomcat - Apache - IIS - ...> 實(shí)際工作中，如果服務(wù)器軟件沒有開啟，可以和負(fù)責(zé)運(yùn)維部署的人員溝通。如何檢測(cè)內(nèi)容是否已開啟了 Gzip 壓縮？查看響應(yīng)頭中是否有下面的字段信息。``` Content-Encoding: gzip ```前端沒有調(diào)整配置服務(wù)器軟件麻煩，該怎么測(cè)試？使用 VueCLI 官方推薦的 [serve](https://github.com/zeit/serve) 命令行工具。```sh # 1、如果你已經(jīng)安裝了就不需要安裝了 npm install --global serve# 使用該命令檢測(cè)是否已安裝或者是否安裝成功，如果能看到輸出一個(gè)版本號(hào)，則證明安裝好了 serve --version# 2、在打包的結(jié)果目錄中執(zhí)行下面的命令啟動(dòng)一個(gè) HTTP 靜態(tài)服務(wù)（默認(rèn)開啟 Gzip 壓縮啟動(dòng)服務(wù)） serve -s ./# 使用 -u 參數(shù)禁用 Gzip 壓縮 serve -s -u ./ ```不是每個(gè)瀏覽器都支持gzip的，如何知道客戶端是否支持gzip呢，請(qǐng)求頭中有個(gè) `Accept-Encoding` 來標(biāo)識(shí)對(duì)壓縮的支持。客戶端http請(qǐng)求頭聲明瀏覽器支持的壓縮方式，服務(wù)端配置啟用壓縮，壓縮的文件類型，壓縮方式。當(dāng)客戶端請(qǐng)求到服務(wù)端的時(shí)候，服務(wù)器解析請(qǐng)求頭，如果客戶端支持gzip壓縮，響應(yīng)時(shí)對(duì)請(qǐng)求的資源進(jìn)行壓縮并返回給客戶端，瀏覽器按照自己的方式解析，在http響應(yīng)頭，我們可以看到 `Content-encoding: gzip`，這是指服務(wù)端使用了 `gzip` 的壓縮方式。> 在紅色矩形區(qū)域右鍵選擇：Response Headers > Content-Encoding> 然后就可以觀測(cè)到所有請(qǐng)求記錄的響應(yīng)內(nèi)容編碼了。## 不打包第三方包> 作用：提高編譯的速度。影響打包速度最根本的原因就是某些第三方包體積過大，所以打包速度就很慢。解決它的辦法也非常簡(jiǎn)單：不對(duì)它打包！不要讓 webpack 來處理它。可是不處理它，把它放哪里呢？通過 `script` 標(biāo)簽加載它，就不被 webpack 處理了。我們推薦使用第三方的 CDN 來加載資源，所謂的 CDN 說白了就是一個(gè)在線鏈接。- bootcdn：不錯(cuò)，國(guó)內(nèi)的一個(gè)服務(wù) - cdnjs：不推薦，國(guó)外的，速度慢 - unpkg：不推薦，國(guó)外的，速度慢 - [jsdelivr](https://www.jsdelivr.com/) ：國(guó)外的，但是在國(guó)內(nèi)有它的服務(wù)節(jié)點(diǎn)，推薦- 全球 CDN 優(yōu)化- 凡是能通過 npm 下載的包，它里面都有```html <!-- element 依賴了 Vue，所以這里也必須加載 Vue --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script> ```但是通過 script 標(biāo)簽加載的資源如何使用呢？那就得做一些特殊配置了。在項(xiàng)目的根目錄創(chuàng)建 `vue.config.js````js /*** Vue CLI 的配置文件* 這里可以自定義 VueCLI 內(nèi)部的 webpack 配置*/// 該配置文件必須導(dǎo)出一個(gè)對(duì)象（Node 中的模塊語(yǔ)法） module.exports = {// 自定義 VueCLI 中的 webpack 配置configureWebpack: {// 告訴 webpack 使用 script 標(biāo)簽加載的那個(gè)資源，而不是去 node_moudles 中打包處理externals: {// 屬性名：你加載的那個(gè)包名// 屬性值：script 標(biāo)簽暴露的全局變量，注意，寫到字符串中！！！// 'element-ui': 'ELEMENT''vue': 'Vue','element-ui': 'ELEMENT','echarts': 'echarts'}} }```重新打包測(cè)試。> 使用建議：只需要把一些特別大的包處理即可，超過500kb 的包就做這個(gè)處理。## 路由懶加載> 參考文檔：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html路由懶加載主要針對(duì)的是我們自己的代碼。默認(rèn)情況下，我們自己寫的所有代碼都會(huì)被打包到 app.xxx.js 中。如果我們自己的代碼非常多，將來 app.xxx.js 也會(huì)隨之變得越來越大。文件太大的話會(huì)造成**首次加載很慢**。所以我們可以通過路由懶加載的方式優(yōu)化它。## 按需加載第三方組件項(xiàng)目中使用的第三方組件庫(kù)，如果使用的組件不是太多，建議按需加載，所謂的按需加載就是僅僅只把使用到的組件打包到結(jié)果中，可以減小打包結(jié)果體積。## 緩存和并行處理VueCLI 內(nèi)置了：- `cache-loader` 會(huì)默認(rèn)為 Vue/Babel/TypeScript 編譯開啟。文件會(huì)緩存在 `node_modules/.cache` 中——如果你遇到了編譯方面的問題，記得先刪掉緩存目錄之后再試試看。 - `thread-loader` 會(huì)在多核 CPU 的機(jī)器上為 Babel/TypeScript 轉(zhuǎn)譯開啟如果你沒有使用 VueCLI，自己搭建的 webpak，建議加上這兩個(gè)工具優(yōu)化構(gòu)建速度。你可能會(huì)看到一些幾年前的“優(yōu)化教程”，它們可能會(huì)涉及到這個(gè)內(nèi)容。

?

總結(jié)

以上是生活随笔為你收集整理的前端学习（2462）：打包优化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。