Webpack4优化之hardSourceWebpackPlugin的报错问题

已于 2023-12-04 23:52:36 修改
阅读量1.3k 收藏 1
点赞数 1
分类专栏： 我的疑难杂症 文章标签： 前端 webpack
于 2023-02-07 15:44:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59962790/article/details/128919567
版权

最近工作项目编译太卡，由于模块太多，前端项目启动起码要6分钟，作为一个前端着实不能容忍，于是开启了优化之旅，仅仅只是对开发环境做了下优化。

首先和网上提供一样，分析一下编译的时间，看看哪个部分花的时间最多，使用插件SpeesMeasureWebpacPlugin，跑下来启动时间在6～7分钟，看了下大部分的时间都在加载loader的时候耗时最长，然后主要优化两个方向，一个是多线程编译，一个是添加缓存。

多线程编译采用了thread-loader，在Vue.confit.js中配置，但是配置下来，感觉速度提升并不明显，确实thread-loader也工作了，4个进程同时编译，速度没降多少。

项目webpack版本是4，缓存需要使用插件，我选择了hardSourceWebpackPlugin，在 configureWebpack配置好以后，第一次编译的时间非常的长，因为要编写新的缓存（write new cache），在第二次启动，速度一下子就降到了半分钟内，这个确实一下子优化了不少，然而在保存编译时，惊喜来了，他报错了，不能保存编译，我傻眼了，报错具体内容：

Can't read property  'call' of undefined

然后开始了漫漫网上搜索的过程，有的说是版本问题，有的说是可以配置hardSourceWebpackPlugin的子插件，说得最多的就是webpack5，在配置中加Cache属性，然而我是4版本，最后统统都没派上用场！

我也陷入了误区，一直搞来搞去，最后发现了一个帖子，hardSourceWebpackPlugin不能和speedMeasureWebpackPlugin同时使用，我去，搞了半天是这样，于是我去除了测速的功能，就好了，一切就好了，速度也快了很多，这个也算踩坑了

 

 

Goat恶霸詹姆斯
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack 优化插件粗讲及使用
朴素的小麦
03-19 1119
更好的代替者DLL；HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）您可以选择设置 HardSource 将其缓存写入和读取的位置，以及确定何时创建新缓存的哈希值。
webpack 优化构建速度的插件
最新发布
qq_37550440的博客
06-06 860
webpack 优化构建速度的插件HardSourceWebpackPlugin比DLL动态链接库更优秀优化非常猛项目启动时间少80%，CDN注入
webpack 配置 之 HardSourceWebpackPlugin
weixin_42192113的博客
04-01 9386
在webpack3中为了提高构建速度，我们往往会用到 DllPlugin 和 DllReferencePlugin 插件，基本的配置如下： 1. 配置webpack.dll.config.js DllPlugin 是webpack内置插件，不需要额外安装 module.exports = {= entry: { // 第三方库 react: ['react', 'react-dom', 'react-redux'] }, output: { // 输出的动态链接库的文件名
vue项目本地开发构建速度优化 hard-source-webpack-plugin
Mr_linjw的专栏
11-18 1275
有些项目因为项目需求点多、功能复杂、管理混乱、引入第三方插件/样式库过多、本身项目页面较多、文件较多等等原因，会导致项目体积变大、本地构建速度明显变慢，这时就需要对项目webpack进行一些设置来提高打包效率、加快打包时间。hard-source-webpack-plugin会进行文件的启动缓存，第一次启动之后，会给文件添加一次缓存，然后在第二次启动的时候，直接在本地缓存进行。缺点：每次修改配置项之后，需要项目重新启动的时候，这个时候是需要重新进行项目的热更新，跟没有配置一样。
webpack使用hard-source-webpack-plugin
weixin_53114994的博客
08-30 760
文件中进行以下配置。该插件可以帮助你在开发过程中提升 Webpack 构建的速度，通过缓存中间构建结果。并在配置中进行使用。要在你的Vue项目中添加。
【踩坑】webpack使用hard-source-webpack-plugin报错
于离别之朝束起约定之花的博客
10-20 2448
在使用插件给构建添加缓存时遇到上面的问题。
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
11-20
在Vue项目中，当使用`uglifyjs-webpack-plugin`进行代码压缩和优化时，可能会遇到打包报错的问题。报错信息通常包含"Unexpected token: keyword (const)"，这表明UglifyJS无法处理ES6语法，因为UglifyJS只支持ES5及...
解决vue-cli webpack打包开启Gzip 报错问题
10-16
主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
webpack dll打包重复问题优化的解决
10-17
webpack DLL打包重复问题的优化主要涉及到在使用webpack的DllPlugin时，如何避免生成的DLL包中包含重复的代码。DLL（Dynamic Link Library）打包是为了提高构建速度，它将常用的库预先打包成一个独立的文件，后续的...
硬源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之优化篇（四）：hard-source-webpack-plugin,webpack DllPlugin配置的代替方案
I大俊
10-22 1万+
webpack DllPlugin配置的代替方案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的插件配置中添
我是如何把vue项目启动时间从70s优化到7秒的
CRMEB小程序商城的博客
12-20 7287
可怕的启动时间 公司的产品是一个比较大的后台管理系统，而且使用的是webpack3的vue模板项目，单次项目启动时间达到了70s左右 启动个项目都够吃一碗豆腐脑了，可是没有豆腐脑怎么办，那就优化启动时间吧！ 考虑到升级webpack版本的风险还是比较大的，出了一点问题都得找我，想想还是先别冒险，稳妥为主，所以我选择了通过插件来优化构建时间。 通过查阅资料，提升webpack的构建时间有以下几个方向： 多进程处理文件，同一时间处理多个文件 预编译资源模块，比如把长时间不变的库提取出来做预编译，构建的时候直接
hard-source-webpack-plugin 报错- TypeError: Cannot read property ‘call‘ of undefined
qq_40652104的博客
03-02 778
hard-source-webpack-plugin 报错- TypeError: Cannot read property 'call' of undefined
Webpack 提升开发 run dev编译速度 hard-source-webpack-plugin
郑州彭于晏
07-12 406
hard-source-webpack-plugin npm install hard-source-webpack-plugin --save-dev const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') plugins: [ new HardSourceWebpackPlugin() ] config.plugin(‘cache’).use(HardSourceWebpackPlugin)
webpack4与它适配的loader版本记录
weixin_46229508的博客
08-03 2685
webpack4与它适配的loader版本记录
webpack优化-速度优化-hard-source-webpack-plugin
热门推荐
看风听雨
09-18 2万+
1、背景       在项目实现的过程中，想在代码更改的同时，查看效果的改变，而这个时候长时间的编译等待，造成了额外的时间浪费。 2、简介    HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）。 3、实现    ...
compression-webpack-plugin 打包后报错require is not defined
05-20
这个错误可能是因为在打包压缩时，某些模块或文件中使用了 `require` 语句，但是浏览器环境并不支持 `require`。 要解决这个问题，你可以使用 `webpack` 的 `resolve.alias` 配置项将 `require` 替换为 `import`。例如： ```javascript const path = require('path'); module.exports = { // ... resolve: { alias: { // 将 require 替换为 import 'require': 'import', }, }, }; ``` 如果你使用的是 `webpack 4`，则可以使用 `webpack-require-from` 插件来解决这个问题。这个插件会将 `require` 替换为一个全局变量，使得 `require` 在浏览器环境中也可以正常使用。 ```javascript const WebpackRequireFrom = require('webpack-require-from'); module.exports = { // ... plugins: [ new WebpackRequireFrom({ // 指定全局变量名 variableName: 'globalRequire', }), ], }; ``` 你需要在 HTML 文件中手动引入 `require.js` 文件，并将 `globalRequire` 变量指向 `require` 函数。 ```html <script src="/path/to/require.js"></script> <script> window.globalRequire = require; </script> ``` 这样就可以在浏览器环境中使用 `require` 函数了。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Goat恶霸詹姆斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值