vue3项目图片压缩+rem+自动重启等plugin使用与打包配置

news2024/10/5 13:18:02

一、Svg配置

每次引入一张 SVG 图片都需要写一次相对路径，并且对 SVG 图片进行压缩优化也不够方便。
vite-svg-loader插件加载SVG文件作为Vue组件，使用SVGO进行优化。

  • 插件网站https://www.npmjs.com/package/vite-svg-loader

1. 安装

pnpm i vite-svg-loader -D

2. vite.config.ts配置

// svg加载
import svgLoader from 'vite-svg-loader'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
    svgLoader({
      defaultImport: 'url', // or 'raw'
      svgo: true
    })
  ],
})

3. 使用

<template>
  <img w20 h20 :src="sunUrl" />
</template>

<script setup lang="ts">
import sunUrl from '@/assets/svg/sun.svg'
</script>

示例：

<template>
  <div>
    svg显示
    <h2>默认</h2>
    <img src="@/assets/images/com.svg" alt="" w100 h100 />
    <h2>引入</h2>
    <img :src="ComSvg" alt="" w100 h100 />
    <h2>raw</h2>
    <div v-html="ComSvgRaw"></div>
    <h2>组件化</h2>
    <ComSvgCom />
  </div>
</template>

<script setup lang="ts" name="svg">
import ComSvg from '@/assets/images/com.svg'
import ComSvgCom from '@/assets/images/com.svg?component'
import ComSvgRaw from '@/assets/images/com.svg?raw'
</script>

效果图：
在这里插入图片描述

4. 注意

如果使用默认url使用svg图片的话，和图片压缩vite-plugin-image-optimizer中的svgo其实还是有重复的

二、gzip压缩

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

  • 安装
pnpm i vite-plugin-compression -D
  • vite.config.ts配置
// 压缩gzip
import viteCompression from 'vite-plugin-compression'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
    viteCompression({
        verbose: true, // 默认即可
        disable: false, // 开启压缩(不禁用)，默认即可
        deleteOriginFile: false, // 删除源文件
        threshold: 10240, // 压缩前最小文件大小
        algorithm: 'gzip', // 压缩算法
        ext: '.gz' // 文件类型
    })
  ],
})
  • 效果图

在这里插入图片描述

三、 自动重启

对config.js/config.ts等配置文件修改后重启

插件网站https://www.npmjs.com/package/vite-plugin-restart

  • 安装
pnpm i vite-plugin-restart -D
  • vite.config.ts配置
// 自动重启
import ViteRestart from 'vite-plugin-restart'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
    ViteRestart({
       restart: ['*.config.[jt]s', '**/config/*.[jt]s', '*.config.cjs']
    })
  ],
})

四、rem转换(vite-plugin-px2rem)

官网https://github.com/ch1ny/vite-plugin-px2rem/blob/HEAD/README-zh_CN.md

1. 安装

# npm
npm install vite-plugin-px2rem --save-dev
# 或 yarn
yarn add vite-plugin-px2rem -D
# 或 pnpm
pnpm add vite-plugin-px2rem -D

一个支持将你的样式表中的 px 转换成 rem 的 vite 插件。
支持 css、less 以及 sass/scss。

不支持对 js/ts 文件内部的代码进行转换。

2. vite.config.ts配置

// vite.config.ts
import { defineConfig } from 'vite';
import { px2rem } from 'vite-plugin-px2rem';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		px2rem({
			width: 750,
			rootFontSize: 16,
		}),
	],
});

五、图片压缩(vite-plugin-image-optimizer)

  • 使用SVGO优化SVG资产并传递自定义配置。
  • 使用Sharp.js优化标量资产(png, jpeg, gif, tiff, webp, avif)，并可以为每个扩展类型传递自定义配置。
  • 选项来处理在打包器中定义的公共目录中的所有资产。
  • 配置test、include和exclude来过滤资产。
  • 如果资产的优化大小大于原始大小，则跳过处理资产。
  • 记录优化统计信息，显示前后的大小差异、比例和总节省(可选)

1. 安装

官网https://www.npmjs.com/package/vite-plugin-image-optimizer

pnpm i vite-plugin-image-optimizer --save-dev
pnpm i sharp --save-dev
pnpm i svgo --save-dev

Sharp和svgo不作为软件包的一部分来安装。您必须手动安装它们并将其添加为开发依赖项。这是一个设计决策，所以如果您只想使用svgo优化svg资产，则可以选择跳过安装sharp，反之亦然。

2. vite.config.ts配置

// 图片压缩
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'

export default defineConfig({
  // ...
  plugins: [
    // ...
    // 图片压缩
    ViteImageOptimizer()
  ],
})

六、打包分析

官网https://www.npmjs.com/package/rollup-plugin-visualizer

1. 安装

pnpm i rollup-plugin-visualizer -D

2. vite.config.ts配置

import { visualizer } from 'rollup-plugin-visualizer'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
   visualizer({
        open: true, // 注意这里要设置为true，否则无效
        gzipSize: true,
        brotliSize: true
  	})
  ],
})
  1. 执行命令：yarn build打完包之后会默认打开浏览器
    在这里插入图片描述

七、打包拆分 小图片转base64

  • vite.config.ts配置
// https://vitejs.dev/config/
export default defineConfig({
  // ...
  build:{
    // 10kb以下，转Base64
    assetsInlineLimit: 1024 * 10,
    // chunkSizeWarningLimit: 1500,//配置文件大小提醒限制，默认500
    rollupOptions: {
      output: {
        // 每个node_modules模块分成一个js文件
        manualChunks(id: string) {
          if (id.includes('node_modules')) {
            // return 'vendor'
            return  id.toString().split('node_modules/.pnpm/')[1].split('/')[0].toString()
          }
          return undefined
        },
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'assets/js/[name].[hash].js', // 用于命名代码拆分时创建的共享块的输出命名
        chunkFileNames: 'assets/js/[name].[hash].js', // 用于输出静态资源的命名，[ext]表示文件扩展名
        assetFileNames: 'assets/[ext]/[name].[hash].[ext]'
      }
    }
  }
})

打包后的文件
在这里插入图片描述

八、打包进度

vite-plugin-progress 插件是一个在打包时展示进度条的插件，如果您觉得该插件对您的项目有帮助

插件网站https://www.npmjs.com/package/vite-plugin-progress

  • 安装
pnpm i vite-plugin-progress -D
  • vite.config.ts配置
// 打包进度
import progress from 'vite-plugin-progress'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
    progress()
  ],
})

九、完整代码 vite.config.ts

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { fileURLToPath, URL } from 'node:url'
// import AutoImport from 'unplugin-auto-import/vite'
// 打包分析
import { visualizer } from 'rollup-plugin-visualizer'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
// 压缩gzip
import viteCompression from 'vite-plugin-compression'
// 打包进度
// import progress from 'vite-plugin-progress'
// 压缩图片
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
// rem转换
import { px2rem } from 'vite-plugin-px2rem'
// 自动重启
import ViteRestart from 'vite-plugin-restart'
import VueDevTools from 'vite-plugin-vue-devtools'
// svg配置
import svgLoader from 'vite-svg-loader'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    VueDevTools(),
    // AutoImport({
    //   include: [
    //     /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    //     /\.vue$/,
    //     /\.vue\?vue/, // .vue
    //     /\.md$/ // .md
    //   ],
    //   imports: ['vue', 'vue-router', 'pinia'],
    //   defaultExportByFilename: true,
    //   vueTemplate: true,
    //   dts: './types/auto-imports.d.ts',
    //   // eslint 报错解决：'ref' is not defined
    //   eslintrc: {
    //     enabled: true, // Default `false`
    //     filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    //     globalsPropValue: true
    //   }
    // })
    UnoCSS(),
    viteCompression({
      verbose: true, // 默认即可
      disable: false, // 开启压缩(不禁用)，默认即可
      deleteOriginFile: false, // 删除源文件
      threshold: 1024, // 压缩前最小文件大小
      algorithm: 'gzip', // 压缩算法
      ext: '.gz' // 文件类型
    }),
    // progress(),
    ViteRestart({
      restart: ['*.config.[jt]s', '**/config/*.[jt]s', '*.config.cjs']
    }),
    svgLoader({
      defaultImport: 'url' // or 'raw'
    }),
    visualizer({
      open: true, // 注意这里要设置为true，否则无效
      gzipSize: true,
      brotliSize: true
    }),
    px2rem({
      width: 750,
      rootFontSize: 16
    }),
    ViteImageOptimizer({
      /* pass your config */
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "./src/styles/variables.scss" as *;
          @use "./src/styles/mixin.scss" as *;`,
        javascriptEnabled: true
      }
    }
  },
  server: {
    // 监听所有公共ip
    // host: '0.0.0.0',
    cors: true,
    port: 3300,
    proxy: {
      // 前缀
      '/api': {
        target: 'http://www.example.com',
        changeOrigin: true,
        // 前缀重写
        rewrite: (path: string) => path.replace(/^\/api/, '/api')
      }
    }
  },
  // ...
  build: {
    // 10kb以下，转Base64
    assetsInlineLimit: 1024 * 10,
    // chunkSizeWarningLimit: 1500,//配置文件大小提醒限制，默认500
    rollupOptions: {
      output: {
        // 每个node_modules模块分成一个js文件
        manualChunks(id: string) {
          if (id.includes('node_modules')) {
            return 'vendor'
            // return id.toString().split('node_modules/.pnpm/')[1].split('/')[0].toString()
          }
          return undefined
        },
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'assets/js/[name].[hash].js', // 用于命名代码拆分时创建的共享块的输出命名
        chunkFileNames: 'assets/js/[name].[hash].js', // 用于输出静态资源的命名，[ext]表示文件扩展名
        assetFileNames: 'assets/[ext]/[name].[hash].[ext]'
      }
    }
  }
})

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

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

相关文章

查询数据库下所有表的数据量

查询数据库下所有表的数据量

个人思路: 首先把库里Schema下表名拿出来放记事本(EmEditor)里, 用一下正则匹配替换 (\w) → select \1 tableName,count(1) from \1 union all 然后把最后的union all删除掉,替换为order by tableName
阅读更多...
eggNOG-mapper：功能注释集大成者

eggNOG-mapper：功能注释集大成者

安装 Home eggnogdb/eggnog-mapper Wiki GitHub git clone https://github.com/eggnogdb/eggnog-mapper.git cd eggnog-mapper python setup.py install # 如果您的 eggnog-mapper 路径是/home/user/eggnog-mapper export PATH/home/user/eggnog-mapper:/home/user/eggnog-…
阅读更多...
基于OpenCv的快速图片颜色交换，轻松实现图片背景更换

基于OpenCv的快速图片颜色交换，轻松实现图片背景更换

图片颜色更换 图片颜色转换 当我们有2张图片，很喜欢第一张图片的颜色，第2张图片的前景照片，很多时候我们需要PS进行图片的颜色转换，这当然需要我们有强大的PS功底，当然小编这里不是介绍PS的，我们使用代码完全可以代替PS 进行图片的颜色转换 图片颜色转换步骤： 步骤…
阅读更多...
MongoDB 单节点升级为副本集高可用集群（1主1从1仲裁）

MongoDB 单节点升级为副本集高可用集群（1主1从1仲裁）

作者介绍&#xff1a;老苏&#xff0c;10余年DBA工作运维经验&#xff0c;擅长Oracle、MySQL、PG、Mongodb数据库运维&#xff08;如安装迁移&#xff0c;性能优化、故障应急处理等&#xff09; 公众号&#xff1a;老苏畅谈运维 欢迎关注本人公众号&#xff0c;更多精彩与您分享…
阅读更多...
沪上繁花：上海电信的5G-A之跃

沪上繁花：上海电信的5G-A之跃

2024年6月18日下午&#xff0c;在上海举行的3GPP RAN第104次会议上&#xff0c;3GPP正式宣布R18标准冻结。R18是无线网络面向5G-A的第一个版本&#xff0c;其成功冻结正式宣布了5G发展迎来新机遇&#xff0c;5G-A商用已进入全新的发展阶段。 在5G-A滚滚而来的时代洪流中&#x…
阅读更多...
【88 backtrader期货策略】一个基于螺纹钢和铁矿5分钟K线数据的跨品种日内套利策略回测

【88 backtrader期货策略】一个基于螺纹钢和铁矿5分钟K线数据的跨品种日内套利策略回测

这是参考其他量化框架的跨品种套利策略并进行修改逻辑后实现的一个交易策略。花了小半天时间，核对了策略逻辑的细节，两者的资金曲线基本是可以对齐了。 提醒 这个统计套利策略回测的时候，有几个坑，会导致实盘和回测的结果出现比较大的差异。在后续文章中，我将分析为什么…
阅读更多...
【3D-＞2D转换（1）】LSS（提升，投放，捕捉）

【3D-＞2D转换（1）】LSS（提升，投放，捕捉）

Lift, Splat, Shoot 这是一个端到端架构&#xff0c;直接从任意数量的摄像头数据提取给定图像场景的鸟瞰图表示。将每个图像分别“提升&#xff08;lift&#xff09;”到每个摄像头的视锥&#xff08;frustum&#xff09;&#xff0c;然后将所有视锥“投放&#xff08;splat&a…
阅读更多...
Spring相关面试题（四）

Spring相关面试题（四）

49 JavaConfig方式如何启用AOP?如何强制使用cglib&#xff1f; 在JavaConfig类&#xff0c;加上EnableAspectJAutoProxy 如果要强制使用CGLIB动态代理 &#xff0c;加上(proxyTargetClass true) 加上(exposeProxy true) 就是将对象暴露到线程池中。 50 介绍AOP在Spring中…
阅读更多...
word文档没有保存就关闭了怎么恢复？找到正确的方法

word文档没有保存就关闭了怎么恢复？找到正确的方法

昨天写教程的时候&#xff0c;终于完成了一个word文档&#xff0c;以为保存了就直接关了。word提醒我“是否保存”&#xff0c;我直接忽略了。动作一气呵成&#xff0c;毫不犹豫的关闭了。之后才发现我没有保存word文档。这种情况大家有遇到过吗?我们该如何在没有保存的情况下…
阅读更多...
unix高级编程系列之文件I/O

unix高级编程系列之文件I/O

背景 作为linux 开发者&#xff0c;我们不可避免会接触到文件编程。比如通过文件记录程序配置参数&#xff0c;通过字符设备与外设进行通信。因此作为合格的linux开发者&#xff0c;一定要熟练掌握文件编程。在文件编程中&#xff0c;我们一般会有两类接口函数&#xff1a;标准…
阅读更多...
原生JavaScript实现录屏功能

原生JavaScript实现录屏功能

1. 前言 使用JavaScript实现浏览器中打开系统录屏功能 示例图: 2. 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><…
阅读更多...
关于CPU你一定要注意的重要参数，警惕韭菜陷阱

关于CPU你一定要注意的重要参数，警惕韭菜陷阱

昨天遇到个奇葩事&#xff0c;有个粉丝喷我“懂不懂什么叫I9&#xff1f;”言下之意就是CPU中I9>i7>I5>I3&#xff0c;我也不知道咋说&#xff0c;只是提醒大家小心被坑&#xff0c;花了多的钱用的差的性能。作为回应&#xff0c;仅以此篇说下CPU咱们臭打游戏一定要知…
阅读更多...
软件架构之计算机组成与体系结构

软件架构之计算机组成与体系结构

1.1计算机系统组成 计算机系统是一个硬件和软件的综合体&#xff0c;可以把它看成按功能划分的多级层次结构。 1.1.1 计算机硬件的组成 硬件通常是指一切看得见&#xff0c;摸得到的设备实体。原始的冯•诺依曼&#xff08;VonNeumann&#xff09;计算机在结构上是以运算器为…
阅读更多...
基于Android Studio点餐项目，点餐app

基于Android Studio点餐项目，点餐app

目录 项目介绍 图片展示 运行环境 获取方式 项目介绍 实现登录、注册、注销功能&#xff0c;退出登录等功能&#xff0c; 以及基本的选择店铺点餐&#xff0c;加入购物车和结算等功能&#xff0c;以及可以增加或者减少商品的个数&#xff0c; 同时可以同步价格的总量。以…
阅读更多...
智能化客户服务：提升效率与体验的新模式

智能化客户服务：提升效率与体验的新模式

在数字化浪潮的推动下&#xff0c;客户服务领域正经历着一场深刻的变革。智能化客户服务的兴起&#xff0c;不仅重塑了企业与客户之间的互动方式&#xff0c;更在提升服务效率与增强客户体验方面展现出了巨大潜力。本文将深入探讨智能化客户服务的新模式&#xff0c;分析其如何…
阅读更多...
【C语言】自定义类型：联合和枚举

【C语言】自定义类型：联合和枚举

前言 前面我们学习了一种自定义类型&#xff0c;结构体&#xff0c;现在我们学习另外两种自定义类型&#xff0c;联合 和 枚举。 目录 一、联合体 1. 联合体类型的声明 2. 联合体的特点 3. 相同成员联合体和结构体对比 4. 联合体大小的计算 5. 用联合体判断当前机…
阅读更多...
一张图说热泵

一张图说热泵

一张图说热泵
阅读更多...
single_test_funi.py: error: the following arguments are required: img

single_test_funi.py: error: the following arguments are required: img

parser.add_argument(img, defaultS/1.jpg, helpImage file) 当你已经指定了文件路径&#xff0c;还是报错怎么办&#xff1f; parser.add_argument(img, nargs?, defaultS/1.jpg, helpImage file) nargs? 表示 config 参数是可选的。如果用户没有提供这个参数&#xff0c…
阅读更多...
25款404网页源码（下）

25款404网页源码（下）

25款404网页源码&#xff08;下&#xff09; 13部分源码 14部分源码 15部分源码 16部分源码 17部分源码 18部分源码 19部分源码 20部分源码 21部分源码 22部分源码 23部分源码 24部分源码 25部分源码 领取完整源码下期更新 13 部分源码 .rail {position: absolute;width: 100%…
阅读更多...
关注推送---Feed流，推模式实现的个人分析及其思考。

关注推送---Feed流，推模式实现的个人分析及其思考。

本篇文章记录我们实际开发过程中&#xff0c;关注推送场景的个人思考&#xff0c;以及解析。 文章目录 前言一、关注推送是什么&#xff1f;是什么是Feed流&#xff1f;二、解决关注推送问题的技术方案1.理论模型的选取2.数据类型的选取 三、理论模型的选取三、数据类型的选取总…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023