剛剛對我們前端項目做了一頓分析優化操作，因為接手時每次構建要花兩分鐘左右的時間，實在忍受不了，只能動手了。通過這次優化，重新溫習了下 webpack 的一些知識。接下來會關于 webpack 展開寫幾篇心得：

• 構建分析
• 開發環境構建優化
• 生產環境構建優化
• webpack 原理淺析
• 如何實現一個簡易版 webpack
• 如何手寫一個 loader 和 plugin

好了，進入主題，本篇主要是介紹開發環境構建優化（包含速度、體積），如何分析可以看我上一篇。

1. 版本升級

現在，我們已經可以安裝最新的 webpack 5 了，不過 v5 還不是正式版本。目前 npm 官網上的最新版本仍然是 v4。由于不是本章重點，后面有機會會詳細闡述，感興趣的可以看下這篇文章了解下，最好能動手玩一玩。

建議更新到最新穩定版本，為什么呢？可以看下官網-構建性能

所以別說 v3 了, webpack4.x 的速度要遠大于 3.x, v4 的小版本也建議更新到最新穩定版。

另外 webpack 版本也會存在導致本地使用 node 高版本跑項目時，報出一些奇奇怪怪的錯誤。像我遇到過一次 webpack v4.6、node v12.16.0 就報錯了。

2. devtool

module

開發環境建議使用 eval-source-map, 這會減少你本地構建的時間。

為什么呢？可以看下官網介紹-devtool，這篇的中文是我負責翻譯的，有覺得不合理的，歡迎留言。

3. resolve

建議配置 alias 和 extensions，同時項目中要使用到 alias，否則配置就毫無意義了。

module

可以看下

• webpack-縮小范圍
• 官網-resolve

4. 避免不必要的 plugin 和優化任務

一些plugin比如壓縮混淆在開發環境是沒有意義的，所以需要寫兩份不同的配置文件，防止這些插件作用在開發環境。

另外需要防止不必要的優化，可以在開發環境把這些都關掉。

module

5. happypack

happypack

在使用 Webpack 對項目進行構建時，會對大量文件進行解析和處理。當文件數量變多之后，Webpack 構件速度就會變慢。由于運行在 Node.js 之上的 Webpack 是單線程模型的，所以 Webpack 需要處理的任務要一個一個進行操作。

而 Happypack 的作用就是將文件解析任務分解成多個子進程并發執行。子進程處理完任務后再將結果發送給主進程。所以可以大大提升 Webpack 的項目構件速度。

這里順帶提一下，在 loader 中最好加上 exclude 和 include 配置，會減少構建時間的。

var

6. 使用 noParse

webpack 打包的時候，有時不需要解析某些模塊的加載(這些模塊并沒有依賴，或者根本沒有模塊化)，我們可以直接加上這個參數，直接跳過這種解析，像 jquery、lodash...

module

7. hard-source-webpack-plugin

hard-source-webpack-plugin

這是用于加載緩存，效果很強。

• 第一次構建將花費正常的時間
• 第二次構建將顯著加快（大概提升90%的構建速度）。

webpack v5 實現了此功能，感興趣的可以下載試試。

var

8. 壓縮 js, html, css 文件

要想優化構建后的體積，不斷減少靜態資源文件的大小，我們希望 webpack 幫助我們盡可能壓縮文件的體積。對于 js 腳本文件而言，webpack4.0 在 mode 為 ‘production’ 時，默認會啟動代碼的壓縮。除此之外，我們需要手動對 html 和 css 進行壓縮。

針對html 的壓縮，只需要對 html-webpack-plugin 進行相關配置。

module

針對 css 的壓縮， webpack4.0 使用 optimize-css-assets-webpack-plugin 來壓縮單獨的 css 文件。

const

9. 合并壓縮圖片

提升性能的一個重要的條件是降低 http 請求數，而應用中經常會有大大小小的圖片需要處理，對應用中的小圖標來說，css sprite 是首選，將各種圖標集合成一張大的圖片可以很好的減少網絡請求數。而對于需要獨立開的圖片，且大小在合理范圍內時，我們可以將圖片轉換成 base64 位編碼，內嵌到css 中，同樣可以減少請求。

處理圖片資源時，webpack 提供了 file-loader 和url-loader 兩個loaders供選擇，file-loader 和url-loader 的作用，可以用來解析項目中圖片文件的url引入問題。兩者的區別在于，url-loader 可以將小于指定字節的文件轉為 DataURL, 大于指定字節 的依舊會使用 file-loader 進行解析

module

處理完雪碧圖和小圖片的 base64 轉換后，對于大圖片來說，webpack還可以做到對圖片進行壓縮，推薦使用 image-webpack-loader,插件提供了多種形式的壓縮。

// webpack.base.js

10. 使用 CDN

在項目的 index.html 中，常規方式引入 CDN 鏈接，此處以 jquery 為例

<

使用 externals

module

使用時

import

11. progress-bar-webpack-plugin

progress-bar-webpack-plugin

最后推薦個構建體驗插件-構建進度條

var

最后，目前說了大概 10 種開發環境構建速度和體積的優化。關于體積部分，生產環境也會用到。

大家還有沒有其他的優化黑魔法，歡迎大家留言交流，共同學習成長。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的webpack最新版本_webpack小结-开发环境构建优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。