compression-webpack-plugin Gzip压缩

最新推荐文章于 2024-05-13 10:08:00 发布
最新推荐文章于 2024-05-13 10:08:00 发布
阅读量4.3k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42859868/article/details/99601699
版权

compression-webpack-plugin Gzip压缩

vue项目中由于对对组件的不正确使用、对第三方插件的滥用、本身项目功能复杂导致的打包后项目巨大，影响用户体验，因此vue脚手架2.x中内置的一个压缩"糖"

首先在config/index.js中修改下方代码

productionGzip: true,//原来为false
productionGzipExtensions: ['js', 'css'],

安装依赖

npm install compression-webpack-plugin --save-dev

运行 npm run build

报错的话，可以在pakage.json中对compression-webpack-plugin的版本进行降低 亲测降低到1.1.11 再执行一次 npm install 后npm run build 成功了

nothing-coder
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 项目打包优化 webpack 3.0+
weixin_30613727的博客
07-30 359
　　配置优化 　 隐藏源码 　　在 config 文件夹下index.js 中 build 　　　productionSourceMap: true改为productionSourceMap：false即可 　　开启 gzip 压缩 　　在 config 文件夹下index.js 中 　　productionGzip: false 改为product...
记一次 React 项目的优化（webpack4 插件的使用）
weixin_33913377的博客
06-24 301
这里记录了自己在开发一个 React 项目时使用 Webpack 优化项目的过程，欢迎大家围观点赞或吐槽。 学习 React 时候，写了个个人博客站点。使用 webpack 作为打包工具，在这之前学习 webpack 时候，知道 webpack 有插件可以做资源压缩、抽离，以达到减小资源的体积，便于缓存资源的目的，但是开始这个项目时候并没有想立即使用 webpack 的插件带来的便利，主要是想先写...
推荐使用：Webpack 的压缩神器 —— compression-webpack-plugin
最新发布
gitblog_00036的博客
05-13 504
推荐使用：Webpack 的压缩神器 —— compression-webpack-plugin 项目地址:https://gitcode.com/webpack-contrib/compression-webpack-plugin 在前端开发中，优化资源加载速度是提升用户体验的关键一环。为了实现这一点，我们可以借助 Webpack 插件 compression-webpack-plugin 来对...
vue3项目性能优化(webpack版本)
h1606641309的博客
10-25 284
1、在 vue.config.js 中进行引入2、 在 configureWebpack 配置项中进行使用。
前端webpack项目性能优化——体积压缩和compression-webpack-plugin的使用
ta_huang的博客
04-18 686
脚手架搭建的项目，会默认开启sourceMap，此时打包下来的包会很大，如图：map文件比所有js文件都大，会导致包整体体积过大，js文件大小超过100k，也很大不符合预期，这还只是空项目的情况下。如果觉得还不够小的话可以通过其他方式进一步进行优化。
Vue2 打包优化首屏加载速度
Everglow___的博客
04-24 252
之前做的Vue2项目，上线后，第一次加载时，发现特别慢，打开控制台后，发现是一个名字叫chunk-vendors.js的文件体积过大，导致首屏加载速度特别慢。这个js文件是项目中引入的第三方库打包而成的，如何解决打包后文件体积过大问题？
nuxt-precompress:用于gzip和Brotli的Nuxt模块自动压缩并提供服务
04-29
compression-webpack-plugin支持brotli基于添加的对，因此，如果您使用较低的nodejs版本，则此模块将仅为您提供gzip版本，但如果存在brotli，则也将为其提供服务。 模块不会覆盖render.compressor选项，因此它仅...
Vue CLI3 开启gzip压缩文件的方式
01-19
webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件： npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置： 压缩...
Vue-Cli项目优化操作的实现
10-16
同时，需要在Webpack配置中启用GZip压缩，这可以通过安装`compression-webpack-plugin`并在`config/index.js`中设置`productionGzip`为`true`来实现。如果遇到编译错误，可尝试降级到`compression-webpack-plugin@...
vue项目开启Gzip压缩和性能优化操作
01-18
npm install –save-dev compression-webpack-plugin 第二步：运行 npm run build打包项目，这时可能会报错，提示ValidationError: Compression Plugin Invalid Options。 根据官网提示，需要将...
webpack插件compression-webpack-plugin
qq_40922656的博客
07-18 3096
浏览器向服务器发出请求，并且在请求头中声明可以使用gzip的编码格式，服务器接受到请求之后，读取压缩后的文件，服务器直接返回给浏览器gzip格式的文件，浏览器进行解压缩，这样以来就节省了服务器压缩的时间。打包的时候开启gzip可以很大程度减少包的大小，页面大小可以变为原来的30%甚至更小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验。2、为什么gzip压缩后页面加载速度提升。(3) npm run build 打包。（2）配置webpack。（4）配置nginx。
项目性能优化之用compression-webpack-plugin插件开启gzip压缩
weixin_42254016的博客
01-26 986
背景：vue项目打包发布后，部分js、css文件体积较大导致页面卡顿，于是使用webpack插件compression-webpack-plugin开启gzip压缩。
npm安装compression-webpack-plugin插件编译报错问题记录
Dragonfly_w的博客
12-07 2713
缘由是本人在不能链接外部网络情况下开发项目，由于需要把项目压缩成。.gz文件，所以就想到这个插件 本人先是在外网本上下载这个插件包，直接靠近项目的包文件夹中，结果造成vue编译报错 * 显示让npx browserslist@lastest --update-db(不用管它) * NOT SUPPORTED: option jsonPointes. Deprecated jsPropertSyntax can be used instead.(废话) 主要来了（TypeError: cannot re
Vue中打包时压缩插件：compression-webpack-plugin
~~
03-11 5085
安装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
npm安装compression-webpack-plugin插件报错问题记录
热门推荐
刘先森
03-10 2万+
文章目录问题再现解决方案总结 问题再现 因项目需要，在前端项目中安装compression-webpack-plugin插件 运行npm install compression-webpack-plugin命令之后在package.json文件中已经出现了"compression-webpack-plugin": "^7.1.2"这个依赖项 运行npm run serve命令启动项目，报错信息如下： ERROR Error: Rule can only have one resource sou
compression-webpack-plugin压缩前端代码&服务器nginx代理相关配置
Liuer_Qin的博客
12-02 1066
compression-webpack-plugin压缩前端代码&服务器nginx代理相关配置
vue 项目配置 webpack compression-webpack-plugin 启用 gzip压缩
dearyang
07-09 1万+
一、命令行安装compression-webpack-plugin npm i -D compression-webpack-plugin 二、在 vue.config.js 里面配置compression-webpack-plugin，如果没有vue.config.js则在项目根目录创建vue.config.js "use strict"; const path = require("path"); const CompressionWebpackPlugin = require("comp..
Vue配置compression-webpack-plugin实现Gzip压缩
GongWeiBuQi的博客
08-11 1387
vue项目编译之后，生成的js文件较大，部署之后，页面加载缓慢，于是引入Gzip压缩技术，可以很大程序的减少文件的大小，实现加载更快，提高用户体验。
uniapp开启gzip配置
weixin_43019353的博客
05-23 2761
根目录创建vue.config.js文件 vue.config.js const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack:{ plugins:[ new CompressionWebpackPlugin( { filename: "[path][base].gz", algorithm: "gzip",
compression-webpack-plugin
11-12
compression-webpack-plugin是一个webpack插件，用于在构建过程中对生成的资源进行gzip压缩，以减少文件大小，提高加载速度。使用该插件需要先安装，然后在webpack配置文件中引入并添加到plugins数组中。以下是一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值