progress-bar-webpack-plugin
1
2
3
4
5
6
7
| const ProgressBarPlugin = require('progress-bar-webpack-plugin')
plugins: [
new ProgressBarPlugin({
format: ` :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`
})
]
|
可以在终端显示出编译的进度和使用的时间，还有百分比进度条，可以分析出每个loader、plugin编译耗时，这样能准确定位出开发环境编译的性能。
speed-measure-webpack-plugin
1
2
3
4
5
6
7
8
9
| const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()
const config = {
...
}
module.exports = smp.wrap(config)
|
webpack5内置图片和字体loader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| modules: {
rules: [
{
test:八.(pnglsvgljpgljpeglgif)$/i,
include: paths.appSrc,
type:'asset/resource'
},
{
test: /.(woff|woff2leot|ttflotf)$/i,
include: paths.appSrc,
type: "asset/resource'
}
]
}
|
esbuild-loader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| modules: {
rules: [
{
test: 八.(js|tsljsx|tsx)$/,
include: paths.appSrc,
use: [
{
loader: 'esbuild-loader',
options: {
loader: 'tsx',
target: 'es2015'
}
}
]
}
]
}
|
esbuild-loader的编译是基于go的，编译速度比node快很多倍
文件缓存
1
2
3
4
5
| config: {
cache: {
type: 'filesystem'
}
}
|
多线程打包
1
2
3
4
5
6
7
8
| plugins: [
{
loader: 'thread-loader',
options: {
workerParallelJobs: 2
}
}
]
|
在webpack5之前多线程打包用happypack，webpack5之后用thread-loader，该loader要慎用，loader编译也是有耗时的，小型项目开启thread-loader反而会使编译时间加长