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/7480534286514749459

万普插件库

jQuery插件大全与特效教程