「bundle-compare-analyzer」一個(gè)簡(jiǎn)單的比較各個(gè)版本 bundle.js 大小

Ocean 發(fā)布于2019-08-21 15:49 / 1010人閱讀

摘要：最近在做的多個(gè)項(xiàng)目里，都會(huì)涉及到的打包分析與性能優(yōu)化。在優(yōu)化前，記錄各個(gè)文件的體積大小優(yōu)化后，記錄新的各個(gè)體積的大小。專門記錄每次打包文件們的大小信息，它將信息通過(guò)的方式展現(xiàn)在終端上。

最近在做的多個(gè)webpack+react項(xiàng)目里，都會(huì)涉及到webpack的打包分析與性能優(yōu)化。

打包文件體積過(guò)大，優(yōu)化bundle文件更是非常重要。
webpack有很多成熟的方案來(lái)減小打包代碼的大小，如split coding, CommonsChunkPlugin, tree shaking等。這里不再詳細(xì)分析，網(wǎng)上有很多教程。

通常大的項(xiàng)目 bundle JS 都有很多個(gè)打包文件組成，(有可能是分割成了多個(gè)thunk文件，有可能是多入口文件)：

每次優(yōu)化后，我都需要記錄對(duì)比每個(gè)打包文件對(duì)應(yīng)的大小。在優(yōu)化前，記錄各個(gè) bundle JS 文件的體積大小,優(yōu)化后，記錄新的各個(gè) bundle JS體積的大小。

例如：

為了比較對(duì)main.[hash].js體積大小優(yōu)化的成果，我需要記錄main.[hash].js優(yōu)化前和優(yōu)化后的大小。過(guò)了幾天，因?yàn)闃I(yè)務(wù)的需要,我修改了某個(gè)module的代碼，main.[hash].js 的體積大小變化了，如果我還需要對(duì)它做優(yōu)化，我需要繼續(xù)記錄優(yōu)化前優(yōu)化后的大小數(shù)據(jù)。經(jīng)過(guò)幾輪優(yōu)化后，直觀的分析、記錄、對(duì)比這些體積大小數(shù)據(jù)變得非常麻煩。

所有空余時(shí)間，我做了一個(gè)bundle-compare-analyzer工具。專門記錄每次打包文件們的大小信息，它將信息通過(guò)dashboard的方式展現(xiàn)在終端上。
這樣經(jīng)過(guò)多次的優(yōu)化、打包、記錄，我可以直觀的觀察、對(duì)比出每次優(yōu)化后bundle JS的體積大小，不會(huì)再丟失記錄過(guò)的數(shù)據(jù)，分析起來(lái)更加方便。

功能雖小，但確實(shí)實(shí)用方便 ? ? ?

Github地址：https://github.com/lanjinglin...

GPU云服務(wù)器云服務(wù)器版本號(hào)比較大小 webrtc各個(gè)版本的源碼下載 python各個(gè)版本 linux 內(nèi)核各個(gè)版本

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88260.html

相關(guān)文章

webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解

摘要：代碼均放在倉(cāng)庫(kù)給我們帶來(lái)了一些改變。插件以前使用允許我們將公共依賴項(xiàng)提取到現(xiàn)有的或全新的代碼塊中。代碼詳情見(jiàn)文章開(kāi)頭倉(cāng)庫(kù)。這才是配置的關(guān)鍵緩存組會(huì)繼承的配置，但是和只能用于配置緩存組?？梢酝ㄟ^(guò)禁用緩存組。代碼均放在git倉(cāng)庫(kù) Webpack 4給我們帶來(lái)了一些改變。包括更快的打包速度，引入了SplitChunksPlugin插件來(lái)取代（之前版本里的）CommonsChunksPlugin插件...

Zachary 2019-05-23 17:29 評(píng)論0 收藏0
Webpack系列-第一篇基礎(chǔ)雜記

摘要：系列文章系列第一篇基礎(chǔ)雜記系列第二篇插件機(jī)制雜記系列第三篇流程雜記前言公司的前端項(xiàng)目基本都是用來(lái)做工程化的，而雖然只是一個(gè)工具，但內(nèi)部涉及到非常多的知識(shí)，之前一直靠來(lái)解決問(wèn)題，之知其然不知其所以然，希望這次能整理一下相關(guān)的知識(shí)點(diǎn)。系列文章 Webpack系列-第一篇基礎(chǔ)雜記 Webpack系列-第二篇插件機(jī)制雜記 Webpack系列-第三篇流程雜記前言公司的前端項(xiàng)目基本都是用...

Batkid 2019-08-23 15:21 評(píng)論0 收藏0
淺嘗webpack

摘要：用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。將基礎(chǔ)模塊打包進(jìn)動(dòng)態(tài)鏈接庫(kù)，當(dāng)依賴的模塊存在于動(dòng)態(tài)鏈接庫(kù)中時(shí)，無(wú)需再次打包，而是直接從動(dòng)態(tài)鏈接庫(kù)中獲取。負(fù)責(zé)打包出動(dòng)態(tài)鏈接庫(kù)，負(fù)責(zé)從主要配置文件中引入插件打包好的動(dòng)態(tài)鏈接庫(kù)文件。告一段落，淺嘗輒止。吐槽一下 webpack 自出現(xiàn)時(shí)，一直備受青睞。作為強(qiáng)大的打包工具，它只是出現(xiàn)在項(xiàng)目初始或優(yōu)化的階段。如果沒(méi)有參與項(xiàng)目的構(gòu)建，接觸的機(jī)會(huì)幾乎為零。即使是參與了...

villainhr 2019-08-26 13:50 評(píng)論0 收藏0
用WEB技術(shù)棧開(kāi)發(fā)NATIVE應(yīng)用（二）：WEEX 前端SDK原理詳解

摘要：依舊采取傳統(tǒng)的開(kāi)發(fā)技術(shù)棧進(jìn)行開(kāi)發(fā)，同時(shí)在終端的運(yùn)行體驗(yàn)不輸。首先來(lái)看下前端開(kāi)發(fā)框架目前與構(gòu)成了三大最流行的前端開(kāi)發(fā)框架，具有組件化以及三大特性，還學(xué)習(xí)的，引入了狀態(tài)管理模塊。摘要： WEEX依舊采取傳統(tǒng)的web開(kāi)發(fā)技術(shù)棧進(jìn)行開(kāi)發(fā)，同時(shí)app在終端的運(yùn)行體驗(yàn)不輸native app。其同時(shí)解決了開(kāi)發(fā)效率、發(fā)版速度以及用戶體驗(yàn)三個(gè)核心問(wèn)題。那么WEEX是如何實(shí)現(xiàn)的？目前WEEX已經(jīng)完全開(kāi)...

ls0609 2019-08-22 15:00 評(píng)論0 收藏0
Webpack4教程 - 第二部分，使用loader處理scss,圖片以及轉(zhuǎn)換JS

摘要：它將包括如何處理圖片以及對(duì)老版本的語(yǔ)言的轉(zhuǎn)換。添加使用最好的方式是在文件中指定它們。而相反，文件被轉(zhuǎn)換為了。它允許你使用轉(zhuǎn)譯文件。此外，我們還學(xué)習(xí)如何使用處理圖片。在教程未來(lái)的部分，我們會(huì)深入到中，包括寫(xiě)一個(gè)我們自己的。轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開(kāi)發(fā)者提供專業(yè)的開(kāi)發(fā)工具、解決方案和服務(wù)，賦能開(kāi)發(fā)者。今天繼續(xù)我們的Webpack 4入門教程。在介紹了Webpack的基本概...

Jioby 2019-08-29 16:41 評(píng)論0 收藏0