webpack優(yōu)化之代碼分割與公共代碼提取詳解
前言
開發(fā)多頁應(yīng)用的時候,如果不對webpack打包進(jìn)行優(yōu)化,當(dāng)某個模塊被多個入口模塊引用時,它就會被打包多次(在最終打包出來的某幾個文件里,它們都會有一份相同的代碼)。當(dāng)項目業(yè)務(wù)越來越復(fù)雜,打包出來的代碼會非常冗余,文件體積會非常龐大。大體積文件會增加編譯時間,影響開發(fā)效率;如果直接上線,還會拉長請求和加載時長,影響網(wǎng)站體驗。作為一個追求極致體驗的攻城獅,是不能忍的。所以在多頁應(yīng)用中優(yōu)化打包尤為必要。那么如何優(yōu)化webpack打包呢?
一、概念
在一切開始前,有必要先理清一下這三個概念:
- module: 模塊,在webpack眼里,任何可以被導(dǎo)入導(dǎo)出的文件都是一個模塊。
- chunk: chunk是webpack拆分出來的:
- 每個入口文件都是一個chunk
- 通過 import、require 引入的代碼也是
- 通過 splitChunks 拆分出來的代碼也是
- bundle: webpack打包出來的文件,也可以理解為就是對chunk編譯壓縮打包等處理后的產(chǎn)出。
二、問題分析
首先,簡單分析下,我們剛才提到的打包問題:
- 核心問題就是:多頁應(yīng)用打包后代碼冗余,文件體積大。
- 究其原因就是:相同模塊在不同入口之間沒有得到復(fù)用,bundle之間比較獨立。
弄明白了問題的原因,那么大致的解決思路也就出來了:
- 我們在打包的時候,應(yīng)該把不同入口之間,共同引用的模塊,抽離出來,放到一個公共模塊中。這樣不管這個模塊被多少個入口引用,都只會在最終打包結(jié)果中出現(xiàn)一次。——解決代碼冗余。
- 另外,當(dāng)我們把這些共同引用的模塊都堆在一個模塊中,這個文件可能異常巨大,也是不利于網(wǎng)絡(luò)請求和頁面加載的。所以我們需要把這個公共模塊再按照一定規(guī)則進(jìn)一步拆分成幾個模塊文件?!獪p小文件體積。
- 至于如何拆分,方式因人而異,因項目而異。我個人的拆分原則是:
- 業(yè)務(wù)代碼和第三方庫分離打包,實現(xiàn)代碼分割;
- 業(yè)務(wù)代碼中的公共業(yè)務(wù)模塊提取打包到一個模塊;
- 第三方庫最好也不要全部打包到一個文件中,因為第三方庫加起來通常會很大,我會把一些特別大的庫分別獨立打包,剩下的加起來如果還很大,就把它按照一定大小切割成若干模塊。
optimization.splitChunks
webpack提供了一個非常好的內(nèi)置插件幫我們實現(xiàn)這一需求:CommonsChunkPlugin。不過在 webpack4 中CommonsChunkPlugin被刪除,取而代之的是optimization.splitChunks, 所幸的是optimization.splitChunks更強(qiáng)大!
三、 實現(xiàn)
通過一個多頁應(yīng)用的小demo,我們一步一步來實現(xiàn)上述思路的配置。
demo目錄結(jié)構(gòu):
|--public/
| |--a.html
| |--index.html
|--src/
| |--a.js
| |--b.js
| |--c.js
| |--index.js
|--package.json
|--webpack.config.js
代碼邏輯很簡單,index模塊中引用了 a 和 b 2個模塊,a 模塊中引用了 c 模塊和 jquery庫,b 模塊中也引用了 c 模塊和 jquery 庫,c 是一個獨立的模塊沒有其他依賴。
index.js代碼如下:
//index.js import a from './a.js'; import b from './b.js'; function fn() { console.log('index-------'); } fn();
a.js代碼如下:
//a.js require('./c.js'); const $ = require('jquery') function fn() { console.log('a-------'); } module.exports = fn();
b.js代碼如下:
//b.js require('./c.js'); const $ = require('jquery') function fn() { console.log('b-------'); } module.exports = fn();
c.js代碼如下:
//c.js function fn() { console.log('c-------'); } module.exports = fn();
1. 基本配置
webpack先不做優(yōu)化,只做基本配置,看看效果。項目配置了2個入口,搭配html-webpack-plugin實現(xiàn)多頁打包:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { index: './src/index.js', a: './src/a.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html' }), new HtmlWebpackPlugin({ template: './public/a.html', filename: 'a.html' }) ] }
在開發(fā)模式下運行webpack:
可以看到,打包出兩個html和兩個體積很大的(300多K)的文件a.js,index.js。
進(jìn)入dist目錄檢查js文件:
- a.js里包含c模塊代碼和jquery代碼
- index.js里包含a模塊、b模塊、c模塊和jquery代碼
看,同樣的代碼c和jquery被打包了2遍。
2. 初步添加splitChunks優(yōu)化配置
首先解決相同代碼打包2次的問題,我們需要讓webpack把c和jquery提取出來打包為公共模塊。
在webpack配置文件添加splitChunks:
//webpack.config.js optimization: { splitChunks: { cacheGroups: { default: { name: 'common', chunks: 'initial' } } } }
- cacheGroups
- cacheGroups是splitChunks配置的核心,對代碼的拆分規(guī)則全在cacheGroups緩存組里配置。
- 緩存組的每一個屬性都是一個配置規(guī)則,我這里給他的default屬性進(jìn)行了配置,屬性名可以不叫default可以自己定。
- 屬性的值是一個對象,里面放的我們對一個代碼拆分規(guī)則的描述。
- name
- name:提取出來的公共模塊將會以這個來命名,可以不配置,如果不配置,就會生成默認(rèn)的文件名,大致格式是index~a.js這樣的。
- chunks
- chunks:指定哪些類型的chunk參與拆分,值可以是string可以是函數(shù)。如果是string,可以是這個三個值之一:all, async, initial,all 代表所有模塊,async代表只管異步加載的, initial代表初始化時就能獲取的模塊。如果是函數(shù),則可以根據(jù)chunk參數(shù)的name等屬性進(jìn)行更細(xì)致的篩選。
再次打包:
可以看到a.js,index.js從300多K減少到6點幾K。同時增加了一個common.js文件,并且兩個打包入口都自動添加了common.js這個公共模塊:
進(jìn)入dist目錄,依次查看這3個js文件:
- a.js里不包含任何模塊的代碼了,只有webpack生成的默認(rèn)代碼。
- index.js里同樣不包含任何模塊的代碼了,只有webpack生成的默認(rèn)代碼。
- common.js里有a,b,c,index,jquery代碼。
發(fā)現(xiàn),提是提取了,但是似乎跟我們預(yù)料的不太一樣,所有的模塊都跑到common.js里去了。
這是因為我們沒有告訴webpack(splitChunks)什么樣的代碼為公共代碼,splitChunks默認(rèn)任何模塊都會被提取。
- minChunks
splitChunks是自帶默認(rèn)配置的,而緩存組默認(rèn)會繼承這些配置,其中有個minChunks屬性:
- 它控制的是每個模塊什么時候被抽離出去:當(dāng)模塊被不同entry引用的次數(shù)大于等于這個配置值時,才會被抽離出去。
- 它的默認(rèn)值是1。也就是任何模塊都會被抽離出去(入口模塊其實也會被webpack引入一次)。
我們上面沒有配置minChunks,只配置了name和chunk兩個屬性,所以minChunks的默認(rèn)值 1 生效。也難怪所有的模塊都被抽離到common.js中了。
優(yōu)化一下,在緩存組里配置minChunks覆蓋默認(rèn)值:
//webpack.config.js optimization: { splitChunks: { cacheGroups: { default: { name: 'common', chunks: 'initial', minChunks: 2 //模塊被引用2次以上的才抽離 } } } }
然后運行webpack
可以看到有2個文件的大小發(fā)生了變化:common.js由314K減小到311K,index.js由6.22K增大到7.56K。
進(jìn)入dist目錄查看:
a.js里依然不包含任何模塊的代碼(正常,因為a作為模塊被index引入了一次,又作為入口被webpack引入了一次,所以a是有2次引用的)。
- index.js里出現(xiàn)了b和index模塊的代碼了。
- common.js里只剩a,c,和jquery模塊的代碼。
- 現(xiàn)在我們把共同引用的模塊a, c, jquery,從a和index這兩個入口模塊里抽取到common.js里了。有點符合我們的預(yù)期了。
3. 配置多個拆分規(guī)則
3.1 實現(xiàn)代碼分離,拆分第三方庫
接下來,我希望公共模塊common.js中,業(yè)務(wù)代碼和第三方模塊jquery能夠剝離開來。
我們需要再添加一個拆分規(guī)則。
//webpack.config.js optimization: { splitChunks: { minSize: 30, //提取出的chunk的最小大小 cacheGroups: { default: { name: 'common', chunks: 'initial', minChunks: 2, //模塊被引用2次以上的才抽離 priority: -20 }, vendors: { //拆分第三方庫(通過npm|yarn安裝的庫) test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'initial', priority: -10 } } } }
我給cacheGroups添加了一個vendors屬性(屬性名可以自己取,只要不跟緩存組下其他定義過的屬性同名就行,否則后面的拆分規(guī)則會把前面的配置覆蓋掉)。
- minSize
minSize設(shè)置的是生成文件的最小大小,單位是字節(jié)。如果一個模塊符合之前所說的拆分規(guī)則,但是如果提取出來最后生成文件大小比minSize要小,那它仍然不會被提取出來。這個屬性可以在每個緩存組屬性中設(shè)置,也可以在splitChunks屬性中設(shè)置,這樣在每個緩存組都會繼承這個配置。這里由于我的demo中文件非常小,為了演示效果,我把minSize設(shè)置為30字節(jié),好讓公共模塊可以被提取出來,正常項目中不用設(shè)這么小。
- priority
priority屬性的值為數(shù)字,可以為負(fù)數(shù)。作用是當(dāng)緩存組中設(shè)置有多個拆分規(guī)則,而某個模塊同時符合好幾個規(guī)則的時候,則需要通過優(yōu)先級屬性priority來決定使用哪個拆分規(guī)則。優(yōu)先級高者執(zhí)行。我這里給業(yè)務(wù)代碼組設(shè)置的優(yōu)先級為-20,給第三方庫組設(shè)置的優(yōu)先級為-10,這樣當(dāng)一個第三方庫被引用超過2次的時候,就不會打包到業(yè)務(wù)模塊里了。
- test
test屬性用于進(jìn)一步控制緩存組選擇的模塊,與chunks屬性的作用有一點像,但是維度不一樣。test的值可以是一個正則表達(dá)式,也可以是一個函數(shù)。它可以匹配模塊的絕對資源路徑或chunk名稱,匹配chunk名稱時,將選擇chunk中的所有模塊。我這里用了一個正則/[\\/]node_modules[\\/]/來匹配第三方模塊的絕對路徑,因為通過npm或者yarn安裝的模塊,都會存放在node_modules目錄下。
運行一下webpack:
可以看到新產(chǎn)生了一個叫vendor.js的文件(name屬性的值),同時common.js文件體積由原來的311k減少到了861bytes!
進(jìn)入dist目錄,檢查js文件:
- a.js里不包含任何模塊代碼。
- common.js只包含a和c模塊的代碼。
- index.js只包含b和index模塊的代碼。
- vendor.js只包含jquery模塊的代碼。
現(xiàn)在,我們在上一步的基礎(chǔ)上,成功從common.js里把第三方庫jquery抽離出來放到了vendor.js里。
3.2 拆分指定文件
如果我們還想把項目中的某一些文件單獨拎出來打包(比如工程本地開發(fā)的組件庫),可以繼續(xù)添加拆分規(guī)則。比如我的src下有個locallib.js文件要單獨打包,假設(shè)a.js中引入了它。
//a.js require('./c.js'); require('./locallib.js'); //引入自己本地的庫 const $ = require('jquery') function fn() { console.log('a-------'); } module.exports = fn();
可以這么配置:
//webpack.config.js optimization: { splitChunks: { minSize: 30, //提取出的chunk的最小大小 cacheGroups: { default: { name: 'common', chunks: 'initial', minChunks: 2, //模塊被引用2次以上的才抽離 priority: -20 }, vendors: { //拆分第三方庫(通過npm|yarn安裝的庫) test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'initial', priority: -10 }, locallib: { //拆分指定文件 test: /(src\/locallib\.js)$/, name: 'locallib', chunks: 'initial', priority: -9 } } } }
我在緩存組下又新增了一個拆分規(guī)則,通過test正則指定我就要單獨打包src/locallib.js文件,并且把優(yōu)先級設(shè)置為-9,這樣當(dāng)它被多次引用時,不會進(jìn)入其他拆分規(guī)則組,因為另外兩個規(guī)則的優(yōu)先級都比它要低。
運行webpack打包后:
可以看到新產(chǎn)生了一個locallib.js文件。進(jìn)入dist目錄查看:
- a.js里不包含任何模塊代碼。
- common.js只包含a和c模塊的代碼。
- index.js只包含b和index模塊的代碼。
- vendor.js只包含jquery模塊的代碼。
- locallib.js里只包含locallib模塊的代碼。
現(xiàn)在我們又在上一步的基礎(chǔ)上獨立打包了一個指定的模塊locallib.js。
至此,我們就成功實現(xiàn)了抽離公共模塊、業(yè)務(wù)代碼和第三方代碼剝離、獨立打包指定模塊。
對比一下,優(yōu)化前,打包出來js一共有633KB:
優(yōu)化后,打包出來js一共不到330KB:
優(yōu)化打包后的文件分類清晰,體積比優(yōu)化前縮小了幾乎50%,有點小完美是不是!擊掌!這還只是我舉的一個簡單例子,在實際多頁應(yīng)用中,優(yōu)化力度說不定還不止這么多。
小結(jié)
webpack很強(qiáng)大,以上只是冰山一角,但是只要掌握了上述optimization.splitChunks的核心配置,我們就可以幾乎隨心所欲地按照自己的想法來拆分優(yōu)化代碼控制打包文件了,是不是很酷?玩轉(zhuǎn)代碼拆分,你也可以!
如果覺得這些依然不能滿足你的需求,還想更精(bian)細(xì)(tai)地定制打包規(guī)則,可以到webpack官網(wǎng)查看optimization.splitChunks的更多配置。
歡迎交流~
本文的完整webpack配置和demo源碼可以在這里獲?。?a rel="external nofollow" target="_blank" >https://github.com/yc111/webpack-optimize-demo
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。
相關(guān)文章
在Postman的腳本中如何使用pm對象獲取接口的請求參數(shù)
這篇文章主要介紹了在Postman的腳本中如何使用pm對象獲取接口的請求參數(shù),本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09解決layer.confirm快速點擊會重復(fù)觸發(fā)事件的問題
今天小編就為大家分享一篇解決layer.confirm快速點擊會重復(fù)觸發(fā)事件的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09微信小程序template模板與component組件的區(qū)別和使用詳解
這篇文章主要介紹了微信小程序template模板與component組件的區(qū)別和使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05JS題解leetcode去掉最低工資和最高工資后的工資平均值
這篇文章主要為大家介紹了JS題解leetcode去掉最低工資和最高工資后的工資平均值,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法
這篇文章主要介紹了fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法,分析了問題出現(xiàn)的原因及相關(guān)配置文件設(shè)置技巧,需要的朋友可以參考下2017-03-03