"First Load JS"尺寸问题Next.js。 (使用 immutable.js)
"First Load JS" size problem Next.js. (Using immutable.js)
在我的项目(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(除了 React 之外没有 redux 请求和导入)只是 returns 一个空的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 and check https://www.npmtrends.com/immutable-vs-immer-vs-seamless-immutable
问题是整个项目已经在语法immutable-js (post.get ('prop'))
我的问题:
- Immer 会好多少?
- 他(Immer)也会“进入一般组块”吗?
- 还有哪些其他方法可以减小“所有人共享的首次加载 JS”的大小?
- 或许还有一些其他的缺点,由于经验不足,我没有注意到,但在报告上都能看出来?
感谢您的帮助!
我发表了我的工作成果,希望这对某人有所帮助(对不起我的英语:))。
放弃 immutable.js 支持 Immer 确实有意义 (156 => 123):
此外,如果有人感兴趣,请仔细查看您的块。从我的问题可以看出,除了Immutable之外,http-status.js也被“添加”到通用的First Load JS中。这是一个带有一组响应代码的标准文件,我只需要一个(我只是手动写入数字并删除了导入),并且它被导入的文件被分发到整个应用程序。另外,我修改了第三方脚本的连接,并在下一个v10中使用了字体的内部优化:
此外,与 immutable 一起使用的是 json-immutable,不再需要它,它又删除了 2 个小块。
我以前有问题的块现在看起来像这样:
最后:“所有人共享的首次加载 JS”已从 156 kB 减少到 111kB (28.85%)
P.S. 我有这么大的 _app.js 块,因为由于 getInitialProps
我禁用了自动静态优化
在我的项目(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(除了 React 之外没有 redux 请求和导入)只是 returns 一个空的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 and check https://www.npmtrends.com/immutable-vs-immer-vs-seamless-immutable
问题是整个项目已经在语法immutable-js (post.get ('prop'))
我的问题:
- Immer 会好多少?
- 他(Immer)也会“进入一般组块”吗?
- 还有哪些其他方法可以减小“所有人共享的首次加载 JS”的大小?
- 或许还有一些其他的缺点,由于经验不足,我没有注意到,但在报告上都能看出来?
感谢您的帮助!
我发表了我的工作成果,希望这对某人有所帮助(对不起我的英语:))。
放弃 immutable.js 支持 Immer 确实有意义 (156 => 123):
此外,如果有人感兴趣,请仔细查看您的块。从我的问题可以看出,除了Immutable之外,http-status.js也被“添加”到通用的First Load JS中。这是一个带有一组响应代码的标准文件,我只需要一个(我只是手动写入数字并删除了导入),并且它被导入的文件被分发到整个应用程序。另外,我修改了第三方脚本的连接,并在下一个v10中使用了字体的内部优化:
此外,与 immutable 一起使用的是 json-immutable,不再需要它,它又删除了 2 个小块。
我以前有问题的块现在看起来像这样:
最后:“所有人共享的首次加载 JS”已从 156 kB 减少到 111kB (28.85%)
P.S. 我有这么大的 _app.js 块,因为由于 getInitialProps
我禁用了自动静态优化