webpack-HardSourceWebpackPlugin和cache-loader插件优化开发模式的构建速度

插件简介

HardSourceWebpackPlugin是webpack的插件，用于为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行两次webpack：第一次构建将花费正常时间。第二个版本将明显更快。适合用在开发模式development和生产模式production下。速度提升的效果是原来的好几倍。

使用hard-source-webpack-plugin插件

使用npm install --save-dev hard-source-webpack-plugin
或安装yarn add --dev hard-source-webpack-plugin。

const hardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const isDev = process.env.NODE_ENV === 'development'

module.exports = {
  configureWebpack: webpackConfig => {
  var plugins = []；
  plugins.push(new hardSourceWebpackPlugin())
 webpackConfig.plugins = [...webpackConfig.plugins, ...plugins]
}
}

cache-loader简介：

缓存加载器的编译的结果，避免重新编译。

安装cache-loader

npm install --save-dev cache-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['cache-loader', 'babel-loader'],
        include: path.resolve('src'),
      },
    ],
  },
};

如果对您有帮助，请点个赞，谢谢。