代码加密

依赖

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代理目录下即可。

效果

• 文件压缩率高达90%左右 响应速率提升高达85%左右
• 下面图片是一个测试环境、一个是正式环境