代碼加密

依賴

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

效果

• 文件壓縮率高達90%左右 響應速率提升高達85%左右
• 下面圖片是一個測試環境、一個是正式環境