webpack构建速度优化
背景
由于历史遗留问题，项目中使用的自研组件库一直未进行编译；而是把源码直接发布到公司内部的cnpm服务器。这样在项目使用进行安装的时候包会非常大、下载效率低下。为了缩小安装包所占内存以及提升组件库安装效率，现将组件库进行编译后发布；但是在编译的过程中；由于组件库组件较多、静态资源较多；使用vue-cli自带的库模式编译非常耗时；而且编译后的代码也未进行优化。为了提升编译效率、再次优化编译后的代码库，我们做了如下优化。
优化前编译时间及文件大小
使用到的插件
terser-webpack-plugin、 optimize-css-assets-webpack-plugin、hard-source-webpack-plugin
- 使用terser-webpack-plugin进行编译提速及代码合并缩小文件大小
- 使用optimize-css-assets-webpack-plugin进行样式合并，缩小样式文件大小
- 使用hard-source-webpack-plugin进行磁盘缓存读取进行编译提速
- 使用别名，增加编译寻址进行提速
- 使用新的工程化工具vite（本文暂未拿旧组件库实践）
// vue.config.js
const TerserPlugin = require('terser-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: './',
outputDir: 'packages',
assetsDir: 'static',
css: {
extract: true
},
productionSourceMap: false, // 不生成SourceMap提高编译速度
configureWebpack: {
output: {
libraryExport: 'default'
},
resolve: {
// 修改 resolve.extensions 配置项，减少匹配次数
// 代码中尽量补齐文件后缀名
extensions: ['vue', 'js', 'scss', 'css'],
alias: {
// 尽可能使用别名，增加编译寻址
'@': resolve('src'),
'@packages': resolve('./src/packages')
}
},
plugins: [
new OptimizeCssAssetsPlugin(),
new TerserPlugin({
cache: true, // 开启缓存
parallel: 4, // 开启多线程进行编译
terserOptions: {
output: {
comments: false //删除编译注释
},
compress: {
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']
}
},
extractComments: false //删除编译注释
}),
new HardSourceWebpackPlugin()
]
}
}
组件库index.js文件使用别名
优化后的文件及编译时间
首次未缓存
缓存后
