Vite打包优化实践：从分包到性能提升

 
  
 
   前言 
  
随着前端应用功能的增加，项目的打包体积也会不断膨胀，影响加载速度和用户体验。本文介绍了几种常见的打包优化策略，通过Vite和相关插件，帮助减少项目体积、提升性能，优化加载速度。
rollup-plugin-visualizer
rollup-plugin-visualizer插件，是一个可视化工具，以图表的形式，展示打包结果的模块构成与体积分布。安装：
pnpm add rollup-plugin-visualizer -D

用法：
// vite.config.ts

import { visualizer } from "rollup-plugin-visualizer";

module.exports = {
  plugins: [visualizer()],
};

pnpm build 一下, 打开生成的stats.html文件。 

  

 

   

 xlsx  、  html2canvas  、  jspdf  ，这3个第三方库占了主要部分。 
 分包策略 
 在项目中，  xlsx  、  html2canvas  、  jspdf  ，只在对应功能模块中使用，可以单独打包出来，用户使用对应功能，才会下载对应js脚本。 
 在  rollupOptions  选项的  manualChunks  函数中控制分包逻辑，并配合  experimentalMinChunkSize  属性，阀值设置为 20 KB，模块大小，大于20kb的才会单独打包成chunk。 
rollupOptions: {
  experimentalLogSideEffects: true,
output: {
    experimentalMinChunkSize: 20 * 1024,
    manualChunks: (id: string) => {
      if (id.includes('html2canvas')) {
        return'html2canvas';
      }
      if (id.includes('jspdf')) {
        return'jspdf';
      }
      if (id.includes('xlsx')) {
        return'xlsx';
      }
    }
  }
}

 build一下，查看控制台信息。 

 成功的将这3个第三方库单独打包成 

    chunk 

    ， 

    vite 

    默认会把所有静态资源都打包到 

    assets 

    文件夹，配置 

    chunkFileNames 

    、 

    entryFileNames 

    、 

    assetFileNames 

    将静态资源分类。 

  


 chunkFileNames: 'static/js/[name]-[hash].js', // 代码分割后文件名
 entryFileNames: 'static/js/[name]-[hash:6].js', // 入口文件名
  assetFileNames: 'static/[ext]/[name]-[hash].[ext]' // 静态资源文件名

 build一下，打包后到结果： 


  

 

 减少包体积 
 vite-plugin-remove-console移除consele 
 安装： 
pnpm add vite-plugin-remove-console -D

 用法: 
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import removeConsole from "vite-plugin-remove-console";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), removeConsole()]
});

 vite-plugin-compression压缩代码 
 vite-plugin-compression  插件压缩代码成  gzip  格式或者  br  格式，ngixn开启gizp，http缓存策略。 
 安装: 
pnpm add vite-plugin-compression -D

 配置说明 






        


       





           参数 

         



           类型 

         



           默认值 

         



           说明 

         







           verbose 

         

 boolean 
 true 


           是否在控制台输出压缩结果 

         





           filter 

         

 RegExp or (file: string) => boolean 
 DefaultFilter 


           指定哪些资源不压缩 

         





           disable 

         

 boolean 
 false 


           是否禁用 

         





           threshold 

         

 number 


           – 

         



           体积大于 threshold 才会被压缩,单位 b 

         





           algorithm 

         

 string 
 gzip 


           压缩算法,可选 [ ‘gzip’ , ‘brotliCompress’ ,’deflate’ , ‘deflateRaw’] 

         





           ext 

         

 string 
 .gz 


           生成的压缩包后缀 

         





           compressionOptions 

         

 object 


           – 

         



           对应的压缩算法的参数 

         





           deleteOriginFile 

         

 boolean 


           – 

         



           压缩后是否删除源文件 

         






 用法: 
import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [ 
      viteCompression({
        threshold: 1024 * 20, 
        algorithm: 'gzip',
        ext: '.gz'
      })]
  };
};

 build一下： 


  

 

   

 修改压缩算法，打包成br格式： 
import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [ 
      viteCompression({
        threshold: 1024 * 20, 
        algorithm: 'brotliCompress',
        ext: '.br'
      })]
  };
};

 打包结果： 


  

 

  
 

 br格式，明显比gzip格式还小。 
 外链CDN 
 如果条件允许外链接CDN，那么使用  
rollup-plugin-external-globals 
 插件将外部依赖映射为全局变量，避免将其打包进最终文件，减小文件体积。配合  vite-plugin-html  自动注入代码到HTML文件中。 
 安装： 
pnpm add vite-plugin-html rollup-plugin-external-globals -D

 用法  ： 
import { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';
import { createHtmlPlugin } from'vite-plugin-html';
import externalGlobals from'rollup-plugin-external-globals';

const cdn = {
jspdf: 'jspdf',
xlsx: 'XLSX',
html2canvas: 'html2canvas'
};

const externalList = Object.keys(cdn);

const globals = externalGlobals(cdn);

// https://vitejs.dev/config/
exportdefault defineConfig({
plugins: [
    vue(),
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          jspdfscript:
            '',
          xlsxscript:
            '',
          html2canvasscript:
            ''
        }
      }
    })
  ],
build: {
    rollupOptions: {
      external: externalList,
      plugins: [visualizer({ open: true }), globals]
    }
  }
});

 在  index.html  中使用CDN脚本： 
html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AIChattitle>
    <%- xlsxscript %><%- jspdfscript %><%- html2canvasscript %>
head>
<body>
    <div id="app">div>
    <script type="module" src="/src/main.ts">script>
body>
html>

 对比效果： 
 优化前：1.7MB 
 优化后：899KB 
 总结 



      可视化分析 

      ：使用 

      rollup-plugin-visualizer 

      直观查看打包后的模块大小，找出大体积模块进行优化。 

    



      分包策略 

      ：通过 

      manualChunks 

      将大依赖库分离到单独的chunk，减少首屏加载资源。 

    



      去除无用 console 

      ：利用 

      vite-plugin-remove-console 

      删除开发环境中的console，减少打包体积。 

    



      代码压缩 

      ：通过 

      vite-plugin-compression 

      压缩代码为 

      gzip 

      或 

      brotli 

      格式，减小文件大小。 

    



      外链CDN 

      ：使用 

      rollup-plugin-external-globals 

      和 

      vite-plugin-html 

      将常用库通过CDN加载，避免将它们打包到最终文件。 

    


 这些优化策略成功将打包体积从1.7MB减少到899KB，提升了应用性能。 




 作者：  code_leon 

    https://juejin.cn/post/