摇树不适用于节点包

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 语句更改为：

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';