webpack獨立打包和緩存處理詳解

2019-11-19 16:56:04

字體：大中小

來源：轉載

供稿：網友

前言

先前寫了一篇webpack入門的文章《webpack入門必知必會》，簡單介紹了webpack拆分、打包、壓縮的使用方法。本文將在上篇文章的基礎上進一步講解在使用webpack構建的項目中存在的優化方案與解決方法。

上篇文章中寫了一份webpack最基本的配置文件來打包壓縮我們的代碼：

var path = require('path');module.exports = { entry: './app/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }}

在入口文件index.js中我們引入了jQuery：

// index.jsvar $ = require('jquery');var str = require('./hello.js');function main() { $('body').html(str);}main();

這樣我們雖然能夠實現代碼的統一打包，將jQuery、index.js、hello.js統統打包到了bundle.js里，但是會存在一個問題：每次打包都會生成一個體積較大的新bundle.js，瀏覽器無法緩存像jQuery這樣的基本不會改動的框架庫代碼文件，影響加載速度。

發現問題我們就來解決問題，我們最終希望的是將像jQuery這樣的框架庫代碼與項目自身的代碼分開打包，生成一個獨立的打包文件，縮減單個文件體積，瀏覽器也不用每次都進行加載。

步驟

1、獨立打包

為了解決上述問題，我們需要修改我們的webpack配置文件：

var webpack = require('webpack');var path = require('path');module.exports = { entry: {  main: './app/index.js',  vendor: ['jquery'] }, output: {  filename: '[name].js',  path: path.resolve(__dirname, 'dist') }, plugins:[  new webpack.optimize.CommonsChunkPlugin({   name: 'vendor'  }), ]}

上方我們將原本的單入口文件改成了多入口文件，并加入了vendor屬性。vendor屬性用于配置打包第三方類庫，寫入數組的類庫名將統一打包到一個文件里。

同時我們將輸出的filename用[name]變量來自動生成文件名，最后我們添加了一個CommonsChunkPlugin的插件，用于提取vendor。

配置完成后我們運行webpack命令：

Hash: ee1daf95c1986768927aVersion: webpack 2.3.2Time: 573ms  Asset  Size Chunks     Chunk Names  main.js 340 bytes  0 [emitted]   mainvendor.js  274 kB  1 [emitted] [big] vendor [0] ./~/jquery/dist/jquery.js 267 kB {1} [built] [1] ./app/hello.js 53 bytes {0} [built] [2] ./app/index.js 114 bytes {0} [built] [3] multi jquery 28 bytes {1} [built]

最終發現我們成功將jQuery打包到了vendor.js中，實現了獨立打包，但是問題又來了：每次打包后生成的文件名都是一樣的，瀏覽器可能緩存上一次的結果而無法加載最新數據。

2、添加hash

為了解決上述問題，我們需要為打包后的文件名添加hash值，這樣每次修改后打包的文件hash值將改變，修改配置文件如下：

module.exports = { ...  output: {   filename: '[name].[chunkHash:5].js',   path: path.resolve(__dirname, 'dist')  }, ...}

上方我們在輸出文件名中增加了[chunkHash:5]變量，表示打包后的文件中加入保留5位的hash值。我們再次運行打包命令：

Hash: c7d1295f2f9a27c412d2Version: webpack 2.3.2Time: 603ms   Asset  Size Chunks     Chunk Names main.2a7ad.js 337 bytes  0 [emitted]   mainvendor.49eb4.js  274 kB  1 [emitted] [big] vendor [0] ./~/jquery/dist/jquery.js 267 kB {1} [built] [1] ./app/hello.js 50 bytes {0} [built] [2] ./app/index.js 114 bytes {0} [built] [3] multi jquery 28 bytes {1} [built]

上方我們發現打包后的文件成功加上了hash值，這樣每次修改文件后hash值也會跟著變，就不怕瀏覽器緩存了，但是當我們嘗試去修改一個js文件后再次打包，問題又來了：vendor.js的hash值也變了，我們并沒有修改jQuery的源碼。

3、修改vendor配置

上述問題產生的原因是因為CommonsChunkPlugin插件是用于提取公共代碼的，上方我們只是提取了vendor作為公共代碼。為了繼續解決上述問題，其實方法很簡單，我們需要修改CommonsChunkPlugin的配置，如下：

module.exports = { ...  plugins:[   new webpack.optimize.CommonsChunkPlugin({    names: ['vendor', 'manifest']   }),  ] ...}

如此我們修改一下hello.js中的代碼，發現vendor的hash值并未改變，并且多了一個manifest.js的小文件。manifest.js為webpack的啟動文件代碼，它會直接影響到hash值，用mainfest單獨抽出來了，這樣vendor的hash就不會變了。

4、生成index.html

通過以上對webpack配置文件的一系列修改，我們成功實現了webpack的獨立打包與緩存處理，但是還差最后一步。

因為我們最終打包后生成的文件名中帶有hash值，每次都是會變的，所以我們不能像目前這樣在index.html中寫死路徑。

index.html

...<body> <script src="./dist/main.js"></script> <script src="./dist/vendor.js"></script> <script src="./dist/manifest.js"></script></body>...

以上寫法是不對的，因為缺少了可變的hash值，因此我們希望每次打包后index.html中的路徑也會自動加上hash值，解決方法如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { ...  plugins:[   ...   new HtmlWebpackPlugin({    title: 'demo',    template: 'index.html' // 模板路徑   }),   ...  ] ...}

上方我們引入了html-webpack-plugin這一個插件，該插件可以幫助我們根據模板生成html文件。在plugins設置中，title配置了生成html中的title部分，template為模板html的路徑地址。

我們需要下載html-webpack-plugin：

npm install html-webpack-plugin --save-dev

安裝和配置完畢后，運行打包命令：webpack

Hash: 0c4b91e206579b31544dVersion: webpack 2.3.2Time: 856ms   Asset  Size Chunks     Chunk Names vendor.e1868.js  268 kB  0 [emitted] [big] vendor main.44412.js 337 bytes  1 [emitted]   mainmanifest.ed186.js 5.81 kB  2 [emitted]   manifest  index.html 292 bytes   [emitted] [0] ./~/jquery/dist/jquery.js 267 kB {0} [built] [1] ./app/hello.js 50 bytes {1} [built] [2] ./app/index.js 114 bytes {1} [built] [3] multi jquery 28 bytes {0} [built]

我們發現在dist目錄下生成了一個index.html文件，打開該文件后代碼如下：

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>demo</title></head><body><script type="text/javascript" src="manifest.ed186.js"></script><script type="text/javascript" src="vendor.e1868.js"></script><script type="text/javascript" src="main.44412.js"></script></body></html>

至此我們實現了每次打包后index.html中的路徑也會自動加上hash值的功能，因此dist目錄下的index.html即為以后的首頁文件，最后我們在瀏覽器中打開該文件成功顯示：