分離打包外掛

• SplitChunksPlugin

使用webpack4.xx提供的SplitChunksPlugin，廢棄了webpack3.xx中的CommonsChunkPlugin，CommonsChunkPlugin導致的主要問題是產出的chunk在引入時會產生重複的程式碼，無法優化非同步chunk，高優的chunk產出需要的minchunks配置比較複雜，而SplitChunksPlugin能夠解決掉CommonsChunkPlugin中所出現的問題。SplitChunksPlugin在production模式下是預設開啟的，但是它預設只作用於非同步chunk，如果要作用於入口chunk的話，需要配置optimization.splitChunks.chunks: "all"

1. 新產出的vendor-chunk是要被共享的，或者模組來自npm包；
2. 新產出的vendor-chunk的大小得大於30kb；
3. 並行請求vendor-chunk的數量不能超出5個；
4. 對於entry-chunk而言，並行載入的vendor-chunk不能超出3個。

這些限制可以在SplitChunks的預設配置項中可以一一對應的看到。

splitChunks: {
	chunks: "async",
	minSize: 30000,
	minChunks: 1,
	maxAsyncRequests: 5,
	maxInitialRequests: 3,
	name: true,
	cacheGroups: {
		default: {
			minChunks: 2,
			priority: -20
			reuseExistingChunk: true,
		},
		vendors: {
			test: /[\\/]node_modules[\\/]/,
			priority: -10
		}
	}
}

其實不難理解這些限制，因為SplitChunksPlugin產生的結果就是原來chunk被拆分了，引入的檔案數量會變多，因此需要在檔案數量上進行限制。

• runtimeChunkPlugin

在使用CommonsChunkPlugin的時候，我們通常會把webpack runtime的基礎函式提取出來，單獨作為一個chunk，畢竟code splitting想把不變的程式碼單獨抽離出來，方便瀏覽器快取，提升載入速度。webpack4廢棄了CommonsChunkPlugin，採用了runtimeChunkPlugin可以將每個entry chunk中的runtime部分的函式分離出來，只需要一個簡單的配置：optimization.runtimeChunk: true

檔案快取

我們每次在更新程式碼重新部署時，會出現一個問題，就是沒有看到我們最新更改的內容，常規的操作是清除瀏覽器快取，重新重新整理下瀏覽器，這時我們看到了最新的更新內容。之所以存在這種問題是因為我們沒有給檔案新增hash值，這裡說明一下hash與chunkhash的不同，hash會每次都會更新，而chunkhash是根據你的檔案內容是否有變化去更新，優點是不需要每次從服務端拉取資源，可以有效利用瀏覽器快取，提高頁面載入速度。具體實現程式碼如下：

   configureWebpack: config => {
       
        config.output.chunkFilename = 'js/[name].[chunkhash].js',//給每個js檔案新增chunkhash後會自動更新已經改動的檔案，而沒有改動的檔案則繼續使用快取。
        config.output.filename = '[name].[chunkhash].js'

    },