I have a problem with the way webpack bundles my files.

Consider the following files:

// utils/index.js

export const funcA = () => {
  return "funcA in CompA";
};

export const funcB = () => {
  return "funcB in CompB";
};

// components/ComponentA.js

import { funcA } from "@/utils";

export const ComponentA = () => {
  return funcA();
};

// components/ComponentB.js

import { funcB } from "@/utils";

export const ComponentB = () => {
  return funcB();
};

Also ComponentA is in one page and ComponentB is in another page.

You would expect webpack to place funcA in ComponentA chunk and funcB in ComponentB chunk however this isn't what happening. Instead the whole utils file is placed in both ComponentA and ComponentB chunk although the other function is not used.

I have placed "sideEffects": false in my package.json file. Also i have added this webpack configs:

const nextConfig = {
  webpack: (config, { isServer }) => {
    config.optimization.splitChunks.chunks = "all";

    return config;
  },
};

None of this has helped. Can anyone please guide me what is the problem and how can i fix it?