一、 加載資源優化-- 減少請求資源大小和次數
1、合并css和壓縮css、js文件。
原因：
主要是為了減少http請求次數以及減少請求資源的大小
方法：
webpack中mini-css-extract-plugin將css樣式抽離到一個文件中；
optimize-css-assets-webpack-plugin壓縮css
terser-webpack-plugin壓縮js
2、代碼分割Code Splitting-為了減少HTTP 請求
把業務代碼和第三方庫代碼分離出來，因為業務代碼更新頻率大，相反第三方庫代碼更新迭代相對較慢且可以鎖版本，所以可以利用瀏覽器的緩存來加載這些第三方庫。
做法：
1、利用webpack的CommonsChunkPlugin插件自動化分離公共模塊，將公共模塊單獨打包成一個chunk --- 不推薦了，老方法
2、利用webpack4的splitChunksPlugin
webpack4 最核心的特性是 【splitChunks】，splitChunks 最核心的配置是 cacheGroups！
默認配置如下：
模塊被重復引用或者來自node_modules中的模塊
minSize: 30000,// 引入的模塊，只有大于30kb時，才會做代碼分割
maxAsyncRequests: 5, 在按需加載時，請求數量小于等于5進行代碼分割
maxInitialRequests: 3, 在初始化加載時，請求數量小于等于3進行代碼分割
異步代碼分割import(),不需要做任何配置，webpack會自動完成分包。
SplitChunksPlugin有三種模式async，all，initial
默認情況下為async，即只拆分import()動態加載的模塊
all 模式下，入口文件（webpack定義的entry）依賴的文件和動態引入文件都會進行拆分打包
initial 模式下，會將入口文件中的依賴包重新切割為一個新的文件,其它文件中動態引入的不會進行拆分
cacheGroups**** - ****緩存組****--****同步代碼分割打包必須配置項
按需加載-利用() => [import()] 語法將組件單獨打包到一個chunk里，即async chunk 。
場景：
「訪問某個路由的時候再去加載對應的組件」，用戶不一定會訪問所有的路由，所以沒必要把所有路由對應的組件都先在開始的加載完；
「某些用戶他們的權限只能訪問某些頁面」，所以沒必要把他們沒權限訪問的頁面的代碼也加載。
3、采用圖片的懶加載（延遲加載） 目的為了，減少頁面第一次加載的請求次數；防止并發加載資源過多造成頁面阻塞 具體步驟： 1、頁面開始加載時不去發送http請求，而是放置一張占位圖 2、當頁面加載完(window.onload)時，并且圖片在可視區域再去請求加載圖片信息
具體方案：
vue圖片懶加載 —— vue-lazyload的使用；https://blog.csdn.net/halo1416/article/details/81302419
原理：先將img 標簽中的src鏈接設為同一張占位圖，將其真正的圖片地址存儲再在自定義屬性中（比如data-src）。當js監聽到該圖片元素進入可視窗口時，即將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果。
// 判斷圖片是否出現在視窗的函數
function isShow($node) {
return $node.offset().top <= $(window).height() + $(window).scrollTop();
}
1、當 window.onload 事件觸發時，頁面上所有的DOM，樣式表，腳本，圖片，flash都已經加載完成了。
2、當 DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash。
4、避免引入大量第三方的庫
能用css做的效果，不要用js做；能用原生js做的，不要去使用第三方插件。
5、使用雪碧圖
為了減少網絡請求數量，提高網站的訪問速度，我們可以把一些小的圖片合并成一張sprite圖，然后根據background-position來進行定位
6、使用CDN讓靜態資源加載更快(CDN能夠讓你請求最近/最快的服務器)
7、tree shaking
tree shaking 用于移除 JavaScript 中的未引用代碼(dead-code)。它依賴于 ES2015 模塊module語法的靜態結構特性，例如import 和 export，能夠編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。
ES6 模塊不是對象，而是通過export命令顯式指定輸出的代碼，再通過import命令輸入。
配置方法：
在webpack.config.js里添加
mode: 'development', //production模式下，默認開啟
optimization: {
usedExports: true, // 開啟Tree Shaking功能
}
package.json中配置"sideEffects" 屬性
"sideEffects": ["./src/some-side-effectful-file.js"] //該文件有副作用，不要進行tree shaking
通過配置副作用文件列表，提示編譯器不進行tree shaking
二、 提高渲染效率
1、 盡量所使用的字體圖標或者SVG圖標來代替傳統png圖 因為字體圖標或者SVG是矢量圖，是代碼編寫出來的，放大不會變形，而且渲染速度快
2、 事件的節流、防抖--提高js運行效率
3、 把css放在head中，把js放在body下面
css放在body標簽尾部時, DOMTree構建完成之后便開始構建RenderTree, 并計算布局渲染網頁, 等加載解析完css之后, 開始構建CSSOMTree, 并和DOMTree重新構建RenderTree, 重新計算布局渲染網頁
css放在head標簽中時, 先加載css, 之后解析css構建CSSOMTree, 于此同時構建DOMTree, CSSOMTree和DOMTree都構建完畢之后開始構建RenderTree, 計算布局渲染網頁
對比兩者, css放在head標簽中比css放在body標簽尾部少了一次構建RenderTree, 一次計算布局和一次渲染網頁, 因此性能會更好; 并且css放在body標簽尾部時會在網頁中短暫出現"裸奔"的HTML, 這不利于用戶體驗
4、 基于script標簽下載js文件時，可以使用defer或者async來異步加載
5、減少重流、重繪
（1）減少dom操作，多個操作盡量合并到一起執行（瀏覽器會累積DOM 變動，然后一次性執行。）
（2）可將元素絕對定位脫離文檔流，減少對其他元素的影響
（3）不要一項一項地改變樣式，而是使用預先定義的CSS class（類名）一次性改變樣式。
（4）使用window.requestAnimationFrame()，因為它可以把代碼推遲到下一次重繪之前執行，而不是立即要求頁面重繪
下面是一個window.requestAnimationFrame()對比效果的例子。
// 重流代價高function doubleHeight(element) {
var currentHeight = element.clientHeight;
element.style.height = (currentHeight * 2) + 'px';
}
all_my_elements.forEach(doubleHeight);
// 重繪代價低function doubleHeight(element) {
var currentHeight = element.clientHeight;
window.requestAnimationFrame(function () {
element.style.height = (currentHeight * 2) + 'px';
});
}
all_my_elements.forEach(doubleHeight);
上面的第一段代碼，每讀一次DOM，就寫入新的值，會造成不停的重排和重流。第二段代碼把所有的寫操作，都累積在一起，從而 DOM 代碼變動的代價就最小化了。
6、首屏內容使用SSR(server side render)服務端渲染
服務端渲染就是在服務端加載執行js，并且將數據直接輸出到html，返回給客戶端的是渲染好的html；
7、預渲染
通過Webpack 預渲染插件（prerender-spa-plugin）將一些特定靜態頁面組件 build 時就編譯為 html 文件，直接以靜態資源的形式輸出給搜索引擎。
預渲染不執行js的，只適應于純靜態頁面。
三、存儲
1、Ajax請求使用緩存
GET請求，是可以（而且默認）在客戶端進行緩存的，除非指定了不同的地址，否則同一個地址的AJAX請求，不會重復在服務器執行，而是返回304告訴瀏覽器去本地拉取數據
