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);
                }
            )
    },
}