Tree shaking for generated file doesn't seem to work

[carbonid1]

Hi!

I have a project with Next.js and Apollo Client that has a bunch of server-side rendered pages. And I generate Apollo hooks into a single file. Here is my codegen.yml

overwrite: true
schema: "https..."
documents: ["./**/*.gql"]
generates:
  lib/schema.graphql:
    plugins:
      - schema-ast
    config:
      includeDirectives: true
  lib/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
      - named-operations-object
config:
  namingConvention: keep
  skipTypename: true
  avoidOptionals:
    field: true
    inputValue: false
    object: false
    defaultValue: false
  omitOperationSuffix: true
  identifierName: names

I import one of my hooks useProfile into settings.tsx that looks something like this:

import { useProfile, ProfileDocument } from 'lib/graphql';

const SettingsPage: NextPage = () => {
  const { data, error } = useProfile();

  return (
    <div>
      {data.profile.name}
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async ctx => {
  const apolloClient = initializeApollo();
  await apolloClient.query({ query: ProfileDocument });

  return {
    props: {
      initialApolloState: apolloClient.cache.extract(),
    },
  };
};

export default SettingsPage;

There are a bunch of other pages and what I have noticed is that all of the generated hooks that are needed only for those pages go into the settings page js chunck.

Do you know if this is the default behaviour for Next.js apps? The generated file seems tree-shakable but unexpectedly for me, it isn't. I wonder if I should update webpack config somehow (although tree shaking works in the rest of my project) or should I take another approach and have the hooks in separate files?