webpack 提升90%的构建速度 HardSourceWebpackPlugin

HardSourceWebpackPlugin 插件 不能提升第一次构建的速度,但对于第二次构建能提升99%的构建速度

第一次构建:

第二次:

提升了。。,算不出来,反正就是很多啦~~~

npm install --save hard-source-webpack-plugin
// webpack.config.js
var HardSourceWebpackPlugin = require(‘hard-source-webpack-plugin‘);

new HardSourceWebpackPlugin({
  // Either an absolute path or relative to webpack‘s options.context.
  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‘,
  // Either a string of object hash function given a webpack config.
  configHash: function(webpackConfig) {
    // node-object-hash on npm can be used to build this.
    return require(‘node-object-hash‘)({sort: false}).hash(webpackConfig);
  },
  // Either false, a string, an object, or a project hashing function.
  environmentHash: {
    root: process.cwd(),
    directories: [],
    files: [‘package-lock.json‘, ‘yarn.lock‘],
  },
}),

https://github.com/mzgoddard/hard-source-webpack-plugin

原文地址:https://www.cnblogs.com/web-fusheng/p/8732620.html

时间: 2024-10-10 21:18:59

webpack 提升90%的构建速度 HardSourceWebpackPlugin的相关文章

Android 优化APP 构建速度的17条建议

较长的构建时间将会减缓项目的开发进度,特别是对于大型的项目,app的构建时间长则十几分钟,短则几分钟,长的构建时间已经成了开发瓶颈,本篇文章根据Google官方文档,加上自己的一些理解提供一些提升app构建速度的优化建议. 1,为开发环境创建一个变体 有许多配置是你在准备app的release 版本的时候需要,但是当你开发app的时候是不需要的,开启不必要的构建进程会使你的增量构建或者clean构建变得很慢,因此需要构建一个只保留开发时需要配置的变体,如下例子创建了一个dev和prod变体(pr

vue-cli3使用 DllPlugin 实现预编译,提升构建速度

在项目打包上有两个目标:减少打包代码体积和加快打包速度 1. 减少打包体积: (1)对于用的比较少的库,可以去掉(我去掉了jquery以及lodash),用到的地方,参考源码自己写 (2)非用不可的又比较大的库(我这里用了monaco-edit),使用cdn方式引入 打包体积减少的情况下,自然速度也会有所提升 2. 加快打包速度: 这里推荐一篇个人感觉很棒的文章 https://juejin.im/post/5bfa696d51882579117f7d26 我目前做了这些: (1)vue-cli

Docker实用技巧之更改软件包源提升构建速度

一.开篇 地球,中国,成都市,某小区的阳台上,一青年负手而立,闭目沉思,阵阵的凉风吹得他衣衫呼呼的飘.忽然,他抬起头,刹那间,睁开了双眼,好似一到精光射向星空,只见这夜空......一颗星星都没有.他叹了下气,"今日夜观星象,看来是时候了."他走到电脑桌前,双手不断的做出各种手势,同时口中念着晦涩难懂的语言--嘛咪嘛咪哄,最后只见他将一只手放在了笔记本电脑上,同时大喊:"出来吧!我的皮卡丘.",只见贴在笔记本电脑上的一张泛黄的写着奇怪文字和图案的纸在燃烧,好像在进行

如何提升页面加载速度,并简述原理

页面的加载过程主要分为下载.解析.渲染三个步骤,下面从这三个方面阐述提升加载速度的方法: 1.加快文件下载速度,减小资源文件下载对页面解析的阻塞.页面加载过程首先会下载 HTML 文件,然后自上而下开始解析,解析过程中如果遇到外部资源则会开始下载,直至下载完成才会继续解析.所以,加快文件下载速度方式是有效的提升页面加载速度的方法.具体可以是 1)通过设置 CDN.HTTP 缓存等方式,减少 HTTP 传输时间: 2)对文件进行压缩,减小文件体积: 3)对 script.CSS 文件引用标签设置异

如何提升ACTION_SIM_STATE_CHANGED的接收速度?

在Android中,BroadcastReceiver分动态注册和静态注册. 静态注册的一个优势就是:当你的BroadcastReceiver可以接受系统中 某个broadcast时,系统会自动启动你的程序,从而让BroadcastReceiver完成相关处理; 而动态注册则只有在程序运行时且没有 unregisterReceiver才能接收到broadcast. 此时,假设我们要在系统开机后,要对SIM卡联系人进行读取操作,那么我们应该如何注册自己的BroadcastReceiver呢? 方案

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能有20%的提升. 它并不是一门新技术,有人认为只有 Chrome 才具备这个功能.也有人认为它是有史以来提升浏览器性能最有效的方法.如果你第一次接触预加载器,也许心中已经有了无数个问号.什么是预加载器?它是如何提升浏览器性能的? 首先需要了解浏览器是如何加载网页的 一个网页的加载依赖于脚本文件.CS

vue2.0+webpack+vuerouter+vuex+axios构建项目基础

前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,webpack升级到4舍弃了不少组件,之前有次使用淘宝镜像丢失了不少模块,所以webpack大家尽量使用npm装. 2.安装vue脚手架 npm install vue-cli -g 3.运行cmd(开始-运行-cmd-回车) 比如你的目录要安装在E盘,在命令面板中就输入"e:"然后回车cd到项

深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)

阅读目录 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlugin DllReferencePlugin使用在vue和vuex项目中 回到顶部 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 在使用webpack进行打包时候,对于依赖的第三方库,比如vue,vuex等这些不会修改的依赖,我们可以让它和我们自己编写的代码分开

webpack构建速度优化-记录一次公司项目build优化(不完全记录)仅供翻阅参考

打包速度 转化AST—>遍历树—>转化回代码(具体语法配置参考webpack,这边只是个人的一些过程记录,并不包含详细过程)1.缓存 cache-loader2.多核 happypack threads3.抽离 DllPlugin.externals4.拆分 Docker 优化项目:测量插件speed-measure-webpack-plugin 用法: 优化前:可以看到我们公司的项目还是比较残暴的!!开启AOT(Angular5项目)之后,线上构建达到了41分钟! 测量出现的问题:raw-l