vue打包如何开启gzip压缩

news2024/11/10 14:35:05

文章目录

    • 场景
    • gzip压缩有两种方案:
    • 个人实践

场景

本人前端打包的js达到了6.9M,导致网站加载很慢,想了下可以用gzip的方式压缩,减少文件大小。
“前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。”

搜索了下,资料整理如下:

gzip压缩有两种方案:

  • vue项目打包时生成.gz压缩文件,通过nginx直接返回。
  • nginx实时生成.gz压缩文件并返回给客户端。

这篇文字写的很好的:
在这里插入图片描述
原文地址:
https://zhuanlan.zhihu.com/p/610206099

个人实践

本人在实际场景,发现前端vue打包没生效,没办法才用了nginx的压缩方式:
代码如下:
在这里插入图片描述

在sever中加入下面的代码

  gzip on;
  gzip_vary on;
  gzip_disable "MSIE [1-6]\.";
  gzip_static on;
  gzip_min_length 256;
  gzip_buffers 32 8k;
  gzip_http_version 1.1;
  gzip_comp_level 5;
  gzip_proxied any;
gzip_types text/plain text/css text/xml application/javascript application/x-javascript application/xml application/xml+rss application/emacscript application/json image/svg+xml;


然后浏览器就是
在这里插入图片描述
从6M压缩到了1M多,网站加快了很多。


大功告成!!!

“前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。”

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/462936.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

什么蓝牙耳机好?测评达人精选五款性价比高蓝牙耳机推荐

用蓝牙耳机听歌、刷视频、玩游戏已经成为趋势,有线耳机已经逐渐被取代,但蓝牙耳机价格跨度大,品牌和型号也非常多,究竟什么蓝牙耳机好?我作为测评员这几年已经体验过五十款蓝牙耳机,今天就来总结五款性价比…

模仿网易云音乐黑胶唱片的交互实现

今天在 .NET MAUI 中我们来实现这个交互效果,先来看看效果: 使用.NET MAU实现跨平台支持,本项目可运行于Android、iOS平台。 创建页面布局 项目模拟了网易云音乐的播放主界面,可播放本地音乐文件。使用MatoMusic.Core作为播放内…

ChatGLM ptuning predict(预测)为空值的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

html学习(布局方式(layout)、浮动(float)、定位(position)、弹性盒(flex))

布局方式(layout) 文档流 文档流(normal flow) 文档流通俗的讲,就是一个web页面中,每一个模块只能从上到下从左往右的方式排列在页面上。 将窗口自下而上分成一行一行,应在每行中按从左至右的依次排放元素&#xff0…

[ZJCTF 2019]EasyHeap-patchlibc-调试

1,三连 主要功能: 1、malloc申请chunk 2、修改chunk内容 3、free chunk 4、exit 堆题多看一个libc信息: 2,IDA分析 2.1、malloc申请chunk heaparray[i]:存放 chunk 的地址。read_input(heaparray[i], size):向 chunk 写入 s…

亚马逊云科技宣布四大举措,全方位赋能创新成长企业

4月13日,以“加速创新,成就未来”为主题的亚马逊云科技创新成长中国行深圳论坛圆满举行。会上亚马逊云科技宣布,将围绕创新成长企业的三大业务需求——云上创新、出海拓展、业务加速,提供行业聚焦、技术支撑、伙伴扶持、人才培养四…

ENVI5.3 自动配准流程化工具(Image Registration Workflow)配准方法流程

ENVI5.3 自动配准流程化工具(Image Registration Workflow)配准方法流程。 打开 ENVI软件中的Image Registration Workflow工具,分辨打开参考图像和待校正的图像。 Base Image File是参考图像,参考图像的范围应比待校正图像的范围…

LaTeX论文自动化排版

本文介绍了一些论文写作的在线课程,方便读者朋友们自学,提高论文写作的能力。论文写作的在线课程非常多,读者朋友们也可以在网上自行搜索,选择适合自己的在线课程进行学习。如需要打开课程的网站,请复制课程的网址到浏…

威胁行为者针对云中的常见漏洞

Palo Alto Networks 已发布其第 42 单元云威胁报告的第 7 卷。该报告调查了 1300 多家组织。它分析了所有主要云服务提供商 (CSP) 的 210000 个云帐户、订阅和项目中的工作负载,为安全领导者和从业者提供了云安全的多方面视图。 云迁移的速度从 2021 年的 3700 亿…

Codeforces Round 867 (Div. 3) (E-G)

Problem - E - Codeforces (1)题目大意 给你一个字符串,问你让字符串每一对相对应位置都不同的最小操作数是多少?(A[i]和A[n - i],A[i 1]和A[n - i - 1]) (2)解题思路 1.首…

数据库基础篇 《16.变量、流程控制与游标》

数据库基础篇 《16.变量、流程控制与游标》 1. 变量 在MySQL数据库的存储过程和函数中,可以使用变量来存储查询或计算的中间结果数据,或者输出最终的结果数据。 在 MySQL 数据库中,变量分为系统变量以及用户自定义变量。 1.1 系统变量 1…

深度学习入门:多层感知机实现异或门

文章目录 前言感知机2层感知机实现异或门总结参考文献: 前言 最近又开始看深度学习的内容了,好久不用忘得差不多了,先从最简单的感知机入手了,这里记录下用2层感知机实现异或门。 感知机 什么是感知机呢?这里粗浅的介…

初步了解c语言(三)

注:此篇文章仅限初步了解,本小白后续会持续进行详解。 目录: 函数数组数组的定义数组的下标 操作符常见关键字关键字static的使用修饰局部变量修饰全局变量修饰函数 关键字register的大概了解#define定义常量和宏结构体💞结尾 函数…

RuntimeError: “LayerNormKernelImpl“ not implemented for ‘Long‘解决方法

问题出现的场景: 输入: import torch import torch.nn as nn atorch.randint(10,[3,4]) # atorch.DoubleTensor(a) # aa.double() print(a) layer_normnn.LayerNorm(4) layer_norm(a) 我就是想测试一下经过layernorm之后的输出会变成什么样 但是报错…

Pycharm中如何安装 OpenAI ——ChatGPT的python包?

本文由 大侠(AhcaoZhu)原创,转载请声明。 链接: https://blog.csdn.net/Ahcao2008 Pycharm中如何安装 OpenAI ——ChatGPT的python包? 摘要背景安装1、安装前准备2、安装前提条件3、依赖库 最佳安装过程1、检查 VC2、看哪些依赖库未安装3、将未装模块写成 test02.b…

js 打开资源管理器(经典范例:纯前端选择并预览图片)

效果预览 完整代码范例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"width…

C++STL详解(十) -- 使用哈希表封装unordered_set和unordered_map

文章目录 哈希表模板参数改造针对模板参数V改造增加仿函数获取具体数据类型. 哈希表的正向迭代器正向迭代器中的内置成员:正向迭代器的成员函数 哈希表插入函数的修改(适用于unordered_map)一个类型K去做set和unordered_set他的模板参数的必备条件.unordered_set的模拟实现(完整…

不得不的创建型模式-原型模式

原型模式是一种创建型模式&#xff0c;它通过复制一个已有对象来创建新的对象&#xff0c;而无需知道新对象的具体类型。 原型模型的结构&#xff1a; 下面是一个简单的C实现原型模式的代码示例&#xff1a; #include <iostream> #include <string> #include <…

React markdown 编辑器

react-markdown 是一款 github 上开源的适用于 react 的 markdown 组件&#xff0c;可以基本实现 markdown 的功能&#xff0c;且可以根据自己实际应用定制的 remark 组件。 安装 安装 markdown 预览插件 react-markdown npm install react-markdown或者&#xff1a; yarn …

Flask+mysql简单问答网站(实现公网可访问)

先到github下载仓库文件 https://github.com/QHCV/flask_mysql_blog python版本3.8&#xff0c;提前安装好Mysql数据库 1.安装python包 pip install -r requirements.txt2.修改配置文件config.py Mysql数据库用户名和密码用于发送验证码的邮箱配置 ​ 在设置->账户下开…