登录鉴权
实现功能：只有用户登录以后点击“写文章”才会跳转写文章页面，若未登录就跳转登录页
新建write页
src-pages.js下新建write文件夹，新建index.js识别是否登录，如果已登录就跳转写文章页面，若未登录就使用 重定向 跳转登录页:
App.js中创建write页的路由
src-App.js中创建路径为/write时的路由：
点击“写文章”跳转write页
在src-common-header-index.js中，给Header组件设置，点击“写文章”跳转write页：
异步组件（懒加载）及withRouter路由方法
- 目前我们所有的页面都是放在bundle.js上的，点击详情页、登录页都不会发生新的js请求，这就说明当我们加载首页的时候是把所有页面都加载了一次，这就导致首页加载速度慢：
- 想单独加载不同的页面就要使用异步组件（懒加载），只有使用该页面时才加载该页面。
- 异步组件（懒加载）底层复杂，但可以使用第三方模块react-loadable。
安装react-loadable模块
项目中安装react-loadable：
1 | yarn add react-loadable |
使用react-loadable模块
实现功能：只有进入详情页才加载详情页
- pages-detail-新建loadable.js，将官方案例复制来使用将Detail组件变为异步组件：
- 在src-App.js中进行修改，之前加载的是普通Detail组件，现在要加载的是异步组件：
报错：路由参数无法获取
此时会报错：
TypeError: Cannot read property ‘params’ of undefined
原因
- 之前我们可以获取动态路由参数，是因为之前Route包裹的Detail组件就是Detail组件，所以Detail组件可以获取到路由的配置信息
- 而现在Route包裹的是LoadableComponent组件，LoadableComponent组件可以获取路由的配置信息，但是LoadableComponent组件内部的Detail组件获取不到：
解决方法：使用withRouter路由
- “react-router-dom”提供了withRouter，被withRouter()包裹的组件将有能力获取到Router中所有的参数和内容。
- 在pages-detail-index.js中，引入withRouter：
- 使用withRouter包裹Detail组件再进行输出：
- 在pages-detail-index.js中，引入withRouter：
结果展示
此时加载首页是bundle.js，点击详情页是1.chunk.js:
项目上线流程
删除模拟数据的文件
将public-api文件夹删除，开发的时候我们需要借口模拟，但真正上线时后端已经将接口准备好了。
前端项目打包编译
项目命令行输入：
1 | npm run build |
此时前端项目的目录下会生成一个build文件夹，该文件夹内的内容就是前端所有的内容（包括html文件）。
放到后端项目文件夹内
- 只需要将build文件夹内的文件全部复制到后端文件夹中，即可在后端正常显示所有前端页面。（注意，不是把文件夹复制过去）
- 此时，将前端页面经过build编译后生成的html页面放入了后端项目，那么访问的就是后端项目的接口下的页面，那么前端页面发送ajax请求时也就不需要nginx进行反向代理了，因为此时前后端是用同一个接口运行起来的。
- 补充：如果前后端页面使用的是不同的接口运行起来的，假设前端页面是3000端口，后端页面是8000端口。那么用户打开页面时打开的就是3000端口的页面，前端页面中使用ajax请求获取数据时就会去获取3000端口下的对应路径的数据。而后端页面是8000端口，所以数据其实保存在8000端口下的对应路径中。这就无法获取数据。此时使用nginx进行反向代理，遇到
/api/开头的url时就分配到8000端口，遇到/开头的url时就分配到3000端口，这样就没问题了。
补充：图片的懒加载
react的react-lazy-load库
- react中可使用react-lazy-load库来实现图片的懒加载。
原生js
- 原生js实现图片懒加载可参考这篇文章和这篇博客，如有需要可以了解JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解
面试题：预加载 与 懒加载
- 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
- 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
- 两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
- 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。