NextJS - Tree Shaking weird behaviour

Viewed 4963

I currently wanted to optimize handling modules on my application with the implemenation below described. I'm not sure why the page final bundle size increased. It only kept the same bundle size adding on the package.json the flag sideEffects: false

Does Nextjs treeshake modules out-of-the-box?

Module code

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

Page code

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

// Page size production build 25KB


Optimized module handling

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

Page code

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

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

0 Answers
Related