「bundle-compare-analyzer」一個簡單的比較各個版本 bundle.js 大小

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

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

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

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

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

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

例如：

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

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

功能雖小，但確實實用方便 ? ? ?

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88260.html

相關(guān)文章

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

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

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

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

Batkid 2019-08-23 15:21 評論0 收藏0
淺嘗webpack

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

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

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

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

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

Jioby 2019-08-29 16:41 評論0 收藏0