有了它，你的項目將快過火箭

前端性能優化總結

gzip壓縮

gzip壓縮效率很高，能夠達到70%的壓縮率

//npm i -D compression-webpack-plugin 安裝插件依賴
configureWebpack: config => {  const CompressionPlugin = require('compression-webpack-plugin')  config.plugins.push(new CompressionPlugin()) } 複製代碼

去掉console.log

生產環境中，不須要打印日誌。經過對webpack進行配置，打包時自動去掉console.log

//npm i -D terser-webpack-plugin
configureWebpack:config =>{  const TerserPlugin = require('terser-webpack-pulugin')  config.optimzation.minimizer.push(  new TerserPlugin({  extractComments:false,  terserOptions:{compress:{drop_console:true}} //插件配置項 移除console  })  ) } 複製代碼

去除SourceMap

代碼壓縮後進行調bug定位將很是困難，因而引入sourcemap記錄壓縮先後的位置信息記錄，當產生錯誤時直接定位到未壓縮前的位置，將大大的方便咱們調試。

sourcemap附帶了不少信息，若是build須要生成sourcemap，將會大大下降build的速度，還會增長包的體積。

//vue 中
module.exports = {  productionSourceMap: false, }  //react中 //打開webpack.config.prod.js const shouldUseSourceMap = false 複製代碼

CDN

內容分發網絡，它可以實時地根據網絡流量和各節點的鏈接、負載情況以及到用戶的距離和響應時間等綜合信息將用戶的請求從新導向離用戶最近的服務節點上。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的情況，提升用戶訪問網站的響應速度。因此能夠經過將資源部署在CDN上來提升響應速度，提升用戶體驗

預渲染

簡單來講，就是將瀏覽器解析JavaScript動態渲染的工做，在打包階段完成了（只構建了靜態數據）。換個說法，在構建過程當中，webpack經過使用prerender-spa-plugin插件生成靜態結構的html

// 一、安裝prerender-spa-plugin
npm install prerender-spa-plugin --save-dev  // 二、安裝vue-meta-info npm install vue-meta-info --save-dev   // 三、相關配置 <!-- webpack.prod.conf.js --> // 預渲染配置：在webpack.prod.conf文件中加入 const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer  // 在 plugins 中加入 new PrerenderSPAPlugin({  // 生成文件的路徑，也能夠與webpakc打包的一致。  // 下面這句話很是重要！！！  // 這個目錄只能有一級，若是目錄層次大於一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡着不動。  staticDir: path.join(__dirname, '../dist'),   // 對應本身的路由文件，好比a有參數，就須要寫成 /a/param1。  routes: ['/', '/first', '/second', '/third', '/fourth', '/userCenter/userFirst','/userCenter/userSecond','/userCenter/userThird'],   // 這個很重要，若是沒有配置這段，也不會進行預編譯  renderer: new Renderer({  inject: {  foo: 'bar'  },  // headless: false,  renderAfterDocumentEvent: 'render-event', // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，二者的事件名稱要對應上。  args: ['--no-sandbox', '--disable-setuid-sandbox']  })  })  // 四、在main.js中 import MetaInfo from 'vue-meta-info'  new Vue({  el: '#app',  router,  components: { App },  template: '<App/>',  // 添加mounted，否則不會執行預編譯  mounted () {  document.dispatchEvent(new Event('render-event'))  } }) 複製代碼

注意：路由模式必須爲 history ，若是不設置 history 模式，也能運行和生成文件，每一個 index.html 文件的內容都會是同樣的

Service Worker

ServiceWorker 是運行在瀏覽器後臺進程裏的一段 JS，它能夠作許多事情，好比攔截客戶端的請求、向客戶端發送消息、向服務器發起請求等等，其中最重要的做用之一就是離線資源緩存。

ServiceWorker 擁有對緩存流程豐富靈活的控制能力，當頁面請求到 ServiceWorker 時，ServiceWorker 同時請求緩存和網絡，把緩存的內容直接給用戶，然後覆蓋緩存

注意：須要HTTPS才能使用ServiceWorker

HTTP緩存

HTTP緩存通常分爲兩類：強緩存(本地緩存)、協商緩存(304緩存)

普通刷新會啓用協商緩存

在地址欄輸入網址、經過連接引入資源等狀況下，瀏覽器才啓用強緩存

強緩存(200)。本地緩存是最快速的一種緩存方式，只要資源還在緩存有效期內，瀏覽器就會直接在本地讀取，不會請求服務端。在chrome控制檯的Network選項中能夠看到該請求返回200的狀態碼，而且Size顯示from disk cache或from memory cache。強緩存能夠經過設置兩種 HTTP Header 實現：Expires 和 Cache-Control。

協商緩存(304)。協商緩存，顧名思義是通過瀏覽器與服務器之間協商過以後，在決定是否讀取本地緩存，若是服務器通知瀏覽器能夠讀取本地緩存，會返回304狀態碼，而且協商過程很簡單，只會發送頭信息，不會發送響應體。

協商緩存能夠經過設置兩種 HTTP Header 實現：Last-Modified 和 ETag

首先在精確度上，Etag要優於Last-Modified

第二在性能上，Etag要遜於Last-Modified，畢竟Last-Modified只須要記錄時間，而Etag須要服務器經過算法來計算出一個hash值

第三在優先級上，服務器校驗優先考慮Etag

緩存優先級：Service Worker -> Memory Cache(內存緩存) -> Disk Cache(硬盤緩存) -> Push Cache(推送緩存)

Push Cache 只在會話（session）中存在，會話結束就被釋放，並且緩存時間很短

HTTP2

HTTP2 四個新特性：

• 多路複用，無需多個TCP鏈接，由於其容許在單一的HTTP2鏈接上發起多重請求，所以能夠不用依賴創建多個TCP鏈接。
• 二進制分幀，將全部要傳輸的消息採用二進制編碼，而且會將信息分割爲更小的消息塊。
• 頭部壓縮，用HPACK技術壓縮頭部，減少報文大小
• 服務端推送，服務端能夠在客戶端發起請求前發送數據，換句話說，服務端能夠對客戶端的一個請求發送多個相應，而且資源能夠正常緩存。

server {
 listen 443 ssl http2; } 複製代碼

資源預加載

提早加載資源，當用戶須要時，能夠直接從本地緩存中渲染。

preload

頁面加載的過程當中，在瀏覽器開始主體渲染以前加載

//對sty1e.cs5和 index.js進行pre1oad預加載
<link rel="preload" href="style.css" as="style"> <link rel="preload" href="index.js" as="script">  複製代碼

prefetch

頁面加載完成後，利用空閒時間提早加載

//對資源進行 prefetch預加載
<link rel="prefetch" href="next.css"> <link rel="prefetch" href="next.js"> 複製代碼

dns-prefetch

//對特定域名進行預解析
//將靜態資源只放在一個域名下面，能夠有效減小dns的請求 <link rel=」dns-prefetch」 href=」//fonts.googleapis.com」> 複製代碼

異步無阻塞加載JS

異步加載 js 文件，而且不會阻塞頁面的渲染。

普通的script標籤在開始解析和解析的過程當中，會中止解析dom

defer

<script src="d.js" defer></script> <script src="e.js" defer></script>
複製代碼

在其餘同步腳本執行後，DOMContentLoaded 事件前 依次執行 d.js, e.js。

async

<script src="b.js" async></script>
<script src="c.js" async></script> 複製代碼

當腳本下載完後當即執行。（二者執行順序不肯定，執行階段不肯定，可能在 DOMContentLoaded 事件前或者後 ）

defer和async都不會中止解析dom

「webp」

「webp」 是一種新的圖片格式，它的體積只有只有 「jpeg」的2/3，將圖片資源大量換成 「webp」 格式能夠加快請求的速度

可是webp存在瀏覽器兼容問題，使用前須要判斷瀏覽器是否支持

loading加載

經過添加一個加載狀態，可讓用戶在視覺上不會以爲慢

也能夠經過骨架屏加載，在感官上內容出現的流暢不突兀

最後，若是你們想和我一塊兒討論探索前端，能夠關注一下個人公衆號，不按期更新干貨，更可加入技術羣交流討論。

本文使用 mdnice 排版