zoukankan      html  css  js  c++  java
  • 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'],
        },
    })
    

      

  • 相关阅读:
    CXF学习(2) helloworld
    foreach与Iterable学习
    java基础之JDBC八:Druid连接池的使用
    java基础之JDBC七:C3P0连接池的使用
    java基础之JDBC六:DBCP 数据库连接池简介
    java基础之JDBC五:批处理简单示例
    java基础之JDBC四:事务简单示例
    java基础之JDBC三:简单工具类的提取及应用
    java基础之JDBC二:原生代码基础应用
    java基础之JDBC一:概述及步骤详解
  • 原文地址:https://www.cnblogs.com/ygunoil/p/14434767.html
Copyright © 2011-2022 走看看