现在公司的项目文件越来越多, 感觉每次打包的速度有点慢, 就尝试了一下优化项目编译速度
dll方案
通过DllPlugin打包dll.js文件, 然后引入.
经过一番折腾的结果是打包时间反而增加了, 我纳闷得不行, 后来查询发现这个方案只对webpack2/3有效, 经查询自己项目用的webpack4, 踩坑+1
hard-source-webpack-plugin方案
官方介绍
HardSourceWebpackPlugin是 webpack 的插件,用于为模块提供中间缓存步骤。为了看到结果,你需要使用这个插件运行 webpack 两次:第一次构建需要正常的时间。第二次构建将明显更快。
为了对比时间, 要查询了如何显示打包时间, 最多的是修改node_modules源码的方式, 也有speed-measure-webpack-plugin可以显示, 但是会与这个插件冲突, 最后还是选择修改源码的方式
async function build (args, api, options) {
// 开始时间
const startTime = new Date().getTime()
...
return new Promise((resolve, reject) => {
webpack(webpackConfig, (err, stats) => {
...
if (!args.silent) {
...
if (args.target === 'app' && !isLegacyBuild) {
if (!args.watch) {
// 打印时间
console.log('Cost '+(new Date().getTime()-startTime)+'ms')
...
} else {
...
}
}
}
...其他代码
})
})
}
速度对比
未使用插件:
插件第一次:
插件第二次:
可以看到速度得到比较明显的提升
插件配置
安装
yarn add --dev hard-source-webpack-plugin
vue.config.js配置
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
module.exports = {
chainWebpack: (config) => {
// 打包缓存加速
config.plugin("hardSource").use(HardSourceWebpackPlugin);
},
};