NextJS - Tree Shaking 奇怪的行为

如何解决NextJS - Tree Shaking 奇怪的行为

我目前想通过下面描述的实现来优化我的应用程序上的处理模块。我不确定为什么页面最终包大小增加。它只保持相同的包大小在 package.json 上添加标志 sideEffects: false

Nextjs treeshake 模块是否开箱即用？

模块代码

// file ModuleA.js
import React from 'react';
const ModuleA = props => (
  // some code
);
export default ModuleA;

// file ModuleB.js
import React from 'react';
const ModuleB = props => (
  // some code
);

export default ModuleB;

页面代码

import ModuleA from '~/ModuleA';
import ModuleB from '~/ModuleB';

// Page size production build 25KB

---

优化模块处理

// modules/index.js
export { default as ModuleA } from './ModuleA';
export { default as ModuleB } from './ModuleB';
export { default as ModuleC } from './ModuleC';
export { default as ModuleD } from './ModuleD';

页面代码

import {
  ModuleA,ModuleB,} from '~/modules';

// without sideEffects: false - production build 50KB
// with sideEffects: false - production build 25KB