webpack构建提速-HardSourceWebpackPlugin-热重载不生效
前言
在使用npm运行本地项目时,随着项目越来越大,每次启动项目的时间也会越来越长,此文章紧介绍借助HardSourceWebpackPlugin
插件提升项目二次以后启动速度,以及使用该插件后热重载失效的解决办法
本地环境
node:v14.16.1 webpack: 4.44.2 @vue/cli: 4.5.11
插件
该插件为模块中间提供缓存,在项目第一次构建将花费正常的时间,第二次构建时间将会大幅度缩减。目前我所用到的项目(代码数量20W行左右),使用该插件之前,二次构建时需要 33 秒左右时间,在使用该插件以后,二次构建时间缩短至 13 秒左右,平均提速 60% 左右。
插件详细配置地址:传送门
- 使用
npm i hard-source-webpack-plugin
命令安装对应插件 - 在vue.config.js 文件中导入对应插件(其他手动配置的环境在该环境对应位置导入)
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
- 在 plugin 中使用
HardSourceWebpackPlugin
chainWebpack(config){
config
.when(process.env.NODE_ENV == 'development',
config => {
config
.plugin('HardSourceWebpackPlugin')
.use(HardSourceWebpackPlugin);
}
)
},
引入插件热重载不生效及解决办法
由于vue-cli内部已经集成了热重载,但是当我们引入此插件以后,热重载会失效。 此处放上官方文档相关截图
此处不知道你们看没看懂,反正我看的是有点懵。后续通过 Issues 中找到了蛛丝马迹
后续经常多次尝试,需要把热重载的插件 HotModuleReplacementPlugin
放置到HardSourceWebpackPlugin
的后面才能解决。
最后结果
在vue.config.js中导入webpack,并在HardSourceWebpackPlugin
后面使用HotModuleReplacementPlugin
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const webpack= require('webpack')
module.exports = {
chainWebpack(config){
config
.when(process.env.NODE_ENV == 'development',
config => {
config
.plugin('HardSourceWebpackPlugin')
.use(HardSourceWebpackPlugin);
config
.plugin('hot')
.use(webpack.HotModuleReplacementPlugin);
}
)
},
}
转载自:https://juejin.cn/post/7020647510322462756