webpack的優化

hatlonely 發布于2019-08-26 11:47 / 3116人閱讀

摘要：優化在我們構建單頁面應用或封裝插件時很大機會用到這個的打包工具但項目代碼日益增多時一些簡單的配置會暴露種種弊端打包時間長代碼大以下是結合自身開發和學習過程解決問題的總結打包時間長很多人都知道這個插件是用來提取公共庫的但這個插件也解決不了公共

webpack優化

在我們構建單頁面應用(vue, React)或封裝插件時,很大機會用到webpack,這個JavaScript的打包工具.
但項目代碼日益增多時,webpack一些簡單的配置會暴露種種弊端(打包時間長,代碼大).
以下是結合自身開發和學習webpack過程解決問題的總結.

打包時間長 DllPlugin

很多人都知道webpack.optimize.CommonsChunkPlugin這個插件是用來提取公共庫的,但這個插件也解決不了公共庫重復打包的問題.
然而,DllPlugin這個插件就可以解決.
這個插件會先把公共庫打包.
它自己擁有獨立的webpack配置文件,配置文件入口處是需要打包的公共庫.
當它打包完后,會生成公共的js包和manifest.json.
manifest.json是用來讓主配置文件DLLReferencePlugin映射到相關的依賴上去的

devtool cheap-module-eval-source-map

當我們使用webpack打包后的代碼都經過編譯的,所以變得難以調試.
所以webpack給了devtool的api,會通過Source Map找出出錯的正確位置.
選擇devtool的cheap-module-eval-source-map原因是,每個模塊使用eval()大幅提高持續構建效率和沒有生成列映射節省構建時間(瀏覽器引擎會自動給出列信息).

性能優化 樣式的分離與壓縮

使用extract-text-webpack-plugin將各個腳本里的樣式提取到出來.
如果設置allChunks: true會使提取出來的樣式合并到一個文件.
使用optimize-css-assets-webpack-plugin將樣式進行壓縮.

腳本的壓縮

使用uglifyjs-webpack-plugin將腳本進行壓縮.

js性能優化

webpack每個模塊都會放入一個閉包函數中.
使用webpack.optimize.ModuleConcatenationPlugin會將相關聯的模塊放入一個閉包里.
從而減少閉包的數量.

提取公共代碼

使用DllPlugin或webpack.optimize.CommonsChunkPlugin會將公共的代碼提取出來打包到其他文件.
避免重復打包,從而減少包的大小.

服務器預壓縮

當服務開啟預壓縮時.
會優先獲取以文件名稱加.gz結尾的文件,這份文件是壓縮過后的文件,體積會小.
使用CompressionWebpackPlugin會生成對應壓縮文件.

GPU云服務器云服務器 webpack的作用 webpack的cdn 鎖的優化網站的優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107560.html

淺談webpack4.0 性能優化

摘要：中在性能優化所做的努力，也大抵圍繞著這兩個大方向展開。因此，將依賴模塊從業務代碼中分離是性能優化重要的一環。大型庫是否可以通過定制功能的方式減少體積。這又違背了性能優化的基礎。接下來可以抓住一些細節做更細的優化。中，為默認啟動這一優化。前言：在現實項目中，我們可能很少需要從頭開始去配置一個webpack 項目，特別是webpack4.0發布以后，零配置啟動一個項目成為一種標配。正因為...

leanxi 2019-08-26 13:25 評論0 收藏0
webpack打包分析與性能優化

摘要：打包分析與性能優化背景在去年年末參與的一個項目中，項目技術棧使用，生產環境全量構建將近三分鐘，項目業務模塊多達數百個，項目依賴數千個，并且該項目協同前后端開發人員較多，提高構建效率，成為了改善團隊開發效率的關鍵之一。 webpack打包分析與性能優化背景在去年年末參與的一個項目中，項目技術棧使用react+es6+ant-design+webpack+babel，生產環境全量構建將...

joy968 2019-08-20 14:21 評論0 收藏0
webpack 使用優化（一）

摘要：原因就是默認會把最重要的東西放到公共里，這里面包含啟動應用程序的依賴項模塊與模塊的依賴關系以及文件的版本號等信息。之前寫了一篇關于webpack 如何使用的文章：webpack 單頁面應用實戰，并且寫了一個單頁面應用的小項目放到了github上。正巧公司前段時間用webpack 做了一個項目，項目不大，是基于單頁面應用的。但是上線后才發現了一些問題，原來還是有一些要優化改進的地方...

Caicloud 2019-08-20 10:28 評論0 收藏0
webpack 基礎與項目優化實踐總結

摘要：前言本文基于，主要涉及基本概念基本配置和實際項目打包優化。關于概念方面參考官網，常用配置來自于網絡資源，在文末有相關參考鏈接，實踐部分基于自己的項目進行優化配置。同一文件中，修改某個影響其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實際項目打包優化。關于概念方面參考官網，常用配置來自于網絡資源，在文末有相關參考鏈接，實踐部分基于自己的項目進行...

Scorpion 2019-08-23 18:15 評論0 收藏0
【Vue項目總結】webpack常規打包優化方案

摘要：由于新建項目發版打包時間大概需要分鐘，發版時嚴重拖慢下班時間，所以特意查看了相關文檔來優化打包速度，爭取早點下班，。分析打包文件要優化，先分析。由于新建項目發版打包時間大概需要30分鐘，發版時嚴重拖慢下班時間，所以特意查看了相關文檔來優化打包速度，爭取早點下班，^_^。分析打包文件要優化，先分析。我們先要知道到底是哪里拖慢我們的打包速度呢？打包后生成文件分析可以利用webpa...

andong777 2019-08-23 17:59 評論0 收藏0