Vite / Rollup 不正確的分塊

Question

我在將 Fontawesome 圖標導入 Vue 3 Vite 項目時遇到問題。 特別是來自匯總的構建文件 output 未正確分塊。 我已經嘗試了從 Fontawesome 的文檔中導入圖標的兩種方法，但是都沒有得到最佳的塊 output。

任何有關尋找另一種解決方案或發現我為導致此問題所做的愚蠢行為的任何幫助都將不勝感激。

直接進口

進口文件

FaCat 圖標

FaDog 圖標

直接通過import {faCat} from @fortawesome/pro-light-svg-icons/faCat導入 commonjs 圖標，這在某些特定情況下會導致圖標數據未放置在匯總生成的塊中。 這會導致在下面的示例中加載特定的不相關塊之前，圖標並不總是加載，如果首先加載了chunkA.js ，即使共享數據應該在faCat.js中，圖標也只會在加載chunkB.js時顯示faCat.js塊。

對我來說，這感覺就像匯總捆綁器算法的錯誤，因為它正確地為圖標創建了一個塊並正確地導入它。 但是似乎將圖標的內容放入另一個塊中。 一旦我知道這不是我做過的任何事情，我很高興報告這個。

我無法用其他任何東西（node_module 或本地）復制這個問題，但我看不到任何特定於 fontawesome 的東西會導致它。

示例構建文件 output

/*
 * 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 };

以上源代碼output

/*
 * 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 ---');

解構導入

導入文檔Index.es.js

通過import {faCat, faDog} from @fortawesome/pro-light-svg-icons ，這會導致應用程序中的所有圖標被放置到一個單獨的塊中，即使它們是動態導入（例如頁面組件） ，不適合下載大小或性能。 然而，確實解決了上面描述的丟失圖標問題，因為所有圖標都加載在一個地方，並且這個塊是第一個加載的塊之一，因為它幾乎無處不在。

配置

• Vite 3.0.8
• 匯總 2.78.0
• 超棒的 6.1.2
• vite.config.ts 是默認的，沒有定義插件或匯總構建配置

解決方法

目前，我發現避免對第二個示例的性能影響的唯一解決方法是在vite.config.ts的manualChunks配置中定義所有圖標導入，這會將每個圖標拉入它自己的塊中。 不是很好，但確實解決了問題欄有幾百塊，每個塊都包含一個圖標。

Answer 1

在匯總 discord 和大量挖掘 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
    }
  }