Webpack 2 中一些常見的優化措施

zoomdong 發布于2019-08-20 17:06 / 598人閱讀

摘要：所以我們應該分析業務依賴和路由，盡可能將所有組件的公共依賴提取出來。文件分離文件分離主要是將圖片和從中分離。在生產環境下，可以考慮將圖片和從中分離。

Webpack 2中一些常見的優化措施 分離第三方依賴

在開發環境下, 通常會采取 HMR 模式來提高開發效率. 但一般情況下, 我們只會更改自身的業務文件, 不會去更改第三方的依賴, 但 webpack 在 rebuild 的時候, 依舊會 build 所有的依賴. 因而, 為減少 rebuild 的時間, 我們可以分離第三方依賴, 在項目啟動之前, 將其多帶帶打包和引入.

多進程構建

Webpack的構建過程是單進程的，利用HappyPack可以讓loader對文件進行多進程處理，以此加快rebuild速度

提取公共的依賴模塊

無論是單頁還是多頁應用，在生產環境下，通常都會利用CommonsChunkPlugin插件來提供公共的依賴模塊。但是這種方式會導致兩個問題：1.業務越復雜，第三方依賴會越多，vendor包會越大；2.沒有隔離業務路由組件，所有的路由都可能會去加載vendor，但并不是所有的路由組件都會依賴node_module下的所有模塊。所以我們應該分析業務依賴和路由，盡可能將所有組件的公共依賴提取出來。

文件分離

文件分離主要是將圖片和CSS從js中分離。圖片和CSS都是Webpack需要構建的資源，通過某種配置，圖片可以以base64的方式混淆在js文件中，這會增加最終的bundle文件的大小。在生產環境下，可以考慮將圖片和css從js中分離。

在生產環境下，通過自定義插件，將圖片的本地引用替換為CDN的鏈接

在生產環境下，通過ExtractTextPlugin來提取CSS

資源混淆和壓縮

Webpack提供的UgligyJS插件由于采用單線程壓縮，速度比較慢，可以使用Prarllel插件進行優化

Gzip壓縮

在生產環境下，如果想進一步減少bundle文件的大小，可以使用Gzip壓縮

按需加載

在單頁應用中，一個應用可能會對應很多路由，每個路由都會對應一個組件；如果將這些組件全部放入一個bundle文件中，會導致最終的bundle文件比較大，因而，我們需要利用Webpack的Code Splitting功能，將代碼進行分割，實現路由的按需加載。

參考文章：https://github.com/dwqs/blog/...

云服務器 GPU云服務器優化專線網絡的措施 vps日常維護中的一些要點總結 js中常見的變量名稱 java的一些代碼

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

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

* 請說出靜態資源請求的優化措施？是否用過“雪碧圖”和iconfont？

摘要：減少請求合并打包小圖標等用代替作為單個節點使用，可以設置大小顏色等，非常便利。前后端分離項目，不論是還是，都有相應的工具包。不過，大部分前端對應該陌生一些，為了實踐技術，用熟悉的即可，真正的項目部署，有專業的實施人員來搞使用緩存減少HTTP請求 CSS/JS 合并打包小圖標等用iconfont代替：作為單個DOM節點使用，可以設置大小、顏色等，非常便利。個人建議前端來維護這個字體包，...

不知名網友 2019-08-30 11:25 評論0 收藏0
拒絕Redux文檔“毒害” 一個項目告訴你Redux最新真正哲學

摘要：之前分享過幾篇關于技術棧的原創文章解析前端架構學習復雜場景數據設計干貨總結打造單頁應用一個項目理解最前沿技術棧真諦一個工程實例今天進一步剖析一個實際案例移動網頁版。目前面臨的問題在于提高產品的各方面性能體驗。之前分享過幾篇關于React技術棧的原創文章：解析Twitter前端架構學習復雜場景數據設計 React Conf 2017 干貨總結1: React + ES next ...

YuboonaZhang 2019-08-22 11:04 評論0 收藏0
Web前端性能優化——如何有效提升靜態文件的加載速度

摘要：在減少文件請求數量方面大致有以下三方面合并腳本文件合并樣式文件合并引用的圖片，使用雪碧圖。和的模塊管理不同，前者是基于靜態的，而后者是動態的。被打包文件的內容也已經被壓縮混淆，減少了加載文件的。作者：劉軼斌，騰訊應用開發工程師商業轉載請聯系騰訊WeTest獲得授權，非商業轉載請注明出處。原文鏈接：http://wetest.qq.com/lab/view/345.html We...

ccj659 2019-08-06 13:25 評論0 收藏0
vue和react的差異

摘要：而中實現原理是利用高階函數通過將多個函數組合成一個可執行執行函數關鍵步驟代碼如下所示。和都是基于更新差異元素。引言平時開發單頁項目應用基于vue,目前另外兩個比較熱的庫還有angular和react,angular 1系列用過,進入公司后由于基于vue技術棧就沒在關注了。一直在關注react,目的不是學習用法,只是為了拓展自己的視野和思維,通過了解一些使用上的差異性,來進一步的思考...

OnlyLing 2019-08-21 17:47 評論0 收藏0