webpack5新參者

動態匯入資料

import 返回值得型別是Promise

// badboy.js
export default function say(){
	console.log('say')
}
export default function speak(){
	console.log('speak')
}

function run() {
	import('./badboy').then(({default: say, speak}) => {
		console.log(say(), speak())
	})
}
run()
// or
async function run() {
	const { default: say, speak } = await import('./badboy')
	console.log(say(), speak())
}
run()

preload/prefetch

預載入和預請求一般在移動端使用比較多，但他們還是有些許不同：

• preload chunk 會在父 chunk 載入時，以並行方式開始載入。prefetch chunk 會在父 chunk 載入結束後開始載入。
• preload chunk 具有中等優先順序，並立即下載。prefetch chunk 在瀏覽器閒置時下載。
• preload chunk 會在父 chunk 中立即請求，用於當下時刻。prefetch chunk 會用於未來的某個時刻。

// 謹慎使用 不然有損效能問題,
import(/* webpackPreload: true */ 'ChartingLibrary')
// 未來繫結的事件
import(/* webpackPrefetch: true */ './path/to/LoginModal.js')

快取

輸出檔案的檔名用 [name].[contenthash].js 主要是contenthash根據檔案的內容去生產的hash值
SplitChunksPlugin可以將模組分到單獨的bundle中，可以將第三方庫提取到一個單獨的vendor chunk中，這樣就可以利用client的長效快取機制，命中快取來清楚請求，減少向server傳送請求的次數同時還保證了client和server程式碼版本一致。

  optimization: {
  	 /**
  	  * 修改檔案導致打包的第三方的chunk的contenthash變化
  	  */
  	 moduleIds: 'deterministic',
     runtimeChunk: 'single',
     splitChunks: {
       cacheGroups: {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
           chunks: 'all',
         }
       }
     }
  },

建立library

// ES2015
import * as webpackLibrary from 'webpack-library'
// Commonjs
const webpackLibrary = require('webpack-library')
// AMD
require(['webpackLibrary'], function (webpackLibrary) {
  // ...
});