我們常將網站效能優化措施歸結為三大方面：
1、減少請求數；
2、css放頭部，js放底部；
3、合理利用快取，提升網路傳輸速率；
4、減小請求資源體積；

1 減少請求數
1.1使用雪碧圖，減少http請求，推薦一個自動化生成雪碧圖的工具：https://www.toptal.com/developers/css/sprite-generator
1.2 使用字型圖示，推薦使用阿里巴巴向量圖示庫：www.iconfont.cn/。
這種圖片能做很多事情，而且它只是往html裡面插入字元和樣式，和圖片相比，佔用記憶體更小。

2 css放頭部，js放底部
javascript會阻塞dom的解析。當解析過程中遇到<script

3 瀏覽器快取
瀏覽器在向伺服器發起請求前，會先查詢本地是否有相同的檔案，如果有，就會直接拉取本地快取，快取策略如下圖：


瀏覽器預設的快取是放在記憶體中的，關閉瀏覽器就會清除，而存在硬盤裡的快取才能被長期保留下去，開啟network，可以看到兩種不同的狀態：from memory cache 和 frome disk cache，前者來自記憶體，後者來自硬碟。
之所以拉取快取會出現200、304兩種不同的狀態碼，只有向伺服器發起驗證請求並確認快取是否更新，更新返回200，未被更新返回304狀態碼。
補充：瀏覽器第一次向伺服器發請求，伺服器返回200和last-modified（伺服器檔案最後更新時間）。F5重新整理頁面傳送驗證請求

4 資源打包壓縮
減少請求資源體積，通常都需要打包工具（例如webpack）的協助，可以從以下幾點來對webpack進行優化。
3.1 配置熱更新外掛HotModuleReplacementPlugin，熱更新不重新整理整個網頁，只編譯發生變化的模組，新模組替換老模組。
3.2 壓縮JS用UglifyJs，再用ExtractTextWebpackPlugin從js檔案分離出css檔案。
3.3 設定多個入口檔案，提取公共程式碼，以利用快取（CommonsChunkPlugin ）。
通常的入口檔案有pollyfills.ts、vendor.ts、main.ts。

entry: {
    //填平瀏覽器的坑，包括es6的一些包
    'polyfills': './src/polyfills.ts',
    //第三供應商，包括angular，bootstrap，lodash
    'vendor': './src/vendor.ts',
    //應用程式碼
    'app': './src/main.ts'
  }  
  -----------------------------------------------------------------------------------------------------------------
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
    //...
    plugins:[
        new CommonsChunkPlugin({
            chunks:['polyfills','vendor','main'], //從哪些chunk中提取
            name:'common',  // 提取出的公共部分形成一個新的chunk
        })
    ]

3.4 區分執行環境，因為第三方庫中有大量根據開發環境判斷的if else程式碼，所以構建也需要根據不同環境輸出不同的程式碼。這裡用definePlugin外掛來配置。

const DefinePlugin = require('webpack/lib/DefinePlugin');
//...
plugins:[
    new DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    })
]
-------------------------------------------------------------------------------------------------------------------
if(process.env.NODE_ENV === 'production'){
    console.log('你在生產環境')
    
    doSth();
}else{
    console.log('你在開發環境')
    doSthElse();
}

3.5 require.ensure()來實現按需載入

 mapBtn.click(function() {
   require.ensure([], function() {
       var baidumap = require('./baidumap.js') //baidumap.js放在我們當前目錄下
   })
 })

參考文章：https://segmentfault.com/a/1190000015883378
https://blog.csdn.net/DINGYANG0315/article/details/80518720