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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。