记录下
项目安装speed-measure-webpack-plugin
打包分析：
修改vue.config.js文件
speed-measure-webpack-plugin进行构建速度分析，需要包裹整个 configureWebpack 配置
const originalConfig = {
publicPath: '/',
assetsDir: 'assets',
parallel: true,
devServer: {
hot: true
},
lintOnSave: false,
runtimeCompiler: true,
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('src'))
.set('@views', resolve('src/views'))
.set('@comp', resolve('src/components'))
.set('@root', resolve('/'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.type('asset')
.parser({
dataUrlCondition: {
maxSize: 8 * 1024 // 8KB以下转base64 //2560
}
})
// .set('generator', {
// filename: 'img/[name].[hash:8][ext]'
// })
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()
},
configureWebpack: {
cache: {
type: 'filesystem', // 使用文件缓存
buildDependencies: {
config: [__filename] // 缓存依赖
},
allowCollectingMemory: true,
maxMemoryGenerations: 1
},
optimization: {
minimizer: minimizer,
removeEmptyChunks: process.env.NODE_ENV === 'production',
splitChunks: splitChunks
},
plugins: plugins,
module: {
noParse: /jquery/,
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
use: [
{
loader: 'thread-loader',
options: {
workers: cpuCount,
workerParallelJobs: 20,
workerNodeArgs: ['--max-old-space-size=1024'] // 限制子进程内存
// poolTimeout: 2000 // 空闲时自动关闭
}
},
{
loader: 'babel-loader',
options: {
babelrc: true,
cacheDirectory: true
}
}
]
}
]
}
},
css: {
loaderOptions: {
// You need to configure a global variable if you want to use it in a component
scss: {
additionalData: '@import "~@/assets/css/variables.scss";'
}
}
},
// 设为false打包时不生成.map文件
productionSourceMap: false
}
module.exports = {
...originalConfig,
configureWebpack: smp.wrap(originalConfig.configureWebpack)
}
npm run dev运行，获取分析：
SMP ⏱
General output time took 7 mins, 42.001 secs
SMP ⏱ Plugins
DefinePlugin took 0 secs
TerserPlugin took 0 secs
SMP ⏱ Loaders
@vue/vue-loader-v15, and
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
sass-loader, and
@vue/vue-loader-v15 took 4 mins, 58.75 secs
module count = 2340
css-loader, and
@vue/vue-loader-v15, and
postcss-loader, and
sass-loader, and
@vue/vue-loader-v15 took 4 mins, 53.93 secs
module count = 1170
@vue/vue-loader-v15, and
thread-loader, and
babel-loader, and
thread-loader, and
babel-loader, and
@vue/vue-loader-v15 took 3 mins, 22.91 secs
module count = 3430
mini-css-extract-plugin, and
css-loader, and
postcss-loader took 2 mins, 41.67 secs
module count = 21
thread-loader, and
babel-loader, and
thread-loader, and
babel-loader took 2 mins, 33.61 secs
module count = 404
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
sass-loader took 2 mins, 12.24 secs
module count = 4
modules with no loaders took 2 mins, 2.27 secs
module count = 2244
image-webpack-loader took 1 min, 36.096 secs
module count = 327
@vue/vue-loader-v15 took 1 min, 31.51 secs
module count = 5127
css-loader, and
postcss-loader took 1 min, 13.14 secs
module count = 21
css-loader, and
postcss-loader, and
sass-loader took 50.62 secs
module count = 4
@vue/vue-loader-v15, and
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
@vue/vue-loader-v15 took 49.91 secs
module count = 6
css-loader, and
@vue/vue-loader-v15, and
postcss-loader, and
@vue/vue-loader-v15 took 15.11 secs
module count = 3
html-webpack-plugin took 1.9 secs
module count = 1
raw-loader took 0.819 secs
module count = 1
script-loader took 0.032 secs
module count = 1
修改配置
1.图片处理仅在生产环境使用
if (process.env.NODE_ENV === 'production') {
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.type('asset')
.parser({
dataUrlCondition: {
maxSize: 8 * 1024 // 8KB以下转base64 //2560
}
})
// .set('generator', {
// filename: 'img/[name].[hash:8][ext]'
// })
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()
} else {
config.module.rule('images').uses.delete('image-webpack-loader') // 移除图像压缩
}
- scss设置
css: {
loaderOptions: {
// You need to configure a global variable if you want to use it in a component
scss: {
implementation: require('sass'),
additionalData: '@import "~@/assets/css/variables.scss";'
}
}
},
- 改用esbuild-loader，用了之后是要快一点，但这个速度感觉还是不对啊
// 删除原有的babel-loader配置
config.module.rules.delete('js')
// 添加esbuild-loader
config.module
.rule('js')
.test(/\.(js|mjs|jsx)$/)
// .exclude.add(/node_modules/)
// .end()
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx'
})
thread-loader, and
babel-loader took 1 min, 23.34 secs
module count = 374
-------
esbuild-loader took 52.51 secs
module count = 395
再次优化后，打包速度提升：
SMP ⏱
General output time took 4 mins, 5.18 secs
SMP ⏱ Plugins
DefinePlugin took 0.002 secs
SMP ⏱ Loaders
css-loader, and
@vue/vue-loader-v15, and
postcss-loader, and
sass-loader, and
@vue/vue-loader-v15 took 3 mins, 16.68 secs
module count = 1170
@vue/vue-loader-v15 took 2 mins, 11.74 secs
module count = 5127
@vue/vue-loader-v15, and
esbuild-loader, and
@vue/vue-loader-v15 took 1 min, 50.85 secs
module count = 3430
modules with no loaders took 1 min, 27.56 secs
module count = 2609
css-loader, and
postcss-loader took 1 min, 11.28 secs
module count = 21
css-loader, and
postcss-loader, and
sass-loader took 1 min, 8.42 secs
module count = 4
esbuild-loader took 52.51 secs
module count = 395
css-loader, and
@vue/vue-loader-v15, and
postcss-loader, and
@vue/vue-loader-v15 took 8.85 secs
module count = 3
@vue/vue-loader-v15, and
vue-style-loader, and
css-loader, and
postcss-loader, and
sass-loader, and
@vue/vue-loader-v15 took 2.93 secs
module count = 2340
vue-style-loader, and
css-loader, and
postcss-loader took 0.373 secs
module count = 21
vue-style-loader, and
css-loader, and
postcss-loader, and
sass-loader took 0.197 secs
module count = 4
html-webpack-plugin took 0.141 secs
module count = 1
@vue/vue-loader-v15, and
vue-style-loader, and
css-loader, and
postcss-loader, and
@vue/vue-loader-v15 took 0.016 secs
module count = 6
但CSS相关加载器耗时还是非常长，没搜到怎么优化。。。。
webpack5新增了一个懒加载属性 lazyCompilation， 还可以使用 DllPlugin 进行分包，都能提升运行速度； 后面看看
