如何让Vue构建产物仅包含筛选后的数据以减小体积？

问题原因 #

你当前用data.splice(0,2)是运行时动态截取，打包工具（如Vite、Webpack）在编译阶段无法识别你只需要数组的前两项，因此会将整个data.ts的完整数据打包进产物。

解决方案 #

1. 编译时静态提取数据（最推荐） #

通过预处理脚本在打包前就生成仅包含所需数据的文件，让打包工具直接导入精简后的数据：

步骤：

• 新建预处理脚本preprocess-data.js：

const fs = require('fs');
// 读取data.ts的内容并提取数据（简单正则匹配，可根据实际数据格式调整）
const rawData = fs.readFileSync('./data.ts', 'utf-8');
const match = rawData.match(/export data = (\[.+\])/s);
if (match) {
  const data = eval(match[1]); // 仅用于本地预处理，确保数据来源安全
  const filteredData = data.slice(0, 2);
  // 生成精简后的TS文件
  fs.writeFileSync('./filtered-data.ts', `export const filteredData = ${JSON.stringify(filteredData)};`);
}

• 在package.json的scripts中添加预构建命令：

{
  "scripts": {
    "prebuild": "node preprocess-data.js",
    "build": "pnpm build"
  }
}

• 修改lib.ts导入精简后的数据：

import { filteredData } from './filtered-data.ts';
export { filteredData as fitteredData };

执行pnpm build时，会先自动生成仅包含前两项数据的filtered-data.ts，打包工具只会导入这个小文件，彻底排除原始大体积数据。

2. 改用Tree Shaking友好的导出方式 #

如果原始数据可拆分，将数组拆分为独立导出的变量，让打包工具通过Tree Shaking剔除未使用的部分：

修改data.ts：

export const item1 = /* 第一项数据内容 */;
export const item2 = /* 第二项数据内容 */;
// 其他数据项...
export const data = [item1, item2, /* 其他项 */];

修改lib.ts：

import { item1, item2 } from './data.ts';
const fitteredData = [item1, item2];
export { fitteredData };

这种方式下，打包工具会识别到只用到了item1和item2，自动剔除其他未导入的数据项。

3. 用编译工具插件动态处理（以Vite为例） #

编写简单的Vite插件，在编译阶段拦截data.ts的导入，直接替换为截取后的数据：

新建vite-plugin-filter-data.js：

export default function filterDataPlugin() {
  return {
    name: 'filter-data',
    transform(code, id) {
      if (id.endsWith('data.ts')) {
        const match = code.match(/export data = (\[.+\])/s);
        if (match) {
          const data = eval(match[1]);
          const filteredData = data.slice(0, 2);
          return code.replace(match[0], `export data = ${JSON.stringify(filteredData)}`);
        }
      }
      return code;
    }
  };
}

在vite.config.ts中注册插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import filterDataPlugin from './vite-plugin-filter-data';

export default defineConfig({
  plugins: [vue(), filterDataPlugin()]
});

编译时会直接修改data.ts的导出内容，打包产物中只会保留截取后的小数据。

内容的提问来源于stack exchange，提问作者c dai