VUE3项目VITE打包优化

代码加密

• 代码加密会导致代码文件大小翻倍（2-5倍）；
• 所以我就考虑代码加密的必要性，其实自带的代码压缩已经够用了，加密只不过防止核心代码被盗取使用。
• 谨慎考虑使用

依赖

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%左右。

静态js文件压缩

• 使用uglifyjs对静态引入的js文件进行压缩
• 压缩率高达40%左右。

静态资源的引入

• 我在引入静态js时候，发现不支持import引入，所以就写在了全局index.html文件script中；
• 所以会导致首屏加载缓慢，所以我就想能不能按需引入，用的时候再引入，而不是只要访问页面就引入。
• 采用js代码引入script标签

/**
 * 创建script标签引入xxx文件
 */
function createScript(callback) {
  let script = document.getElementById("xxx");
  // 如果不存在，则创建script标签
  if (!script) {
    script = document.createElement("script");
    script.src = "/xxx1/xxx1.js";
    script.id = "xxx";
    document.head.appendChild(script);
  }
  // 通过捕获报错，来判断是立即执行还是稍后执行
  try {
    // 如果存在window.xxx2，则直接执行回调函数
    callback && callback();
  } catch (err) {
    // 如果不存在window.xxx2，则监听load事件
    script.addEventListener("load", () => {
      callback && callback();
    });
  }
}

总结与实践运用

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

效果

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