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

VUE3项目VITE打包优化

article 2025/3/28 10:49:22

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()],
      }),
      // ...
    ],
  };
});

代码压缩

这个是需要nginx配置的，就算前端配置了，nginx没有配置，也是没有用的。
前端起到是避免nginx调用服务器CPU压缩代码，之后再传递，而是可以直接调取前端静态压缩文件

依赖

npm install -D vite-plugin-compression2

配置

前端打包配置，使用的是gzip算法。
后续尝试brotli压缩算法上线，这个nginx需要引入依赖，以及只支持https。
已测如下图，与gzip对比，brotli算法压缩体检还可以多减少18.76%，但是没有上线。
前端vite配置

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

nginx配置

http {
	# ....
    gzip  on; # 开启gzip压缩
    
    gzip_static on; # 开启静态文件的gzip压缩，也就是从前端本地提取，而不是nginx调取cpu进行压缩，减小cpu压力。     
    
    gzip_min_length 256;# 设置压缩最小字节数
    
    gzip_comp_level 6; # 压缩级别，级别越大越好，但是越占用CPU资源，到了级别6后，很难再提高；
    
    gzip_types application/javascript text/html text/css image/jpeg image/gif image/png image/svg+xml image/x-icon font/ttf application/octet-stream; # 进行压缩的文件类型
    
    gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，建议开启
    
    gzip_disable "MSIE [1-6]\."; # 禁用IE 6 gzip 此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    
    gzip_http_version 1.0; # 设置gzip压缩针对的HTTP协议版本
    
    gzip_proxied any; # 设置启用压缩的代理服务器类型
    # 设置压缩所需要的缓冲区大小 使用默认值
    # gzip_buffers 32 4k;
    # ....
}

效果对比图

打包体积下降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代理目录下即可。