分析前端vite打包部分文件太大的工具

一、问题：

vite有时打包出来的文件非常大，见下图黄色标示部分。最大的都达到2M了，这样浏览器加载的时候便会慢得不得了。

换色

二、先分析找出问题

在 Vite 中，虽然 Vite 基于 Rollup，但它也提供了工具和方法来分析打包后的文件大小。这有助于识别导致文件体积增大的原因。以下是几个步骤和技术来分析和优化 Vite 项目的打包输出。

1. 安装 Rollup 插件

首先，你需要安装一个 Rollup 插件，可以帮助你可视化你的项目中的各个部分所占的空间。一个常用的工具是 rollup-plugin-visualizer，它类似于 Webpack 的 Bundle Analyzer。

安装命令：

bash 复制代码

npm install --save-dev rollup-plugin-visualizer

或者使用 Yarn：

bash 复制代码

yarn add --dev rollup-plugin-visualizer

2. 配置 Vite 来使用这个插件

在你的 vite.config.js 文件中，导入并配置 rollup-plugin-visualizer 插件：

javascript 复制代码

import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        visualizer({
          open: true, // 直接在浏览器中打开分析报告
          filename: 'stats.html', // 输出文件的名称
          gzipSize: true, // 显示gzip后的大小
          brotliSize: true, // 显示brotli压缩后的大小
        })
      ]
    }
  }
});

3. 运行构建脚本

在配置好插件后，运行你的构建脚本：

bash 复制代码

npm run build

或者使用 Yarn：

bash 复制代码

yarn build

构建完成后，插件会自动生成一个 stats.html 文件，并可能自动在你的默认浏览器中打开这个文件。这个 HTML 文件提供了一个交互式的可视化图表，显示了你的项目各个部分的大小。

4. 分析报告

在可视化报告中，你可以看到每个模块和包的大小，以及它们之间的依赖关系。注意以下几点：

检查是否有意外的大型依赖。
查看是否有来自 node_modules 的大型包。
确认代码是否被正确地拆分，特别是动态导入是否生效。

5. 基于分析进行优化

根据分析结果，你可能需要采取一些措施来减小文件大小，比如：

替换或移除体积大的库。
实现更多的代码拆分。
确保使用最新版本的库，因为新版本可能更优化。
检查是否有重复的代码或库版本冲突。

这些步骤和工具可以帮助你了解为什么 main-xxx.js 文件的体积那么大，并指导你进行相应的优化。通过持续的监控和优化，你可以显著提高你的应用性能和加载速度。

查看结果

安装分析插件很顺利，npm run build后浏览器自动打开了工程文件下的stats.html网页。这个图相当清晰地标明了哪些文件占用了体积。我这个工程文件是openai的cl100k_base.js这个占了大头。其实这个文件我根本没用到。

三、解决方案（未解决）

知道了问题原因，就好处理了

先找下工程里哪里引用了这个文件

找到有一个文件里有引入

ts 复制代码

import { ChatMessage } from "gpt-tokenizer/esm/GptEncoding";

  
  ...
  
  
export const encodeAsync = async ( ) => {
  const { encode } = await import('gpt-tokenizer');

  return encode;//(str).length;
};
export const encodeChatAsync = async ( ) => {
  const { encodeChat } = await import('gpt-tokenizer');

  return encodeChat;//(obj,model ).length;
};

看了代码，这个库也没办法去掉。

只能用手动的方式将特别的大的库单独打包

js 复制代码

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('gpt-tokenizer')) {
            return 'gpt-tokenizer'; // 把 gpt-tokenizer 相关代码分到一个单独 chunk
          }
        }
      }
    }
  }
});

优化前

优化后（没变化）看起来就是换了个名字，那个main-xxx.js基本就是这个gpt-tokenizer占了。

看了node_modules/gpt-tokenizer里面的内容，这个库本身就很大。不知怎么分割了

shell 复制代码

(base) MacBook-Pro-7:chatgpt-web-midjourney-proxy $cd node_modules/gpt-tokenizer/
(base) MacBook-Pro-7:gpt-tokenizer $ls
LICENSE      README.md    cjs          data         dist         esm          package.json src
(base) MacBook-Pro-7:gpt-tokenizer $cd esm
(base) MacBook-Pro-7:esm $ls
BytePairEncodingCore.d.ts                     encoding                                      resolveEncoding.d.ts
BytePairEncodingCore.js                       encodings                                     resolveEncoding.js
BytePairEncodingCore.js.map                   escapeRegExp.d.ts                             resolveEncoding.js.map
EncoderMap.d.ts                               escapeRegExp.js                               resolveEncodingAsync.d.ts
EncoderMap.js                                 escapeRegExp.js.map                           resolveEncodingAsync.js
EncoderMap.js.map                             main.d.ts                                     resolveEncodingAsync.js.map
GptEncoding.d.ts                              main.js                                       specialTokens.d.ts
GptEncoding.js                                main.js.map                                   specialTokens.js
GptEncoding.js.map                            mapping.d.ts                                  specialTokens.js.map
GptEncoding.test.d.ts                         mapping.js                                    utfUtil.d.ts
GptEncoding.test.js                           mapping.js.map                                utfUtil.js
GptEncoding.test.js.map                       model                                         utfUtil.js.map
codegen                                       modelParams.d.ts                              util.d.ts
convertTokenBytePairEncodingFromTuples.d.ts   modelParams.js                                util.js
convertTokenBytePairEncodingFromTuples.js     modelParams.js.map                            util.js.map
convertTokenBytePairEncodingFromTuples.js.map package.json
(base) MacBook-Pro-7:esm $du -d 1 -h
 10M    ./encodings
 48K    ./encoding
 24K    ./codegen
420K    ./model
 11M    .
(base) MacBook-Pro-7:esm $cd encodings
(base) MacBook-Pro-7:encodings $du -d 1 -h
 10M    .
(base) MacBook-Pro-7:encodings $ls
cl100k_base.d.ts   cl100k_base.js     cl100k_base.js.map p50k_base.d.ts     p50k_base.js       p50k_base.js.map   r50k_base.d.ts     r50k_base.js       r50k_base.js.map
(base) MacBook-Pro-7:encodings $ls -lh
total 20816
-rw-r--r--@ 1 logicai  staff   101B Apr 19 17:28 cl100k_base.d.ts
-rw-r--r--@ 1 logicai  staff   2.2M Apr 19 17:28 cl100k_base.js
-rw-r--r--@ 1 logicai  staff   2.9M Apr 19 17:28 cl100k_base.js.map
-rw-r--r--@ 1 logicai  staff   101B Apr 19 17:28 p50k_base.d.ts
-rw-r--r--@ 1 logicai  staff   1.1M Apr 19 17:28 p50k_base.js
-rw-r--r--@ 1 logicai  staff   1.5M Apr 19 17:28 p50k_base.js.map
-rw-r--r--@ 1 logicai  staff   101B Apr 19 17:28 r50k_base.d.ts
-rw-r--r--@ 1 logicai  staff   1.1M Apr 19 17:28 r50k_base.js
-rw-r--r--@ 1 logicai  staff   1.5M Apr 19 17:28 r50k_base.js.map
(base) MacBook-Pro-7:encodings $vim cl100k_base.js
(base) MacBook-Pro-7:encodings $

前端高手，如果有解决方案，请不辜赐教。抱拳！！

分析前端vite打包部分文件太大的工具

一、问题：

二、先分析找出问题

1. 安装 Rollup 插件

安装命令：

2. 配置 Vite 来使用这个插件

3. 运行构建脚本

4. 分析报告

5. 基于分析进行优化

查看结果

三、解决方案 （未解决）

先找下工程里哪里引用了这个文件

三、解决方案（未解决）