vite打包优化vite-plugin-compression的使用

这篇具有很好参考价值的文章主要介绍了vite打包优化vite-plugin-compression的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是gzip 压缩

当前端资源过大时,服务器请求资源会比较慢。前端可以将资源通过Gzip压缩使文件体积减少大概60%左右,压缩后的文件,通过后端简单处理,浏览器可以将其正常解析出来。

如果浏览器的请求头中包含c ontent-encoding: gzip,即证明浏览器支持该属性。

vite打包优化vite-plugin-compression的使用

gzip的使用

前端压缩

前端使用gzip压缩代码很容易,通过插件即可。

vue-cli中使用compression-webpack-plugin插件

const compressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
  configureWebpack: {
    plugins: [
      // 开启gzip
      new compressionWebpackPlugin({
        filename: "[path][base].gz",
        algorithm: "gzip",
        test: /.js$|.css$|.html$/,
        threshold: 10240, // 对超过10k的数据压缩
        minRatio: 0.8 // 压缩率小于0.8才会压缩
      }),
		]
}

vite中使用vite-plugin-compression插件

import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression()
  ]
})

浏览器解析

压缩的代码放到服务器后,需要后端配置一些东西,浏览器才可以解析

1、Nginx服务器只需要配置:

2、nodejs启用gzip以express框架为例:

npm install compression 
npm install @types/compression --save-dev
import compression from 'compression';
...
const app = express();
app.use(compression());
...

compression-webpack-plugin

插件打包对比

我们着重介绍下改插件的使用。如果我们项目中不配置此插件,打包后的项目资源如下:

vite打包优化vite-plugin-compression的使用
配置此插件后:

import { defineConfig } from 'vite
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression()
  ]
})

通过打包结果,我们看出部分文件进行了gzip压缩。

vite打包优化vite-plugin-compression的使用

配置项

可配置项名称 数据类型 默认值 释义
verbose boolean true 是否在控制台中输出压缩结果
filter RegExp or (file: string) => boolean /.(js mjs
disable boolean false 是否禁用
threshold number 1025 如果体积大于阈值,则进行压缩,单位为b
algorithm string gzip 压缩算法,可选[‘gzip’,‘brotliCompress’,‘deflate’,‘deflateRaw’]
ext string .gz 生成的压缩包的后缀
compressionOptions object - 对应压缩算法的参数
deleteOriginFile boolean - 压缩后是否删除源文件

我们简单配置下试试

import { defineConfig } from 'vite
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression(
      {
        algorithm: 'gzip',
        threshold: 10240,
        verbose: false,
        deleteOriginFile: true
      }
    )
  ]
})

这个配置项,我们通过algorithm指定了压缩算法为gzip;通过threshold指定文件大于10240b(10kb)时才压缩文件;通过verbose禁止在控制台输出压缩结果;通过deleteOriginFile指定压缩完文件后删除源文件。

vite打包优化vite-plugin-compression的使用

大家可以根据自己的需求配置。文章来源地址https://www.toymoban.com/news/detail-492859.html

到了这里,关于vite打包优化vite-plugin-compression的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite 打包优化

    在当今数字化时代,Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序,就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术,以及各种框架、库和工具。在本专栏中,我们将深入学习前端技

    2024年01月18日
    浏览(51)
  • vite打包配置以及性能优化

    首先该安装的插件,你要安装一下吧 这三个是基本的插件,其他优化的插件下面会介绍到 vite.config.ts文件中 这是最基本的配置,当然,可以上线,但仍然有很多待优化的地方 性能优化无非就是减小打包后体积;减小http请求;加速渲染; 首先安装一个打包体积分析的插件:

    2024年02月12日
    浏览(33)
  • Vite打包性能优化及填坑

    最近在使用  Vite4.0  构建一个中型前端项目的过程中,遇到了一些坑,也做了一些项目在构建生产环境时的优化,在这里做一个记录,以便后期查阅。(完整配置在后面) 上面是dist文件夹的截图,里面的内容已经有30mb了,是时候该做点什么了。 想要实现优化,首先我得先知道

    2024年02月10日
    浏览(34)
  • vite打包性能优化以及填坑

    目录 前言 项目优化前 分析 优化 拆分包 去除debugger CDN 加速 按需导入 文件压缩 图片压缩 viteImagemin报错 填坑 坑1 坑2 总结 配置         最近在使用  Vite4.0  构建一个中型前端项目的过程中,遇到了一些坑,也做了一些项目在构建生产环境时的优化,在这里做一个记录,

    2024年02月16日
    浏览(38)
  • vite配置cdn优化打包体积

    大家都知道前端性能优化的方法,cdn外部引入的方法可以使项目打包后体积大大缩小,所以是前端性能优化方面非常推荐的方法之一。 本文关于 vite2 vue3 + Ts 项目如何cdn引入 element plus 做一个简单教程,我们可以通过两种方式引入配置cdn。 由于 vite 的核心基于 rollup 和 webpac

    2024年02月05日
    浏览(44)
  • webpack插件compression-webpack-plugin

    1、为什么要压缩? 打包的时候开启gzip可以很大程度减少包的大小,页面大小可以变为原来的30%甚至更小,非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验 2、为什么gzip压缩后页面加载速度提升 浏览器向服务器发出请求,并且

    2024年02月17日
    浏览(34)
  • 挖坑记录:vite使用sass 报错:[plugin:vite:css] expected “;“.

    vite 引入sass依赖包,然后在vite.config.ts配置一下scss,这里就不详细说,不会的自行百度。 运行 yarn dev 项目 浏览器报错: 终端报错: 这时候一脸懵逼的,想着依赖包已经引入,vite.config.ts也配置了,开始以为是版本问题,或者以为是stylelint 样式约束问题。然后捣鼓了半天,

    2024年02月16日
    浏览(41)
  • vite使用mock插件的配置(vite-plugin-mock)

        mock经常在项目中使用,配置也是常有的事,故在此记录下来 一、安装依赖 二、配置 1、在项目的根目录  vite.config,ts 2、在./build/vite/plugin文件里面(此处文件是自行创建的) 3、在根目录创建一个mock文件,下面再细分各种文件,例如创建一个api / login.ts 4、在外部调用的

    2024年02月16日
    浏览(47)
  • 出现Error: Cannot find module ‘compression-webpack-plugin‘错误

    解决:npm install --save-dev compression-webpack-plugin@1.1.12 版本问题

    2024年02月13日
    浏览(45)
  • 使用vite-plugin-qiankun插件, 将应用快速接入乾坤(vue3 vite)

    qiankun官网 vite-plugin-qiankun插件github地址:vite-plugin-qiankun 1、安装乾坤 2、在主应用中注册微应用(main.ts) 3、挂载 在App.vue挂载微应用节点 1、安装插件 qiankun目前是不支持vite的,需要借助插件完成 2、修改vite.config.ts 3、修改main.ts

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包