一般要優化網站的載入速度可以從快取入手，利用快取可以降低網路流量，減少訪問請求，從而可以達到加快訪問速度的目的.

但是，如果一旦將檔案快取，那麼有更新的時候就不能及時更新，若要看到最新內容，那麼就需要清除快取重新載入，這樣載入速度就會很慢，達不到優化網站載入的目的。

解決的辦法是新增版本號，也可以說是在檔名上加個hash值，如果有更改的檔案，那麼hash值就會有變化，沒有更改的檔案，檔名就不變。有更新的時候就會載入最新更改的檔案，其他沒變動的檔案就利用快取減少沒必要的載入，這樣就可以優化載入速度。

webpack中可以在output的filename輸出檔名中規定檔名帶hash值打包：

output:{
    filename: '[name]-[chunkhash:5].bundle.js',
    path: path.resolve(__dirname,'dist')
}

需要注意的是，這裡可以選hash和chunkhash，它們的使用範疇：

• hash
  1. 使用 hash 對js和css進行簽名時，每一次hash值都不一樣，導致無法利用快取
  2. 原因是因為, hash 欄位是根據每次編譯compilation的內容計算所得，也可以理解為專案總體檔案的hash值，而不是針對每個具體檔案的。(所以每一次編譯都會有一個新的hash，並不適用)
  3. 解決:不用hash，而用 chunkhash (js和css要使用chunkhash)， chunkhash 的話每一個js的模組對應的值是不同的(根據js裡的不同內容進行生成)
     
• chunkhash
  chunkhash只試用與js和css檔案，在圖片和字型資源中，chunkhash會報錯。

然後就是提取模板：大多數時候，我們如果要更新修改只會更新我們的業務邏輯檔案，比如jq/bootstrap等庫我們其實並不會修改。那麼我們就可以把這些第三方庫另外打包。

完整例子：

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    devtool:'source-map',
    plugins:[
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title:'Caching',
            template:'./src/index.html'
        })
    ],
    optimization:{
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: 'initial',
                    minChunks:2,
                    name: 'commons'
                },
                'vendor':{
                    test: /lodash/,
                    chunks: "initial",
                    name: "vendor",
                    enforce: true
                }
            }
        }
    },
    output:{
        filename: '[name]-[chunkhash:5].bundle.js',
        path: path.resolve(__dirname,'dist')
    }
}
 

index.js

import _ from 'lodash';
import Print from './print';

function component(){
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello','2019~'], '--');
    element.onclick = Print.bind(null, 'hello 25! come on!!')

    return element;
}

document.body.appendChild(component());

print.js

export default function print(text){
    console.log(text);
}

最後輸出專案結構：

這裡有需要注意的是，提取模板和分離程式碼這塊，在官方文件中用的是CommonsChunkPlugin外掛，但這個外掛在webpack4版本中已經被廢棄，可用optimization.splitChunks代替。
具體用法可參照官方文件中外掛介紹，和網上的一篇資料有詳細記載：
https://juejin.im/post/5af1677c6fb9a07ab508dabb