任何開發都繞不開的一個話題就是效能優化，今天我們就來談一談前端開發過程中有哪些可以優化的點。

模組按需載入

我們基於React.js、Vue.js、AngularX建立好工程之後，因為業務的需要，我們很多時候都需要引入外部的依賴庫，比如面向UI的ElementUI、Antd，如果我們不做任何配置直接引入，Webpack打包時很可能會把整個第三方庫都打包進去，哪怕我們只是用了其中一個元件。

這個結果顯然不是我們想要的，如果想要做到按需載入，我們就必須引入Import類似外掛，這裡推薦用babel-plugin-import。ElementUI、Antd官網都會有按需載入的使用說明，以下截圖是Antd的官方說明：

此處已經說得很詳細，antd預設已經支援tree shaking，在使用[email protected]或者tree shaking失效的情況下需要做Import引入，否則不需要單獨處理。如果你不確定按需載入是否已經正確執行，你可以比較下第三方庫引入後與引入前比輸出包大小增加了多少。

gzip壓縮

工程釋出前我們正常打包輸出的檔案都是html、js等資原始檔，雖然我們對這些檔案進行了公共抽取和混淆優化，但是這些檔案還會存在動輒就上100k+的問題，為了進一步優化檔案大小，我們需要使用gzip壓縮方案。以下是輸出目錄gzip檔案與原始檔案的比較：

為了達到上述目標，我們只需要在Webpack中配置gzip壓縮的CompressionPlgin外掛。

至此gzip的前端配置都已經完成，還有一個很關鍵的代理伺服器配置，如果你使用的是Nginx，就需要在Nginx中開啟gzip，如下：

PWA

PWA是一種設計理念，通過多種技術來提升Web App的體驗，其中我們使用最廣泛的就是Service Worker技術，通過SW我們可以把頁面快取到裝置本地，當用戶下次點選頁面時，會優先展示快取的頁面，然後SW在後臺靜默更新最新的快取檔案。

通過PWA技術，我們可以讓使用者開啟頁面的速度得到一個較大提升，提升使用者留存率。

介面資料快取

通過PWA我們實現了頁面等資原始檔的快取，但是當用戶訪問頁面時還是會發起介面資料的請求，如果我們的網路狀況不佳或者我們的伺服器壓力較大，都有可能對頁面資料的展示造成困擾，此時如果我們仿照PWA把介面資料快取下來，使用者體驗會更加流暢。

資料快取的方式有很多種，如LocalStorage、Cache等等，在手機端我們建議APP增持對Web資料的快取介面，不管是從安全性還是可控性來講，APP輔助快取Web介面資料都要優於Web自己快取資料。

今天就寫這麼多了，後期還會再補充。