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

化作繁星2024-07-08 16:29

一、Svg配置

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

1. 安装

js 复制代码 
pnpm i vite-svg-loader -D

2. vite.config.ts配置

js 复制代码 
// svg加载
import svgLoader from 'vite-svg-loader'

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

3. 使用

js 复制代码 
<template>
  <img w20 h20 :src="sunUrl" />
</template>

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

示例：

js 复制代码 
<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%左右，压缩后的文件，通过后端简单处理，浏览器可以将其正常解析出来。

  • 安装
js 复制代码 
pnpm i vite-plugin-compression -D
  • vite.config.ts配置
js 复制代码 
// 压缩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

  • 安装
js 复制代码 
pnpm i vite-plugin-restart -D
  • vite.config.ts配置
js 复制代码 
// 自动重启
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. 安装

js 复制代码 
# 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配置

js 复制代码 
// 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配置

js 复制代码 
// 图片压缩
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'

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

六、打包分析

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

1. 安装

js 复制代码 
pnpm i rollup-plugin-visualizer -D

2. vite.config.ts配置

js 复制代码 
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配置
js 复制代码 
// 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

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

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

九、完整代码 vite.config.ts

js 复制代码 
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]'
      }
    }
  }
})
相关推荐
沐土Arvin6 分钟前
深入理解 requestIdleCallback：浏览器空闲时段的性能优化利器
开发语言·前端·javascript·设计模式·html
专注VB编程开发20年8 分钟前
VB.NET关于接口实现与简化设计的分析，封装其他类
java·前端·数据库
小妖66617 分钟前
css 中 content: “\e6d0“ 怎么变成图标的？
前端·css
L耀早睡1 小时前
mapreduce打包运行
大数据·前端·spark·mapreduce
HouGISer1 小时前
副业小程序YUERGS，从开发到变现
前端·小程序
outstanding木槿1 小时前
react中安装依赖时的问题 【集合】
前端·javascript·react.js·node.js
霸王蟹2 小时前
React中useState中更新是同步的还是异步的?
前端·javascript·笔记·学习·react.js·前端框架
霸王蟹2 小时前
React Hooks 必须在组件最顶层调用的原因解析
前端·javascript·笔记·学习·react.js
专注VB编程开发20年2 小时前
asp.net IHttpHandler 对分块传输编码的支持,IIs web服务器后端技术
服务器·前端·asp.net
爱分享的程序员3 小时前
全栈项目搭建指南：Nuxt.js + Node.js + MongoDB
前端
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05DeepSeek各版本说明与优缺点分析06Coze扣子平台完整体验和实践（附国内和国际版对比）07YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU08苍穹外卖面试总结09yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记10Ubuntu24.04安装中文输入法