“首次加载 JS”大小问题 Next.js。 (使用 immutable.js)

Posted

技术标签:

【中文标题】“首次加载 JS”大小问题 Next.js。 (使用 immutable.js)【英文标题】:"First Load JS" size problem Next.js. (Using immutable.js) 【发布时间】:2021-10-18 09:24:45 【问题描述】:

在我的项目(Next.js v10)中,不可变库用于与 redux 一起工作。现在我解决了优化的问题,因为我遇到了“红色”首先加载js的问题。

我在这方面还不是很强,但我会努力学习和理解一切。我在页面本身上应用了动态导入,正如到处都建议的那样,它有很大帮助,因为情况比现在更糟。我检查了 _document.js 和 _app.js,一切似乎都很好,除了:

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

按照现在的方式,我得到:

如果我完全关闭序列化和反序列化的使用(在 _app.js 中),并且 index.tsx(没有 redux 请求,也没有 React 以外的导入)只会返回一个空 div => 我明白了:

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

一些块丢失了,但不可变块仍然存在( 虽然由于某种原因它的大小略有不同,但哈希是相同的):

我发现这篇文章:https://betterprogramming.pub/try-these-instead-of-using-immutable-js-with-redux-f5bc3bd30190 并查看https://www.npmtrends.com/immutable-vs-immer-vs-seamless-immutable

问题是整个项目已经在语法immutable-js(post.get('prop'))上

我的问题:

    Immer 会好多少? 他(Immer)是否也会“进入一般区块”? 还有哪些其他方法可以减小“First Load JS 所有人共享”的大小? 也许还有其他一些缺点,由于缺乏经验,我没有注意到,但可以在报告中看到它们?

感谢您的帮助!

【问题讨论】:

bundlephobia.com/package/immutable@4.0.0-rc.14, bundlephobia.com/package/immer@9.0.5 感谢您的信息,Immer 的引入确实产生了积极的影响。 【参考方案1】:

我发表了我的工作成果,我希望这对某人有帮助(对不起我的英语:))。

放弃 immutable.js 以支持 Immer 确实是有道理的 (156 => 123):

另外,如果有人感兴趣,请仔细查看您的块。从我的问题可以看出,除了 Immutable 之外,http-status.js 也被“添加”到了通用的 First Load JS 中。这是一个带有一组响应代码的标准文件,我只需要其中一个(我只是手动写了数字并删除了导入),并且导入它的文件分发到整个应用程序。另外,我修改了第三方脚本的连接,并在下一个v10中使用了字体的内部优化:

此外,与 immutable 结合使用的 json-immutable 不再需要,它又删除了 2 个小块。

我之前有问题的块现在看起来像这样:

最后:“First Load JS 由所有人共享”已从 156 kB 减少到 111kB (28.85%)

P.S. 我有这么大的 _app.js 块,因为我由于 getInitialProps 而禁用了自动静态优化

【讨论】:

节省 23kb,投入时间和可能更慢的代码 - 我希望至少 Immer 作为一个库更适合您的项目 :) immerjs.github.io/immer/performance 节省了 33 kb,在此之前项目使用不可变 + toJS。这很糟糕:)

以上是关于“首次加载 JS”大小问题 Next.js。 (使用 immutable.js)的主要内容,如果未能解决你的问题,请参考以下文章

如何使 Next.js getStaticProps 与打字稿一起使用

使用 next.js 调整窗口大小时无法居中我的图像

动态组件查找导致 Next.js 包大小爆炸,如何解决?

如何分析 Next Js 包的大小和内容

在 div 中调整 Next.js Image 组件的大小

Next.js:当每个标签检查其 isEdit 状态是真还是假时,如何使只有一个输入字段可内联编辑