為什麼要分離第三方函式庫？

webpack算是個磨人的小妖精了。 之前一直站在glup陣營，使用browserify打包，發現webpack已經火到爆炸，深怕被社區遺落，趕緊拿起來把玩一下。本來只想玩一下的。嘗試打包了以後，就想啟動webpack伺服器，之後就想加入熱替換，什麼css檔單獨拆分，各種 loader 處理優化打包結果，各種 source-map 有什麼不同，一個都不能少。其中添加熱替換時候，因為應用的伺服器和webpack伺服器沒有使用同一個，產生了一點波折。然後就到了今天這個主題了。
逐步展開今天的主題：
為什麼要分離第三方函式庫？
這個好處顯而易見，第三方函式庫是比較穩定的，不會輕易改變，利用瀏覽器快取後，使用者再次載入頁面會減少伺服器請求，提高速度最佳化體驗。提取多個應用程式（入口）公共模組的作用和他類似，公共部分會被緩存，所有應用程式都可以利用快取內容來提高效能。
分離第三方函式庫就能利用瀏覽器換快取了麼？
同樣顯而易見是否定的，導致無法利用快取的因素有很多，例如最明顯的有可能你每次分離的庫檔案重新打包都會得到不同的名稱，這個比較容易發現，再比如說後台的同事給js檔案設定的快取過期時間為0，這就尷尬了，但0就不能利用快取了麼？並不是，只要文件是完全不變的，注意是完全不變，包括修改時間，還是會利用緩存，性能飛起。想利用快取必須先了解緩存，這裡簡單提一下：
瀏覽器快取機制是什麼樣的？
HTTP1.1給的策略是使用Cache-control配合Etag，
Cache-control設定範例：
'Cache-Control': 'public, max-age=600'，
max-age即過期時間，如果已過期的話，也會查看Etag，
ETag的值：
Apache中，ETag的值預設是對檔案的索引節（INode），大小（Size）和最後修改時間（MTime）進行Hash後得到的。
如果Etag相同，依然不會請求新資源，而會使用先前的文件。
CommonsChunkPlugin 到底是用來做什麼的？
字面理解，提取公共包，公共包那就是不只一個地方使用嘍，單頁應用（單入口）的庫只有他自己使用，不能算公共包吧？這個插件提取的公共包，每次是會重新打包的（Etag會不同），無論是節約打包時間，（雖然微不足道的時間但畢竟是無用功：庫根本沒變麼），還是對瀏覽器緩存的利用（萬一max-age 過期了你就放棄快取了麼？）都不是好的方案。最佳方案浮出水面：DllPlugin
DllPlugin有什麼優點？
只對庫檔案打包一次。也就是說，只要庫文件不變，只需要打包一次，以後再打包業務代碼和庫文件沒關係啦，這樣一來真正做到了庫文件永遠是那個庫文件，只要庫文件不變，緩存永遠有效（ Etag不變），打起包包來把庫丟到腦後，神清氣爽。介紹最簡單的使用方式：
先寫一個webpack 設定文件，畢竟是單獨打包庫了，假設webpack.config.dll.js

const path = require('path')const webpack = require('webpack');module.exports = {
  entry: {vendor: ['react', 'react-dom', 'react-hot-loader', 'immutable', 'redux', 'react-redux', 'react-router-dom', 'redux-logger',  'redux-persist', 'redux-persist-transform-immutable', 'redux-thunk'],
  },
  output: {filename: 'js/[name].js',path: path.resolve(__dirname, 'public'),library: '[name]', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下，注意与DllPlugin的name参数保持一致
  },
  plugins: [new webpack.DllPlugin({  path: path.resolve(__dirname, 'public/manifest.json'), // 本Dll文件中各模块的索引，供DllReferencePlugin读取使用  name: '[name]',}),
  ],}

在原來的設定檔中加入DllReferencePlugin 外掛程式

new webpack.DllReferencePlugin({  manifest: require('./public/manifest.json'), // 指定manifest.json  name: 'vendor',  // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下，注意与DllPlugin的name参数保持一致}),

終端先執行：
##webpack -p --progress --config ./webpack.config.dll.js把庫檔先打個包，只要函式庫不變，以後就用這個包了，再打包業務碼，完活。

推薦策略：各行其是。
如果是單頁應用，那隻用DllPlugin打包庫檔案即可，業務代碼一個包搞定。
如果是多頁應用，DllPlugin打包完庫文件，開發時可能會用很多公共的業務代碼而且可能隨時變動，這就要利用CommonsChunkPlugin來做他本該做的事，再把公共業務提取出來，至於緩存，起碼在頁間切換時，公共部分還是會被緩存的。

以上是為什麼要分離第三方函式庫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！