webpack優化篇：如何讓你的項目打包更快呢？

前言

在上一篇文章中，咱們從零搭建了一個react的基礎項目，其核心是webpack的配置，可是咱們的webpack只是進行了基礎的配置，保證了打包成功和項目的運行。若是咱們想要打包更快呢？

基於上一篇文章中的webpack，這一篇文章就教你如何優化webpack的配置。

PS：上一篇文章看這裏👉從零搭建一個本身的react框架

webpack的優化實踐

• purgecss-webpack-plugin

刪除無用的css 咱們先準備一份css文件和jsx文件(我們就用上一篇文章中的)

• jsx

• css

仔細觀察上面的css文件，發現最後一個(.llllas)在jsx中是沒有的，根據咱們的意思，它應該被刪除掉，下面咱們開始配置

首先，安裝插件purgecss-webpack-plugin

npm install purgecss-webpack-plugin --save-dev
yarn add ...
cnpm install ...
複製代碼

咱們要注意的是，這個插件須要配合mini-css-extract-plugin插件一塊兒使用

第二步，使用

最後，yarn build，咱們來看一下效果

咱們在打包好的css文件中已經搜索不到 llllas樣式了。

就這樣，咱們學會了第一個優化webpack配置的方法。

• image-webpack-loader

圖片壓縮工具

咱們要在file-loader以前使用image-webpack-loader,使用方法：

由於，咱們只在生產環境下進行了壓縮圖片的操做，因此，咱們如今看開發環境下和生產環境下的打包結果：

• 開發環境

• 生產環境

從這裏，能夠很清晰的看到，svg圖片被壓縮了

PS：這裏壓縮圖片的配置是直接複製的npm官網上對image-webpack-loader使用介紹。

• CDN加載文件

昨天的文章寫到這裏，今天早上就看到webpack團隊發佈了webpack5.0的版本，我們也要有始有終。把這一篇文章寫完🐶

當咱們在HTML頁面用script標籤引入一個cdn，並且呢在寫react的時候咱們也要引入，像這樣(假如引入了jquery)

在這種狀況下，webpack依然會將jquery從新打包

咱們並不但願打包cdn引入文件，由於這會形成main.bundle.js文件體積臃腫，在必定程度上會影響頁面的渲染速度

因此，咱們須要進行如下配置

咱們再打包一下~

這時候， jquery部分的源代碼已經不見了~

咱們至此完成了第三步優化操做

• Tree-shaking

將沒用的代碼刪除，在生產環境下會自動tree-shaking

咱們來看一下下面的代碼：

• calc.js

• hello.js

• App.jsx

在這一段代碼中，hello.js只是引用了而並無使用，因此咱們指望在打包的時候不會打包hello.js部分的代碼。接下來，咱們分別在開發環境下和生產環境下打包，這時候發現，不管開發環境仍是生產環境，依然會打印出來hello.js函數內的內容

這時候，咱們須要去配置不使用反作用，因此在package.json文件中:

可是，咱們發現，當這樣配置之後，在生產環境下

css樣式出現了問題，這是因爲這樣配置之後，由於咱們引入css文件時import ./App.css,它會默認認爲css也是反作用，就不會導入css了

因此，須要咱們更改package.json的配置，像下面這樣：

這時候，再次在生產環境下運行項目，發現已經再也不打印hello，css的樣式也變得正常了

• DllPlugin

在寫react項目過程當中，常常要引入第三方庫，這樣，在每次從新構建的時候，會很是浪費性能，因此，爲了節約構建時間，咱們能夠先將第三方庫打包成一個動態連接庫，之後構建的時候直接去查找構建好的庫

咱們在index.js中使用了第三方庫react、react-dom，接下來，咱們先對這兩個庫先進行打包

一、在build文件夾下建立webpack.dll.js

二、在package.json裏面配置命令

三、在項目中引用動態連接庫

四、使用

// 首先打包好第三方庫
npm run build:dll
// 第二步，將項目打包
npm run build
複製代碼

五、效果：

• 使用DllPlugin打包前

• 使用DllPlugin打包後

  

能夠清楚的看到打包時間縮短，達到了優化的目的

• 動態加載

顧名思義，動態加載就是咱們須要加載的時候再去加載某些文件

• 頁面加載完成的時候

• 點擊按鈕以後

咱們看到，只有當咱們點擊按鈕的時候纔會加載index.js文件，它不會再頁面啓動的時候就去加載，這樣節省了頁面的加載時間

• 打包分析工具

安裝webpack-bundle-analyzer插件並使用

效果以下

• happypack

happypack插件可將代碼多線程打包，因此，咱們能夠將不一樣的邏輯交給不一樣的線程來處理

使用happypack前

使用happypack後

咱們能夠看到，打包時間明顯縮短了，因此happypack是一個很好的提升打包速度的手段

總結

以上，就是本篇博客介紹的一些優化手段，其實對於每一個不一樣的項目，配置的webpack是不同的，因此，咱們要根據這些webpack的基礎知識，去配置適合本身項目的webpack。

本篇博客中全部代碼片斷已上傳至github

react-template的github地址

上述文章若有不對之處，還請你們積極指出來，讓咱們一塊兒學習，共同在前端的路上越走越遠，愈來愈🐂

最後，分享一下個人微信公衆號，歡迎你們前來關注~