【问题标题】：Vite / Rollup Incorrect ChunkingVite / Rollup 不正确的分块
【发布时间】：2022-08-20 18:01:17
【问题描述】：

我在将 Fontawesome 图标导入 Vue 3 Vite 项目时遇到问题。特别是从汇总输出的构建文件没有正确分块。我已经尝试过从 Fontawesome 的文档中导入图标的两种方法，但是都没有产生最佳的块输出。

任何有关寻找另一种解决方案或找到我为导致此问题所做的愚蠢行为的任何帮助都将不胜感激。

直接进口

直接通过import {faCat} from @fortawesome/pro-light-svg-icons/faCat 导入commonjs 图标，这在某些特定情况下会导致图标数据没有放在rollup 生成的chunk 中。这会导致图标不会一直加载，直到在下面的示例中加载特定的不相关块，如果首先加载 chunkA.js，即使共享数据应该在 @ 中，图标也只会在加载 chunkB.js 时显示987654333@ 块。

对我来说，这感觉就像汇总捆绑器算法的错误，因为它为图标正确创建了一个块并正确导入它。但是似乎将图标的内容放入另一个块中。一旦我知道这不是我做过的任何事情，我很高兴报告这一点。

我无法用其他任何东西（node_module 或本地）复制这个问题，但我看不到任何特定于 fontawesome 的东西会导致它。

示例构建文件输出

/*
 * index.js
 */
console.log(\'--- ENTRY START ---\');
const h = u(
  () => import(\'./testA.a8e39a8f.js\'),
  [\'assets/testA.a8e39a8f.js\', \'assets/faCat.6085f215.js\']
),
  g = u(
    () => import(\'./testB.b39c5fd9.js\'),
    [\'assets/testB.b39c5fd9.js\', \'assets/faCat.6085f215.js\']
  );
(async () => {
  const { name: s, icon: r } = await h,
    { name: o, icon: i } = await g;
  console.log(\'A\', s, r), console.log(\'B\', o, i);
})();
console.log(\'--- ENTRY END ---\');

/*
 * chunkA.js
 */
import { f as o } from \'./faCat.6085f215.js\';
const l = {};
(function (a) {
  Object.defineProperty(a, \'__esModule\', { value: !0 });
  const C = \'fal\',
    c = \'dog\',
    n = 576,
    e = 512,
    i = [128021],
    f = \'f6d3\',
    v = \'...icon...\';
  (a.definition = { prefix: C, iconName: c, icon: [n, e, i, f, v] }),
    (a.faDog = a.definition),
    (a.prefix = C),
    (a.iconName = c),
    (a.width = n),
    (a.height = e),
    (a.ligatures = i),
    (a.unicode = f),
    (a.svgPathData = v),
    (a.aliases = i);
})(l);
(function (a) {
  Object.defineProperty(a, \'__esModule\', { value: !0 });
  const C = \'fal\',
    c = \'cat\',
    n = 576,
    e = 512,
    i = [128008],
    f = \'f6be\',
    v = \'...icon...\';
  (a.definition = { prefix: C, iconName: c, icon: [n, e, i, f, v] }),
    (a.faCat = a.definition),
    (a.prefix = C),
    (a.iconName = c),
    (a.width = n),
    (a.height = e),
    (a.ligatures = i),
    (a.unicode = f),
    (a.svgPathData = v),
    (a.aliases = i);
})(o);
console.log(\'--- File A START ---\');
console.log(\'A\', l.faDog, o.faCat);
const L = \'I am A\',
  d = l.faDog;
console.log(\'--- File A END ---\');
export { d as icon, L as name };

/*
 * chunkB.js
 */
import { f as o } from \'./faCat.6085f215.js\';
console.log(\'--- File B START ---\');
console.log(\'B\', o.faCat);
const n = \'I am B\',
  t = o.faCat;
console.log(\'--- File B END ---\');
export { t as icon, n as name };

/*
 * faCat.js
 */
const a = {};
// This line should contain one of the icon definition function calls that is currently in chunkA.js
export { a as f };

以上输出的源代码

/*
 * index.js
 */
console.log(\'--- ENTRY START ---\');
// import {name as testAName, icon as testAIcon} from \'./testA\';
// import {name as testBName, icon as testBIcon} from \'./testB\';
const testA = import(\'./testA\');
const testB = import(\'./testB\');

(async () => {
  const {name: testAName, icon: testAIcon} = await testA;
  const {name: testBName, icon: testBIcon} = await testB;

  console.log(\'A\', testAName, testAIcon);
  console.log(\'B\', testBName, testBIcon);
})();
console.log(\'--- ENTRY END ---\');

export const HelloThere = \'HelloThere\';


/*
 * a.js
 */
console.log(\'--- FILE A START ---\');
import { faDog } from \'@fortawesome/pro-light-svg-icons/faDog\';
import { faCat } from \'@fortawesome/pro-light-svg-icons/faCat\';

console.log(\'A\', faDog, faCat);

export const name = \'I am A\';
export const icon = faDog;
console.log(\'--- FILE A END ---\');


/*
 * b.js
 */
console.log(\'--- FILE B START ---\');
import { faCat } from \'@fortawesome/pro-light-svg-icons/faCat\';

console.log(\'B\', faCat);

export const name = \'I am B\';
export const icon = faCat;
console.log(\'--- FILE B END ---\');

解构导入

Import Documention Index.es.js

通过import {faCat, faDog} from @fortawesome/pro-light-svg-icons 导入图标，这会导致应用程序中的所有图标被放置到一个单独的块中，即使它们是动态导入（例如页面组件），对于下载大小或性能而言并不理想。但是确实解决了上述丢失图标的问题，因为所有图标都加载在一个地方，并且这个块是第一个加载的块之一，因为它几乎在任何地方都需要它。

配置

Vite 3.0.8
汇总 2.78.0
Fontawesome 6.1.2
vite.config.ts 是默认的，没有定义插件或汇总构建配置

解决方法

目前，我发现避免对第二个示例的性能影响的唯一解决方法是在vite.config.ts 的manualChunks 配置中定义所有图标导入，这会将每个图标拉入它自己的块中。不是很好，但确实解决了问题栏有几百块，每个块都包含一个图标。

标签： font-awesome vite rollup code-splitting dynamic-import

【解决方案1】：

在汇总不和谐和大量挖掘 vite 的帮助下，确实设法找到了解决方案。在这个用例（直接导入）中，似乎汇总 commonjs 插件没有正确提升 fontawesome 图标。

解决方案是将 strictRequires 选项传递给 commonjs 以进行所有图标导入。下面的两个选项都适用于我的情况，但是我还没有测试任何一个的副作用。

  // vite.config.js
  build: {
    commonjsOptions: {
      strictRequires: [
        new RegExp('@fortawesome\/[\\w]+-[\\w]+-svg-icons\/fa[\\w]+\.js')
      ]
    }
  }

  // vite.config.js
  build: {
    commonjsOptions: {
      strictRequires: true
    }
  }

【讨论】：