webpack 效能優化

1.2 js 與 css 並行載入

1.3 開啟多執行緒

1.4 使用 dns 載入靜態資料

2. 空間維度

webpack 效能優化無非是從時間和空間兩個維度去分析。時間指的是打包時間盡可能快；空間指的是打包體積盡可能小。本文的 webpack 效能優化是基於 webpack 4.3.0 版本。本文主要是闡述 webpack 效能優化方面的內容，更多 webpack 知識可參考 wabpack 中 loader 和 plugins 的區別和 webpack 4 新特性

配置示例：

,

以上示例中配置了 babel-loader，其功能是將 es6 語法轉換為 es5 語法，請注意babel-loader?cachedirectory=true，這行配置的意思是對已經轉換過的未經改動的編譯檔案進行快取，以此可以加快打包時間。注意需要排除 node_modules 資料夾，因為該檔案所在的 js 使用的是 es5 語法，所以沒必要再使用 babel 轉換。

不管是 react 框架還是 vue 框架，有些模組比如 react 、react-router、vue、vue-router 等一般情況下（除非模組公升級）都不會改動，所以在打包的時候希望這些資源能夠被快取下來。那麼首先得把這些模組進行分割，然後快取。所以這裡有兩步。

第一步：**分割，使用 webpack 內建的 optimization.splitchunks 配置

示例如下：

optimization:}}
},

在 webpack4 之前使用的是 commonschunkplugin 進行**分割。而 webpack4 之後就可以使用內建的 optimization.splitchunks 進行**分割。**分割的目的就是為了將一些不常更改的第三方庫單獨分離出來。

第二步：快取，使用 hard-source-webpack-plugin 外掛程式。

const hardsourcewebpackplugin =
require
('hard-source-webpack-plugin'
)plugins:
[new
hardsourcewebpackplugin()
]

以上配置中使用的是 hard-source-webpack-plugin 進行模組快取。這樣只有在第一次打包的時候花費的時間會長一些，但是從第二次之後，模組已經被快取到 node_modules/.cache/hard-source 目錄下，不會被打包進來，大大節省打包時間。

在 webpack 4 之前抽離 css 的外掛程式是 extract-text-webpack-plugin 。之後採用的是 mini-css-extract-plugin 外掛程式。其作用是用 js 中將 css 單獨抽離出來，並行載入，可以提公升載入速度。

配置如下：

const minics***tractplugin=
require
('mini-css-extract-plugin');
plugins:
[// 提取單獨的 css
newminics***tractplugin()
,]

module:,]
},plugins:
[new()
]

使用 dns 載入靜態資料會比較快，同時也可以減小公共模組的體積。

""
>
<
/script>
<
!-- 引入vue-router --
>
"">
<
/script>
<
!-- 引入元件庫 --
>
"">
<
/script>
<
!-- 引入樣式 --
>
"" rel=
"stylesheet"
>

空間維度指的是通過對 css、js 等靜態資源進行壓縮以減少資源體積。

optimize-css-assets-webpack-plugin 外掛程式主要是用來壓縮 css 檔案的。

配置如下：

const optimizecssplugin =
require
('optimize-css-assets-webpack-plugin');
plugins:
[new
optimizecssplugin(}
}),]

在 webpack 4 之前採用的 js 壓縮外掛程式是 uglifyjs-webpack-plugin 。之後採用的是 terser-webpack-plugin 外掛程式。其配置方式如出一轍。

uglifyjs-webpack-plugin 配置如下：

const uglifyjsplugin =
require
('uglifyjs-webpack-plugin');
plugins:
[new
uglifyjsplugin(}
, sourcemap:
false
, parallel:
true
//是否開啟多執行緒})
,]

terser-webpack-plugin 配置如下：

const terserplugin =
require
('terser-webpack-plugin');
plugins:
[new
terserplugin(}
, sourcemap:
false
, parallel:
true
//是否開啟多執行緒})
,]

可以看出他們的區別就在於 uglifyoptions 物件與 terseroptions 物件有所不同。

compression-webpack-plugin 外掛程式可以壓縮選擇的型別檔案，其採用的是 gzip 格式進行壓縮。

配置如下：

const compressionwebpackplugin =
require
('compression-webpack-plugin');
plugins:
[new
compressionwebpackplugin()
]

webpack 效能優化

webpack 效能優化

Webpack效能優化

Webpack效能優化

webpack 效能優化

webpack 效能優化

Webpack效能優化

Webpack效能優化

相關推薦