compression-webpack-plugin GZip压缩报错

最新推荐文章于 2024-08-14 15:37:28 发布
最新推荐文章于 2024-08-14 15:37:28 发布
阅读量2.9k 收藏 2
点赞数 1
文章标签： webpack ViewUI
原文链接：https://juejin.im/post/5cd3d80ae51d453f146bb8ee
版权
本文介绍了在使用compression-webpack-plugin进行GZip压缩时遇到的报错情况，以及如何通过查阅文档找到解决方案，强调了升级版本后配置的变化，并提醒开发者即使是复制粘贴代码也要注意查看文档。
摘要由CSDN通过智能技术生成

compression-webpack-plugin GZip压缩报错

compression-webpack-plugin用与在打包时直接打出gzip后的文件，减轻服务器的压力 最近新开了项目，作为复制粘贴工程师部分代码当然是复制之前的项目的了，然鹅··· 报错了···

万能百度了白天，都是说降级compression-webpack-plugin版本到1.x，复制粘贴工程师的自我修养告诉我不能这样，就仔细看了看compression-webpack-plugin的Readme，发现这货2.x版本将1.x版本的配置项asset更换成了filename

更改前

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm:
最低0.47元/天 解锁文章
weixin_33938733
关注
Vue配置compression-webpack-plugin实现Gzip压缩
m0_67392010的博客
03-09 3153
gzip简介 HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。 简单来说，gzip是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多。 那么客户端和服务器之间是如何通信来支持gzip的呢？通过下图我们可以很清晰的了解。 nginx启用gzip gzip on; # 开启Gzip gzip_static on;
compression-webpack-plugin报错记录
abingll的博客
03-11 648
在vue.config.js里引入后，什么配置都没有写，就开始报错：如下 查看报错信息最开始没有找到问题所在，后查找各种方案和配置及版本都没能解决， 最后一条一条查看报错信息，发现如下： 项目里不知道什么时候有了这么一个文件，在其中引入了vue.config.js 导致使用compression-webpack-plugin报错 ...
compression-webpack-plugin, 准备压缩的资产版本以提供内容编码.zip
09-18
compression-webpack-plugin, 准备压缩的资产版本以提供内容编码 压缩插件准备压缩的资产版本以提供内容编码安装npm i -D compression-webpack-plugin用法webpack.config.jsconst Compressio
VUE+webpack开启Gzip压缩方案
fk1246444的博客
08-14 252
比较庞大的项目在生产环境下会影响加载速度，而Gzip压缩方案可以将打包之后的体积减少30%甚至更小，在生产环境下大大提升加载速度，提高用户的使用体验。
01-CompressionWebpackPlugin---提高 Web 应用性能的利器
weixin_46002095的博客
05-30 2247
CompressionWebpackPlugin 是一个用于 Webpack 的插件，能够在构建过程中生成压缩文件（例如.gz和.br文件）。这些压缩文件可以显著减少资源文件的大小，从而加快网页的加载速度。浏览器会优先请求这些压缩文件，减少传输数据量，提高页面响应速度。CompressionWebpackPlugin 是一个强大且易于使用的 Webpack 插件，可以显著减少资源文件的大小，提高网页加载速度。
Vue中打包时压缩插件：compression-webpack-plugin
03-11 5147
安装compression-webpack-plugin cnpm i -D compression-webpack-plugin@6.1.1 vue.config.js中配置： const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { productionSourceMap: false,// 设为false，既可以减少包大小，也可以加密源码 tra
Vue中打包压缩插件：compression-webpack-plugin
半夏_2021的博客
05-06 1万+
Vue中打包压缩插件：compression-webpack-plugin
vue中webpack配置compression-webpack-plugin打包压缩和优化，terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化
葫芦娃y的博客
02-06 3879
vue中webpack配置compression-webpack-plugin打包压缩和优化，terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化
记vue+webpack+compression-webpack-plugin+前端gzip压缩
舍曼将军的博客
08-03 492
前情：原本是打包出来发现包很大，想关闭sourcemap的，然后在根目录创建vue.config.js文件不生效，查查查，搜搜搜，看到一个网友说vue-cli跑项目建vue.config.js文件，webpack跑项目建webpack.config.js文件（package.json中查看）……然，webpack.config.js也不生效。再回头仔细看目录结构，发现有个config文件夹，里面的属性名和数据结构都很眼熟……emm……难怪不生效，人家自己有啊…=。=… 项目使用的vue-cli版本 @vue
compression-webpack-plugin GZip插件打包报错 ValidationError: Compression Plugin Invalid Options
Jane_96的博客
08-19 2466
安装插件： yarn add compression-webpack-plugin 配置webpack.js ： const CompressionPlugin = require("compression-webpack-plugin"); return ( plugins: [ new BundleAnalyzerPlugin(), isEnvProductio...
compression-webpack-plugin首屏加载优化
qq_38143787的博客
10-19 6057
文章目录一、插件打包.gz文件二、nginx配置 优化前后效果对比图： 从图片中可以看出，首屏的加载时间提升了很多，从5.55s提升到了578ms，这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。 一、插件打包.gz文件 1.安装： npm install --save-dev compression-webpack-plugin 或者 yarn add compression-webpack-plugin --save-dev 2.在vue.c
TypeError Cannot read property ‘tapPromise‘ of undefined
web13638590209的博客
02-22 648
// 打包压缩 config.plugin('CompressionPlugin').use( new CompressionPlugin({ filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz) algorithm: 'gzip', // 使用gzip压缩 test: new RegExp('\.(' + ['js', 'css'].join('|') + ')$'), //...
webpack版本及对应的插件版本记录
ccxbt的博客
05-18 2749
webpack版本及对应的插件版本记录
compression-webpack-plugin报错问题
小剑儿的博客
09-25 8724
vue-cli项目中使用compression-webpack-plugin版本问题报错，查阅资料才知道是因为在执行npm install时安装了最新的版本，你只需要 npm install --save-dev compression-webpack-plugin@1.1.12 即可解决 ...
compression-webpack-plugin插件报错‘tapPromise‘ of undefined
zhaoyang7357的博客
01-13 1367
关于compression-webpack-plugin插件报错’tapPromise’ of undefined问题 情景概述：vue-cli4安装最新版compression-webpack-plugin插件7.1.2版本npm run build出现以下情况 解决办法：在package.json文件中将compression-webpack-plugin插件版本降至5.0.0，重新打包 ...
npm安装compression-webpack-plugin插件编译报错问题记录
Dragonfly_w的博客
12-07 2844
缘由是本人在不能链接外部网络情况下开发项目，由于需要把项目压缩成。.gz文件，所以就想到这个插件 本人先是在外网本上下载这个插件包，直接靠近项目的包文件夹中，结果造成vue编译报错 * 显示让npx browserslist@lastest --update-db(不用管它) * NOT SUPPORTED: option jsonPointes. Deprecated jsPropertSyntax can be used instead.(废话) 主要来了（TypeError: cannot re
前端开发遇到Cannot find module ‘compression-webpack-plugin‘问题解决
热门推荐
zy103118的博客
09-01 1万+
------------------------------- 下面是参考的网上的内容（看了下面这个帖子就试了一下上面的内容，问题就解决了） 原文链接：https://www.cnblogs.com/xyyt/p/11384818.html vue-cli webpack打包开启Gzip 报错—— Cannot find module 'compression-webpack-plugin 异常描述： 复用以前框架，打包的时候报异常提示： Cannot find module 'c...
vue安装compression-webpack-plugin后打包报错
最新发布
08-28
在Vue项目中安装`compression-webpack-plugin`插件后，可能会遇到打包时报错的情况。`compression-webpack-plugin`是一个用于压缩Webpack构建产出的静态资源（如CSS、JS）的插件，但在添加它之前需要确认几个步骤： 1. **兼容性检查**：确保你的webpack版本支持该插件，因为某些版本可能存在不兼容。 2. **正确配置**：在你的webpack配置文件(`config/index.js` 或 `vue.config.js`) 中，你需要正确地应用这个插件。通常会把它添加到output部分，并设置合适的压缩选项，例如`algorithm`, `test`等。 ```js const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { //... optimization: { minimizer: [ new CompressionWebpackPlugin({ algorithm: 'gzip', // 压缩算法，默认为gzip test: /\.js$|\.html$|\.css$/, // 指定要压缩的文件类型 threshold: 10240, // 文件大小阈值，低于此值时不压缩 minRatio: 0.8, // 压缩比率低于此值时不压缩 }), ], }, }; ``` 3. **处理错误**：如果打包过程中报错，可能是由于其他依赖冲突、语法错误或者是配置文件解析问题。检查是否有语法错误，以及是否有其他模块与`compression-webpack-plugin`有冲突。 如果你已经按照上述步骤操作但仍出现问题，具体的错误信息将是非常重要的线索。常见的错误可能包括缺少必要的模块、路径问题或是对webpack的配置理解有误。建议你在错误日志中查找关键词，或者尝试在网上搜索相似错误以找到解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值