hard-source-webpack-plugin在vue使用中遇到的坑

最新推荐文章于 2024-06-06 15:12:19 发布

贾先生&王女士

最新推荐文章于 2024-06-06 15:12:19 发布

阅读量1.4k

点赞数

文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/weixin_45397766/article/details/126875951

版权

1.按照文档进行配置

// "hard-source-webpack-plugin": "^0.13.1", 依赖版本
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
configureWebpack: (config) => { 
	....
	config.plugins.push(new HardSourceWebpackPlugin());
	....
}

2.在项目build的时候报了这个错误
在这里插入图片描述
因为该插件使用的是webpack5以下的版本。vue-cli5对应的是webpack5版本，所以会有这个报错。后来又看了一下webpack5的文档，本身支持cache的配置。

3.修改后的vue.congfig.js
在这里插入图片描述

type: 'memory' (简易类型，不允许有其他配置) 
	  'filesystem'(可以有其他配置)
allowCollectingMemory：true (默认生产环境false，开发环境true)
....TODO

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

贾先生&王女士

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
hard-source-webpack-plugin在vue使用中遇到的坑

vue中使用hard-source-webpack-plugin插件
复制链接

扫一扫

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

khadijiah的博客

06-08

3841

1、背景在项目实现的过程中，想在代码更改的同时，查看效果的改变，而这个时候长时间的编译等待，造成了额外的时间浪费。 2、简介 HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）。 3、实现安装：yarn add --dev hard-source-webpack-plugin（或者使用npm）。并在webpack的插件配置中添

webpack使用hard-source-webpack-plugin

weixin_53114994的博客

08-30

765

文件中进行以下配置。该插件可以帮助你在开发过程中提升 Webpack 构建的速度，通过缓存中间构建结果。并在配置中进行使用。要在你的Vue项目中添加。

1 条评论您还未登录，请先登录后发表或查看评论

webpack 优化构建速度的插件

最新发布

qq_37550440的博客

06-06

875

webpack 优化构建速度的插件HardSourceWebpackPlugin比DLL动态链接库更优秀优化非常猛项目启动时间少80%，CDN注入

使用hard-source-webpack-plugin优化vue编译速度

可乐会唱歌的博客

06-21

1171

现在公司的项目文件越来越多, 感觉每次打包的速度有点慢, 就尝试了一下优化项目编译速度通过DllPlugin打包dll.js文件, 然后引入. 经过一番折腾的结果是打包时间反而增加了, 我纳闷得不行, 后来查询发现这个方案只对webpack2/3有效, 经查询自己项目用的webpack4, 踩坑+1官方介绍为了对比时间, 要查询了如何显示打包时间, 最多的是修改node_modules源码的方式, 也有speed-measure-webpack-plugin可以显示, 但是会与这个插件冲突, 最后还是选择修

Webpack4优化之hardSourceWebpackPlugin的报错问题

coding...

02-07

1321

最近工作项目编译太卡，由于模块太多，前端项目启动起码要6分钟，作为一个前端着实不能容忍，于是开启了优化之旅，仅仅只是对开发环境做了下优化。首先和网上提供一样，分析一下编译的时间，看看哪个部分花的时间最多，使用插件SpeesMeasureWebpacPlugin，跑下来启动时间在6～7分钟，看了下大部分的时间都在加载loader的时候耗时最长，然后主要优化两个方向，一个是多线程编译，一个是添加缓存。多线程编译采用了thread-loader，在Vue.confit.js中配置，但是配置下来，感觉速度提

vue项目本地开发构建速度优化 hard-source-webpack-plugin

Mr_linjw的专栏

11-18

1275

有些项目因为项目需求点多、功能复杂、管理混乱、引入第三方插件/样式库过多、本身项目页面较多、文件较多等等原因，会导致项目体积变大、本地构建速度明显变慢，这时就需要对项目webpack进行一些设置来提高打包效率、加快打包时间。hard-source-webpack-plugin会进行文件的启动缓存，第一次启动之后，会给文件添加一次缓存，然后在第二次启动的时候，直接在本地缓存进行。缺点：每次修改配置项之后，需要项目重新启动的时候，这个时候是需要重新进行项目的热更新，跟没有配置一样。

monaco-editor-esm-webpack-plugin

05-30

monaco-editor-esm-webpack-plugin 它依赖于。如果你想复制一个带有本地化的 monaco 编辑器，你可以看到用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。安装 npm install monaco-editor-...

optimize-css-assets-webpack-plugin:一个Webpack插件，用于优化\最小化CSS资产

04-28

安装：使用npm： $ npm install --save-dev optimize-css-assets-webpack-plugin :warning: 对于webpack v3或更低版本，请使用optimize-css-assets-webpack-plugin@3.2.0 。 optimize-css-assets-webpack-plugin@...

fork-ts-checker-webpack-plugin：在单独的进程上运行打字稿类型检查器的Webpack插件

02-05

在单独的进程上运行TypeScript类型检查器的Webpack插件。产品特点加速类型检查和（通过将它们移至单独的进程） :racing_car: 支持现代TypeScript功能，例如和 :sparkles: 支持 :check_mark_button: 使用格式化...

vue-builder-webpack-plugin:Webpack插件自动构建vue文件

05-13

vue-builder-webpack-plugin Webpack插件自动构建vue文件在处理vue文件时，编辑器是否存在问题？这个给你您是否要分离vue文件？这个给你您只是不喜欢拥有vue文件？这个给你您可以使用此插件自动生成.vue文件。...

browser-sync-webpack-plugin：在Webpack项目中轻松使用BrowserSync

02-06

安装： $ npm install --save-dev browser-sync-webpack-plugin 要么$ yarn add --dev browser-sync-webpack-plugin 在2.0.0版中，该插件有望在Node v4 +环境中使用。不再支持Node v3及更低版本，但是您可以在较旧...

硬源Webpack插件

02-06

HardSourceWebpack插件 HardSourceWebpackPlugin是HardSourceWebpackPlugin的插件，可为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行两次webpack：第一次构建将花费正常时间。第二个版本将明显更快。使用npm install --save-dev hard-source-webpack-plugin或yarn add --dev hard-source-webpack-plugin 。并将该插件包含在您的webpack的插件配置中。 // webpack.config.js var HardSourceWeb

webpack 配置之 HardSourceWebpackPlugin

weixin_42192113的博客

04-01

9388

在webpack3中为了提高构建速度，我们往往会用到 DllPlugin 和 DllReferencePlugin 插件，基本的配置如下： 1. 配置webpack.dll.config.js DllPlugin 是webpack内置插件，不需要额外安装 module.exports = {= entry: { // 第三方库 react: ['react', 'react-dom', 'react-redux'] }, output: { // 输出的动态链接库的文件名

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

热门推荐

看风听雨

09-18

2万+

1、背景在项目实现的过程中，想在代码更改的同时，查看效果的改变，而这个时候长时间的编译等待，造成了额外的时间浪费。 2、简介 HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）。 3、实现 ...

webpack之优化篇（四）：hard-source-webpack-plugin,webpack DllPlugin配置的代替方案

I大俊

10-22

1万+

webpack DllPlugin配置的代替方案hard-source-webpack-plugin

【踩坑】webpack使用hard-source-webpack-plugin报错

于离别之朝束起约定之花的博客

10-20

2451

在使用插件给构建添加缓存时遇到上面的问题。

webpack 优化插件

lin819397746的博客

11-28

336

1 hard-source-webpack-plugin 功能：HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快。使用： npm install hard-source-webpack-plugin 地址： https://developer.aliyun.com/mirror/npm/package/hard-source-webpack-plugi

关于webpack优化的几个插件介绍

前端李小白的博客

07-29

1679

以下都是我在vue项目中使用过关于webpack的几个插件 1、hard-source-webpack-plugin HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）安装：npm install --save-dev hard-source-webpack-plugin 配置： const HardSourceWebpackPlug

terser-webpack-plugin与uglifyjs-webpack-plugin

05-02

terser-webpack-plugin与uglifyjs-webpack-plugin是两个用于压缩JavaScript代码的插件，都可以用于Webpack。 uglifyjs-webpack-plugin是一个旧的插件，它使用UglifyJS进行压缩。它已经被广泛使用了很长一段时间，并且在许多项目中仍然被使用。但是，它已经不再维护，而是由terser-webpack-plugin取代。 terser-webpack-plugin是一个新的插件，它使用Terser进行压缩。它比uglifyjs-webpack-plugin更快，同时也支持ES6语法。它也有更好的默认设置，可以更好地优化代码。综上所述，如果你需要在Webpack中压缩JavaScript代码，应该使用terser-webpack-plugin。如果你目前正在使用uglifyjs-webpack-plugin，应该考虑升级到terser-webpack-plugin。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交