資訊專欄INFORMATION COLUMN
摘要：最近在做的多個項目里，都會涉及到的打包分析與性能優化。在優化前，記錄各個文件的體積大小優化后，記錄新的各個體積的大小。專門記錄每次打包文件們的大小信息，它將信息通過的方式展現在終端上。
最近在做的多個webpack+react項目里，都會涉及到webpack的打包分析與性能優化。
打包文件體積過大，優化bundle文件更是非常重要。
webpack有很多成熟的方案來減小打包代碼的大小，如split coding, CommonsChunkPlugin, tree shaking等。這里不再詳細分析，網上有很多教程。
通常大的項目 bundle JS 都有很多個打包文件組成，(有可能是分割成了多個thunk文件，有可能是多入口文件)：
每次優化后，我都需要記錄對比每個打包文件對應的大小。在優化前，記錄 各個 bundle JS 文件的體積大小,優化后，記錄新的各個 bundle JS體積的大小。
例如：
為了比較對main.[hash].js體積大小優化的成果，我需要記錄main.[hash].js優化前和優化后的大小。過了幾天，因為業務的需要,我修改了某個module的代碼，main.[hash].js 的體積大小變化了，如果我還需要對它做優化，我需要繼續記錄優化前優化后的大小數據。經過幾輪優化后，直觀的分析、記錄、對比這些體積大小數據變得非常麻煩。
所有空余時間，我做了一個bundle-compare-analyzer工具。專門記錄每次打包文件們的大小信息，它將信息通過dashboard的方式展現在終端上。
這樣經過多次的優化、打包、記錄，我可以直觀的觀察、對比出每次優化后bundle JS的體積大小，不會再丟失記錄過的數據，分析起來更加方便。
功能雖小，但確實實用方便 ? ? ?
Github地址：https://github.com/lanjinglin...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88260.html
摘要：代碼均放在倉庫給我們帶來了一些改變。插件以前使用允許我們將公共依賴項提取到現有的或全新的代碼塊中。代碼詳情見文章開頭倉庫。這才是配置的關鍵緩存組會繼承的配置，但是和只能用于配置緩存組。可以通過禁用緩存組。代碼均放在git倉庫 Webpack 4給我們帶來了一些改變。包括更快的打包速度，引入了SplitChunksPlugin插件來取代（之前版本里的）CommonsChunksPlugin插件...
摘要：系列文章系列第一篇基礎雜記系列第二篇插件機制雜記系列第三篇流程雜記前言公司的前端項目基本都是用來做工程化的，而雖然只是一個工具，但內部涉及到非常多的知識，之前一直靠來解決問題，之知其然不知其所以然，希望這次能整理一下相關的知識點。 系列文章 Webpack系列-第一篇基礎雜記 Webpack系列-第二篇插件機制雜記 Webpack系列-第三篇流程雜記 前言 公司的前端項目基本都是用...
摘要：依舊采取傳統的開發技術棧進行開發，同時在終端的運行體驗不輸。首先來看下前端開發框架目前與構成了三大最流行的前端開發框架，具有組件化以及三大特性，還學習的，引入了狀態管理模塊。 摘要： WEEX依舊采取傳統的web開發技術棧進行開發，同時app在終端的運行體驗不輸native app。其同時解決了開發效率、發版速度以及用戶體驗三個核心問題。那么WEEX是如何實現的？目前WEEX已經完全開...
摘要：它將包括如何處理圖片以及對老版本的語言的轉換。添加使用最好的方式是在文件中指定它們。而相反，文件被轉換為了。它允許你使用轉譯文件。此外，我們還學習如何使用處理圖片。在教程未來的部分，我們會深入到中，包括寫一個我們自己的。 轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。 今天繼續我們的Webpack 4入門教程。在介紹了Webpack的基本概...
閱讀 2516·2021-10-14 09:42
閱讀 1152·2021-09-22 15:09
閱讀 3559·2021-09-09 09:33
閱讀 3039·2021-09-07 09:59
閱讀 3652·2021-09-03 10:34
閱讀 3561·2021-07-26 22:01
閱讀 2839·2019-08-30 13:06
閱讀 1219·2019-08-30 10:48
