搖樹不適用於節點包

Question

我有一個通常形狀像這樣的節點模塊（例如簡化）：

# color.js

export var red = '#f00';
export var yellow = '#ff0';
export var blue = '#00f';

# images.js

export var image1 = '<base64 string approximately ~ 500kb>';
export var image2 = '<base64 string approximately ~ 500kb>';

# index.js

// JavaScript tokens
import * as colorExport from './color';
import * as imagesExport from './images';

export var color = colorExport;
export var images = imagesExport;

然后在我的 Next.js 應用程序中（也在 Create React App 中測試）我導入這樣的值：

# Home

import { color } from 'my-module'

const Home = () => (
  <h1 style={{ color: color.red }}>Hello!</h1>
)

export default Home

這工作正常。 然而，在 Next.js 和 Create React App 中，當我去構建生產就緒站點時， my-module （ color和images ）都包含在內，最終包大小略大於 1MB。

現在，如果我將 Home 中的導入語句更改為：

import * as color from 'my-module/color'

然后最終包只包含我所期望的顏色值。 但我想不必那么特別地導入。 有什么明顯的我做錯了嗎？

Answer 1

重構color和images以具有默認導出而不是命名導出，然后還重寫index導入和導出的方式修復了問題。

例如

# color.js

export default {
  red: '#f00',
  yellow: '#ff0',
  blue: '#00f'
}

# index.js

export { default as color } from './color';
export { default as images } from './images';