webpack 與 瀏覽器緩存

我們先在項目中加入 jquery 與 lodash 庫。

然後在index.js 中引入並使用,如下。

import _ from 'lodash'
import  $ from 'jquery'

const dom = $('<div>')
dom.html(_.join(['hello', 'world'], ' '))

$('body').append(dom)

然後打包。這裏我們先把sourcemap 文件去掉,即註釋掉webpack 配置項中的 devtool,如下:

devtool: "cheap-module-source-map",

然後,打包生成的文件就如下。(vendors 中保存的是node_module中的代碼,參考前面splitChunks 文章,splitChunks 默認配置項cacheGroups )

當我們運行頁面時,第一次訪問這些文件是從後端請求的,但普通頁面刷新的話,第二次訪問這些文件,就是從瀏覽器的緩存中獲取了,因爲他們的HTTP請求是GET,GET 會默認存入緩存。

但是當我們對這些代碼稍有修改的話,但是它的文件名不變,那麼如果命中緩存的話,那麼加載的還是老的代碼,這是不符合我們的需求滴。

我們在這裏可以引入:content hash 。(當然在開發模式下,我們有了模塊熱更新,是不需要的,但是上線的代碼中是很有必要的)。我們配置content hash 也很簡單,如下。其中contenthash 與name 一樣都是佔位符。

  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].chunk.[contenthash].js',
    path: path.resolve(__dirname, 'bundle')
  },

contenthash 是根據文件數據生成的hash,當這個文件的代碼不變時,hash碼 是不會變的。如下是打包後結果

這樣就解決了代碼改變,確保不會使用緩存中老文件的問題了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章