webpack 使用優化（一）

Caicloud 發布于2019-08-20 10:28 / 2519人閱讀

摘要：原因就是默認會把最重要的東西放到公共里，這里面包含啟動應用程序的依賴項模塊與模塊的依賴關系以及文件的版本號等信息。

之前寫了一篇關于webpack 如何使用的文章：webpack 單頁面應用實戰，并且寫了一個單頁面應用的小項目放到了github上。正巧公司前段時間用webpack 做了一個項目，項目不大，是基于單頁面應用的。但是上線后才發現了一些問題，原來還是有一些要優化改進的地方。

webpack 單頁面應用實戰這篇文章基本已經滿足了我們的需求。比如以下功能我們都已經實現：

將css從js中分離出來

使用loader加載css、圖片等

使用插件生成html以便自動引用變更版本號的文件

配置公共js

js文件按需加載

配置開發環境

壓縮js、css、html

給css、js、圖片、字體等添加版本號

編譯后自動打開瀏覽器

熱替換

使用代理結合后端服務開發

編譯時區分開發環境、生產環境、熱替換環境

config 文件的合并

清空發布目錄

看似不錯，好像都已經實現了，但是具體到生產環境時還是有問題的。下面有幾處優化（下面還是結合這個項目）。

優化-公共js版本號會變化的問題

這個問題在項目上線之前我沒有發現，上線以后，有一次需求變化，我在改變其他js文件的時候，然后打包發布發現公共js的版本號發生了改變，最后檢查下來，的確是公共js的內容發生了變化，所以對應的版本號發生了變化。原因就是webpack默認會把最重要的東西放到公共js里，這里面包含webpack啟動應用程序的依賴項、模塊與模塊的依賴關系、以及文件的版本號等信息。所以一旦任意的js文件發生改變都會體現在公共js上。比如我們通過webpack構建后生成這樣的文件：

再看下common.js 里大致包含什么內容（截取一小部分）：

公共js版本號會變的問題在 github 上討論了一段時間（點擊這里），只不過之前沒注意。有人用 webpack-md5-hash 插件實現了，但是感覺比較麻煩，最終還是感覺webpack 的貢獻者實現的這種方式很簡單，并且不需要額外的插件，在新版本的webpack中融合的很好。但是提供的這個demo太簡單，在項目中我們還是要注意一些問題的。比如使用‘熱替換’時就會報錯。所以我們要做一些改變，我們只需要將之前配置公共js的地方：

// webpack.config.js
...
plugins:[
    // 會把 ‘entry’ 定義的 common 對應的兩個js 打包為 ‘common.js’
    new webpack.optimize.CommonsChunkPlugin("common", "js/[name].js", Infinity),
]
...

改為：

// webpack.config.js
...
 new webpack.optimize.CommonsChunkPlugin(
        devServer ?
        {name: "common", filename: "js/common.js"}:
        {names: ["common", "webpackAssets"]}
    ),
...

注意： ‘devServer’ 是一個標識變量，代表‘熱替換’ ，如有疑惑看上一篇配置變量標識

改成這種設置以后，當時熱替換模式的時候不對common.js做處理，如果是開發模式或者發布模式，會從common.js中將各個文件的版本號以及其他重要信息抽出來，放到‘webpackAssets.js’文件中（名稱可以自定義）。生成的文件如下，會多出一個文件，這個文件只有幾kb：

改成這種做法后，一旦其他的文件發生改變，都會在webpackAssets.js文件中得到體現，項目的發布升級，只要額外的將這個文件升級上去即可，而不用將公共js升級上去。這樣的優化會非常有利于處理緩存的問題。

優化-設置模塊目錄

如果項目小不設置webpack請求的模塊目錄沒關系，但是一般項目越來越大，webpack會查找很多無用的文件，這時候設置模塊目錄很有必要性，可以提高webpack編譯的速度。即設置 resolve.root 屬性。還有一個屬性是 moduleDirectories，這兩個的區別可以點這里。resolve.root 接收的參數是 node_modules 文件加的絕對路徑。我們在之前的webpack.config.js 中增加這個配置項：

// webpack.config.js
...
resolve：{
    root: [
        path.resolve("./node_modules")
    ],
    ...
}
...

這樣設置后，webpack編譯速度會大大加快，不會每個文件夾都搜索一遍。

GPU云服務器云服務器 webpack使用 webpack 使用公用cdn 實驗一云服務器的基本使用 webpack

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80167.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優化，原文廣告模態框遮擋，閱讀體驗不好，所以整理成本文，方便查找。 ...

ChanceWong 2019-08-22 17:34 評論0 收藏0
webpack 基礎與項目優化實踐總結

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

Scorpion 2019-08-23 18:15 評論0 收藏0
Webpack 最佳實踐總結(一)

摘要：它會代替所有的實例的值為，從而使知道那些判斷表達式總是錯誤的，從而刪除相關代碼，進一步壓縮打包文件模塊機制項目中使用的，通過也能通過打包有用的代碼，進一步減少大小。好久沒寫文章，這次預計會帶來3篇的 Webpack 系列文章，將會在這幾天內更新完。 Webpack3 自今年6月20日正式發布而來，給我們帶來Scope Hoisting和Magic Comments兩大功能，可惜不在這...

jubincn 2019-08-21 12:00 評論0 收藏0