webpack优化-速度优化-hard-source-webpack-plugin

1、背景

在项目实现的过程中，想在代码更改的同时，查看效果的改变，而这个时候长时间的编译等待，造成了额外的时间浪费。

2、简介

HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）。

3、实现

用npm install --save-dev hard-source-webpack-plugin或安装yarn add --dev hard-source-webpack-plugin。并在webpack的插件配置中添加此插件。

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
new HardSourceWebpackPlugin({
    // cacheDirectory是在高速缓存写入。默认情况下，将缓存存储在node_modules下的目录中，因此如 
    // 果清除了node_modules，则缓存也是如此
    cacheDirectory: 'node_modules/.cache/hard-source/[confighash]',
    // Either an absolute path or relative to webpack's options.context.
    // Sets webpack's recordsPath if not already set.
    recordsPath: 'node_modules/.cache/hard-source/[confighash]/records.json',
    // configHash在启动webpack实例时转换webpack配置，并用于cacheDirectory为不同的webpack配 
    // 置构建不同的缓存
    configHash: function(webpackConfig) {
       // node-object-hash on npm can be used to build this.
       return require('node-object-hash')({sort: false}).hash(webpackConfig);
    },
    // 当加载器，插件，其他构建时脚本或其他动态依赖项发生更改时，hard-source需要替换缓存以确保输 
    // 出正确。environmentHash被用来确定这一点。如果散列与先前的构建不同，则将使用新的缓存
    environmentHash: {
       root: process.cwd(),
       directories: [],
       files: ['package-lock.json', 'yarn.lock'],
    },
})