"First Load JS" size problem Next.js. (Using immutable.js)

Question

In my project(Next.js v10), the immutable library is used to work with redux. Now I tackled the issue of optimization, because I ran into the problem of "red" first load js.

I am not very strong in this yet, but I try to learn and understand everything. I applied dynamic import on the pages themselves, as it is advised everywhere, and it helped a lot, since the situation was even worse than now. I checked _document.js and _app.js, everything seems to be fine except:

//_app.js

const {serialize, deserialize} = require('json-immutable');

...

const wRedux = withRedux(makeStore, { 
    serializeState: state => state ? serialize(state) : state,
    deserializeState: state => state ? deserialize(state) : state
})(MyApp);

export default wRedux;

As it works now, I get:

If I turn off the use of serialize and deserialize completely (in _app.js), and index.tsx (no redux request and no imports other than React) just returns an empty div => I get this:

const wRedux = withRedux(makeStore, { 
   serializeState: state => state,
   deserializeState: state => state
})(MyApp);

Some chunks are missing, but the immutable chunk remains in place( though for some reason its size is slightly different, but the hash is the same):

I found this article: https://betterprogramming.pub/try-these-instead-of-using-immutable-js-with-redux-f5bc3bd30190 and check https://www.npmtrends.com/immutable-vs-immer-vs-seamless-immutable

The problem is that the whole project is already on the syntax immutable-js (post.get ('prop'))

My questions:

1. How much better Immer will be?
2. Will he(Immer) also "go into the general chunk"?
3. What other ways are there to reduce the size of "First Load JS shared by all"?
4. Perhaps there are some other shortcomings that I do not notice due to lack of experience, but they can be seen on the reports?

Thanks for any help!

Answer 1

I published the results of my work, I hope this will help someone(Sorry for my English :)).

Ditching immutable.js in favor of Immer did make sense (156 => 123):

Also, if anyone is interested, take a closer look at your chunks. As you can see from my question, in addition to Immutable, http-status.js was also "added" to the general First Load JS. This is a standard file with a set of response codes, from which I needed only one (I just wrote the number manually and removed the import), and the file where it was imported is distributed to the entire application. Additionally, I revised the connection of third-party scripts and used the internal optimization of fonts in next v10:

Also, in conjunction with immutable, json-immutable was used, which is no longer required, which removed 2 more small chunks.

And my previously problematic chunk now looks like this:

Finally: "First Load JS shared by all" has been reduced from 156 kB to 111kB (28.85%)

P.S. I have such a big _app.js chunk because I have Automatic Static Optimization disabled due to getInitialProps