vite 打包优化

element-plus 按需导入

vue3 UI组件优化之element-plus按需导入-优快云博客文章浏览阅读37次。这个插件可以按需导入ElementPlus组件，并且是自动导入，不需要你再单个组件按需导入。如果不在意项目打包体积大小，正常来讲element-plus 是这样用的。但是呢要是项目就用了几个弹窗提示什么的，全局引入包体积很大。但是引入完之后默认是英文模式的，这个时候就需要使用中文包。所以使用了Vite插件。在App.vue里面。https://blog.youkuaiyun.com/weixin_38233449/article/details/134115080?spm=1001.2014.3001.5501

按需导入的文件大小少了接近1M

高版本await

esbuild: { 
            supported: { "top-level-await": true 
       } 
} 

vite.config.js

优化拆包

 build: {
    chunkSizeWarningLimit: 1500,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id.toString().split("node_modules/")[1].split("/")[0].toString();
          }
        }
      }
    }
  }

9.6M->8.3M

文件压缩

import viteCompression from "vite-plugin-compression"; 
plugins: [ viteCompression() ],

加上最大压缩体积之后：

    viteCompression({
      verbose: true, // 是否在控制台中输出压缩结果
      disable: false,
      threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
      algorithm: "gzip", // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
      ext: ".gz",
      deleteOriginFile: true // 源文件压缩后是否删除(我为了看压缩后的效果，先选择了true)
    })

所以体积从 9.6M ->6M 减少了3M的体积