vite：使用“keep-names”esbuild 标志进行生产构建

Question

我们的第三方库之一要求我们保留特定的函数名称。在 webpack 中我们用terser.keep_fnames. esbuild 有https://esbuild.github.io/api/#keep-names所以我们想使用它，但我们找不到如何为 vite 生产构建启用此选项。

根据文档 esbuild 用于缩小。我们如何启用这个标志（或类似的选项）？请注意，我们不想使用 terser，因为它比 esbuild 慢得多。

有一个未记录的config.esbuild道具。这似乎在当前的主代码中使用： https://github.com/vitejs/vite/blob/f72fdc7c995db502ca89f0057cfc1fcd6660212f/packages/vite/src/node/plugins/esbuild.ts#L352

但是当我尝试添加config.esbuild.keepNames到配置对象（当然作为对象字段）时，它没有执行任何操作。

Answer 1

对于我们的ForgeViewer朋友，这里有一些解决方案的更多背景信息：

当使用自定义查询函数查询属性数据库时，需要定义一个名为 的函数userFunction。当此函数被序列化并发送到 Web Worker 时，在使用捆绑器时，您需要确保函数名称没有被破坏。

https://aps.autodesk.com/en/docs/viewer/v7/developers_guide/advanced_options/propdb-queries/

在webpack中，这是通过terser插件完成的。你需要设置keep_fnames: true的地方terserOptions

vite使用 esbuild，因此我们需要在我们的defineConfig

  esbuild: {
    minifyIdentifiers: false,
    keepNames: true,
  },

另外，请确保不要像我们之前那样在调用中内联函数定义：userFunction

//doesnt work
  await viewer.model
    .getPropertyDb()
    .executeUserFunction(function userFunction() { ... }, {
      dbIds,
      propertyNames,
      includeRevitCategory,
    });

// works
  function userFunction() {
    // ...
  }
  await viewer.model
    .getPropertyDb()
    .executeUserFunction(userFunction, {
      dbIds,
      propertyNames,
      includeRevitCategory,
    });

不破坏整个代码库中的任何函数名称会导致包大小增加。我们只需要保留函数名称userFunction，所以我选择使用terserin vite.config（不要忘记npm add -D terser）

  build: {
    minify: 'terser',
    terserOptions: {
      mangle: {
        reserved: ['userFunction'],
      },
    },

对于我们来说，客户端包大小减少了 22.2%，这是一个很大的数字。