首页 > 其他分享 >Vite中启用GZIP压缩

Vite中启用GZIP压缩

时间:2024-09-06 14:25:09浏览次数:8  
标签:插件 compression 启用 压缩 Vite GZIP vite

在Vite中启用GZIP压缩并不是默认功能,但你可以通过使用插件来实现这一目标。
下面是一个使用 vite-plugin-compression 插件的例子,这个插件允许你在Vite项目中启用GZIP压缩。
首先,你需要安装 vite-plugin-compression 插件。
打开你的终端并运行以下命令: npm install --save-dev vite-plugin-compression 接着,你可以在 vite.config.js 文件中配置插件。如果你还没有这个文件,
你需要创建一个。以下是配置示例:
// vite.config.js import { defineConfig } from 'vite'; import compression from 'vite-plugin-compression'; export default defineConfig({ plugins: [ compression({ verbose: true, // 输出压缩日志 disable: false, // 是否禁用压缩 threshold: 10240, // 对超过10KB的文件进行压缩 algorithm: 'gzip', // 使用gzip压缩 ext: '.gz', // 压缩后文件的扩展名 }), ], }); 在这个例子中,我们启用了GZIP压缩,并设置了几个选项:
verbose: true 表示会在控制台输出压缩信息。
disable: false 确保插件不会被禁用。
threshold: 10240 指定只有大于10KB的文件才会被压缩。
algorithm: 'gzip' 指定使用GZIP压缩算法。
ext: '.gz' 设置压缩后的文件扩展名为 .gz。
现在当你运行 vite build 命令时,Vite将会压缩符合条件的文件,并在构建输出目录中生成 .gz 文件
请注意,上述配置仅适用于生产环境的构建。在开发环境下,Vite并不会自动发送GZIP压缩的文件,因为开发服务器通常不支持这样的功能。
为了在开发环境中支持GZIP压缩,你可能需要使用支持GZIP的开发服务器,或者配置代理到支持GZIP的服务器。
如果你希望在开发环境中也启用GZIP压缩,可以考虑使用其他插件,例如 vite-plugin-gzip-dev 或者手动设置服务器中间件来处理GZIP请求。
不过,通常来说在开发环境中使用GZIP压缩并不常见,因为它可能会增加开发服务器的复杂性,并且对于开发过程来说没有必要。

 

标签:插件,compression,启用,压缩,Vite,GZIP,vite
From: https://www.cnblogs.com/xmyfsj/p/18400164

相关文章

  • 记录一次关于vite打包
    问题:vue工程存在两个入口A,B,A不需要B中的资源,但是打包都打包到common.js中了,导致common.js文件很大,A入口首次加载资源很慢。最后解决办法:A入口和B入口分开打包,搞两个vite.config.ts。在package.json中"build": "npm-run-all --parallel buildIndex buildLightCCBar  --......
  • 深入了解Vite:依赖预构建原理
    前言前面我们有提到Vite在开发阶段,提倡的是一个no-bundle的理念,不必与webpack那样需要先将整个项目进行打包构建。但是no-bundle的理念只适合源代码部分(我们自己写的代码),vite会将项目中的所有模块分为依赖与源码两部分。依赖:指的是一些不会变动的一些模块,如:node_modules中的第......
  • vue3+vite+echarts集成中国地图
    前段时间我们的项目有使用到echarts集成中国地图的功能,实际上这个功能我进项目组的时候人家就已经完成了,我这边只是简单复刻了一遍,先看看效果图;上代码,走起<template><!--第一步:设置地图容器--><divid="map"style="width:100vw;height:100vh"></div></template>......
  • 前端工具Webpack和Vite对比分析和选型
    Webpack和Vite都是现代前端开发中广泛使用的构建工具,它们在功能、性能、开发体验以及应用场景等方面存在一定的差异。以下是对Webpack和Vite的对比分析:1.构建速度Webpack:Webpack在构建过程中会将所有模块打包成一个或多个bundle文件,这个过程可能会相对较慢,特别是在大型项目......
  • Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板
    基于electron32+vue3setup+pinia2桌面端os管理解决方案ElectronVue3OS。vue3-electron32-os全新原创Electron32+Vite5+Vue3+Pinia2+ArcoDesign+Echarts+Swiper搭建桌面版os管理模板。内置macos+windows两种桌面布局风格、自研可拖拽式栅格布局模板引擎、支持JSON动态配置桌面菜......
  • 前端Pinia教程,Pinia+Vue3+Vite+TypeScript+腾讯IM聊天解决方案项目实战
    前端Pinia教程:‌Pinia+Vue3+Vite+TypeScript+腾讯IM聊天解决方案项目实战在前端开发中,‌随着Vue3的普及和Vite构建工具的兴起,‌结合TypeScript和Pinia进行状态管理成为了一个高效且受欢迎的选择。‌本文将详细介绍如何结合这些技术栈以及腾讯IM聊天解决方案,‌搭建一个高效的前端......
  • Vue3+Vite+Vant-UI+Pinia+VueUse开发双端业务驱动技术栈商用项目
    前言:个人git仓库,全是干货一、本次搭建项目涉及到vue3、vite、pinia、vue-router、typescript、element-plus,下面先简单介绍一下大家比较陌生的框架或库1、vue3vue团队官宣:2022年2月7日,vue3作为vue的默认版本。现在打开vue官网,界面默认显示的是vue3版本的指导文档。vue团队在......
  • Vite2.0+ElementPlus+Koa2+Mongo全栈开发通用后台系统Vue3
    Vite2.0+ElementPlus+Koa2+Mongo全栈开发通用后台系统Vue3前言当前基于NodeJs框架的全栈工程实践非常之火,作为一个很长时间未接触代码的前程序猿。一直有点手痒痒,想尝试一下这种全新的编程体验,于是就重新开始了填坑的不归之路。这一套框架是基于现在的前后台分离的指导原则来......
  • TS4+Vite+Vitest+Vitepress Vue3.3 自主打造媲美ElementPlus的组件库
    TS4+Vite+Vitest+VitepressVue3.3自主打造媲美ElementPlus的组件库这个问题看起来是想要创建一个类似ElementPlus的Vue组件库,并且使用TypeScript、Vite、Vitest和Vitepress进行开发。以下是一个简化的指南,用于创建一个自己的Vue组件库项目框架。安装必要的工具:npm......
  • Vue3+NestJS+Vite4+TS4+Mysql8+Nginx全栈开发企业级管理后台
    vite打包快的原因:冷启动1.esbuild构建依赖,go语言编写多线程打包。2.原生的esm方式提供源码,浏览器分担了一部分工作。HMR热更新1.缓存机制,利用浏览器http头部,源码模块请求根据304协商缓存和依赖模块请求通过强缓存(cache-control:max-age=315360000,public,immutable)只是模块......