Webpack效能優化

在使用webpack打包的時候，當我們的專案工程越來越大的時候就會出現打包的時間越來越長，這個時候需要對打包資源進行一系列的優化。

對於 loader 來說，影響打包效率首當其衝必屬 babel 了。因為 babel 會將**轉為字串生成 ast，然後對 ast 繼續進行轉變最後再生成新的**，專案越大，轉換**越多，效率就越低。當然了，我們是有辦法優化的。

首先我們可以優化 loader 的檔案搜尋範圍

module.exports = 
]}}

對於 babel 來說，我們肯定是希望只作用在 js **上的，然後node_modules中使用的**都是編譯過的，所以我們也完全沒有必要再去處理一遍。

當然這樣做還不夠，我們還可以將 babel 編譯過的檔案快取起來，下次只需要編譯更改過的**檔案即可，這樣可以大幅度加快打包時間

loader: 'babel-loader?cachedirectory=true'

受限於 node 是單執行緒執行的，所以 webpack 在打包的過程中也是單執行緒的，特別是在執行 loader 的時候，長時間編譯的任務很多，這樣就會導致等待的情況。

module: 
]},plugins: [
loaders: ['babel-loader?cachedirectory'],
// 開啟 4 個執行緒
threads: 4
})]

dllplugin 可以將特定的類庫提前打包然後引入。這種方式可以極大的減少打包類庫的次數，只有當類庫更新版本才有需要重新打包，並且也實現了將公共**抽離成單獨檔案的優化方案。

接下來我們就來學習如何使用 dllplugin

// 單獨配置在乙個檔案中
// webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
module.exports = ,
output: ,
plugins: [
new webpack.dllplugin()
]}

然後我們需要執行這個配置檔案生成依賴檔案，接下來我們需要使用dllreferenceplugin將依賴檔案引入專案中

// webpack.conf.js
module.exports = )
]}

在 webpack3 中，我們一般使用uglifyjs來壓縮**，但是這個是單執行緒執行的，為了加快效率，我們可以使用webpack-parallel-uglify-plugin來並行執行uglifyjs，從而提高效率。

在 webpack4 中，我們就不需要以上這些操作了，只需要將mode設定為production就可以預設開啟以上功能。**壓縮也是我們必做的效能優化方案，當然我們不止可以壓縮 js **，還可以壓縮 html、css **，並且在壓縮 js **的過程中，我們還可以通過配置實現比如刪除console.log這類**的功能。

我們可以通過一些小的優化點來優化打包速度

按需載入

想必大家在開發 spa 專案的時候，專案中都會存在十幾甚至更多的路由頁面。如果我們將這些頁面全部打包進乙個 js 檔案的話，雖然將多個請求合併了，但是同樣也載入了很多並不需要的**，耗費了更長的時間。那麼為了首頁能更快地呈現給使用者，我們肯定是希望首頁能載入的檔案體積越小越好，這時候我們就可以使用按需載入，將每個路由頁面單獨打包為乙個檔案。當然不僅僅路由可以按需載入，對於loadash這種大型類庫同樣可以使用這個功能。

scope hoisting 會分析出模組之間的依賴關係，盡可能的把打包出來的模組合併到乙個函式中去。

比如我們希望打包兩個檔案

// test.js
export const a = 1
// index.js
import  from './test.js'

對於這種情況，我們打包出來的**會類似這樣

[
/* 0 */
function (module, exports, require) ,
/* 1 */
function (module, exports, require) 
]

但是如果我們使用 scope hoisting 的話，**就會盡可能的合併到乙個函式中去，也就變成了這樣的類似**

[
/* 0 */
function (module, exports, require) 
]

這樣的打包方式生成的**明顯比之前的少多了。如果在 webpack4 中你希望開啟這個功能，只需要啟用optimization.concatenatemodules就可以了。

module.exports = 
}

tree shaking 可以實現刪除專案中未被引用的**，比如

// test.js
export const a = 1
export const b = 2
// index.js
import  from './test.js'

對於以上情況，test檔案中的變數b如果沒有在專案中使用到的話，就不會被打包到檔案中。

如果你使用 webpack 4 的話，開啟生產環境就會自動啟動這個優化功能。

webpack的版本更新很快，各個版本之間實現優化的方式都會有區別，所以具體實現的方式餓哦們還是需要參考官網文件為準

Webpack效能優化

webpack 效能優化

webpack 效能優化

Webpack效能優化

Webpack效能優化

webpack 效能優化

webpack 效能優化

Webpack效能優化

相關推薦