当前位置：首页 > news >正文

VUE3项目VITE打包优化

news 来源：原创 2025/5/18 2:24:48

VUE3项目VITE打包优化

代码加密
- 依赖
- 配置
- 效果对比图
自动导入
- 依赖
- 配置
代码压缩
- 依赖
- 配置
- 效果对比图
图片压缩
- 依赖
- 配置
- 效果对比图
字体压缩
总结与实践运用
- 效果

代码加密

依赖

npm install -D vite-plugin-bundle-obfuscator

配置

import vitePluginBundleObfuscator from "vite-plugin-bundle-obfuscator";
import { defineConfig } from "vite";
// ...
export default defineConfig(() => {
  return {
    plugins: [
      // ...
      vitePluginBundleObfuscator({
        autoExcludeNodeModules: true,
        threadPool: true,
      }),
      // ...
    ],
  };
});

效果对比图

自动导入

通俗理解，就是用的才导入，不用的不导入，这样打包体积才会变小；

依赖

npm install -D unplugin-vue-components unplugin-auto-import

配置

参考资料elementPlus
可以把自动生成的auto-imports.d.ts、components.d.ts文件，放入.gitignore文件中，不然提交。

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { defineConfig } from "vite";
// ...
export default defineConfig(() => {
  return {
    plugins: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
        imports: ["vue", "vue-router"],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      // ...
    ],
  };
});

代码压缩

这个是

依赖

npm install -D vite-plugin-compression2

配置

前端打包配置，使用的是gzip算法。
后续尝试brotli压缩算法上线，这个nginx需要引入依赖，以及只支持https。
已测如下图，与gzip对比，brotli算法压缩体检还可以多减少18.76%，但是没有上线。
前端打包，再通过nginx配置；
这个可以直接通过nginx配置实现，但是消耗服务器CPU资源，我们可以前端打包压缩之后，nginx可以直接从静态文件夹中获取，而不用压缩了。

import { compression } from "vite-plugin-compression2";
import { defineConfig } from "vite";
// ...
export default defineConfig(() => {
  return {
    plugins: [
      // ...
      compression({
        // 可以加其他的后缀文件
        include: [/\.js$/, /\.html$/, /\.css$/, /\.ttf$/],
      }),
      // ...
    ],
  };
});

nginx配置（明天早上补充下，代码在其他地方）

效果对比图

打包体积下降39.57%，效果很明显

图片压缩

最开始使用的插件是vite-plugin-imagemin，但是在本地可以运行，但是到了服务器上，因为sharp依赖c++库报错，要升级。后面更换了插件。
该插件遇的坑是，服务器是缺少c++命令，百度搜索一下安装即可。然后要记得在重新安装依赖之前，先将之前报错的产生的node_modules文件夹删除掉。

依赖

可以先尝试直接按照依赖，如果不行，再加后面一串国内阿里云镜像依赖包。

npm install -D vite-plugin-minipic --sharp_binary_host="https://registry.npmmirror.com/-/binary/sharp" --sharp_libvips_binary_host="https://registry.npmmirror.com/-/binary/sharp-libvips"

配置

import miniPic from "vite-plugin-minipic";
import { defineConfig } from "vite";
// ...
export default defineConfig(() => {
  return {
    plugins: [
      // ...
      miniPic(),
      // ...
    ],
  };
});

效果对比图

图片体积整体下降72.05%，效果很明显

字体压缩

实现前端.ttf字体包的压缩
压缩率高达90%左右。

总结与实践运用

我相信认真看完，还是有收获的，我自己全流程亲测，断断续续花费了我半个月时间，从设想到一步一步拆解实现，然后在生产环境启用，很有收获。
但是我也相信你们也有疑惑，最后一个字体压缩怎么在生成环境运用？
我的思路是编写shell脚本：（我的思路只是参考，你也许可以想到更好的方案）
- 回滚，去除本地修改部分；
- 通过git获取远端git仓库的代码；
- 通过python调用.py压缩字体文件，将字体进行压缩；
- 通过.env环境打包成前端包；
- 将dist目录移动到nginx代理目录下即可。