react加载优化问题

来源：20-4 使用 React Router 4 重写项目（三）

ABrandon

2017-08-16

老师，我想问下react项目的加载过程是怎么样的？项目加载如何做优化？

我写了一个小项目，首页有fetch网络加载，本地访问感觉有点慢。放到服务器上之后变超级慢了。跟网络应该没有太大关系（阿里云的服务器，之前放Angular项目访问速度还可以）。然后我试着settimeout，却发现项目加载中会把settimeout里的执行了再加载到html（所以变得更慢了）。想问下应该怎么做加载优化？谢谢

写回答

1回答

Parry

2017-08-17

已采纳

同学你好，react 的加载就是静态页面加载 js 的逻辑，实际的优化可以使用 chrome 进行详细的性能调试，可以看主要是哪部分加载较慢，你看看 fetch 数据的部分占用时间到底是多少还是 js 文件加载问题。

而关于 webpack 的优化，可以参考我博客中的 webpack 免费视频教程全集。

关于你的一个课程评论，慕课还是 pending 状态，如果可以的话可以删除或者重新评价下哦~~~

ABrandon

已经解决了，6m是因为用的开发模式，换生产模式是1.2m，另外，老师的sourcemap设置的null会报错，设置成独立map文件是800k，然后把第三方模块分离后是600k，最后使用webpack-bundle-analyzer查出是root.js直接导入antd.css的问题，（按官网上的.babelrc设置还是很大），最后把css换成cdn上的antd.min.css后，js还剩300k。虽然比预期还是大了很多，但勉强可以接受了

2017-08-20

共8条回复

结合基础与实战学习React.js 独立开发新闻头条平台

轻松入门 React 开发，React Router 4 与 Webpack 2 完美升级项目

2768 学习 · 2126 问题

查看课程

相似问题

react-router报错

回答 1

请教react-router4.2.2下的问题

回答 3

官方文档说的是使用 babel-plugin-import 才能按需加载。

回答 1

react iframe

回答 2

还是要请教老师一个老生常谈的问题，webpack热加载

回答 1

打开慕课网App查看更多内容