easy-jianshu

一个模仿简书网站的前后端项目

技术栈: koa2+mongodb+react
前端: react+axios+redux+material-ui+antd+create-react-app 后端: koa2+mongoose+koa-router
构建工具: webpack 数据库： mongodb

线上地址
仓库地址
之前自己主要写前端，虽然也偶尔写过小的demo，但是一个完整的项目后端代码却是第一次。后端用的是koa2，首先自己做的是一个小的项目，不需要express这样大二全的框架，而且koa2提供了更优雅的异步方案 async await ， nodejs最新版本也是提供了async await 的语法支持，的确koa2 是一个很适合自己项目的一个框架。对于数据库的选择，这个项目中的评论功能是本项目的一个难点mongodb灵活的语法，在项目中也有不少的帮助。

对于这此项目，我收获最大的部分是部署阶段以及在构建时的优化。

先来说说自己是如何将首屏时间从4.39s优化到897ms

首先使用了webpack的默认配置（压缩js，压缩css等）， 同时使用react-loadable实现异步加载组件。首屏时间4.39

接下来使用bootcdn提供的库文件的cdn加速和使用vendor将公共组件抽离，到这应该我们的首屏时间应该很好了。然而

3.7s作用并不大。
main.js 下载了3.4s终于找到元凶了，因为自己用的是1m带宽的阿里云服务器，下载速度很慢。现在我们要解决的问题就是，怎样将自己的静态资源（css,js）托管到另一个地方，最后找到的解决方案是七牛云，免费提供一定的存贮空间。当然最好的选择还是cdn，但是自己没有备案的域名，没办法只能部署在七牛云的存贮空间。

再来说说主要的nginx主要配置 首先打开gzip，减小传输文件大小，虽然我想下，好像只穿了一个index.html

	##
	# Gzip Settings
	##

	gzip on;
	gzip_disable "msie6";

	gzip_vary on;
	# gzip_proxied any;
	gzip_comp_level 6;
	gzip_buffers 16 8k;
	gzip_http_version 1.1;
	gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

因为react使用的浏览器historyapi做的路由跳转，服务器是找不到响应的路径，当遇到404时， 使用指定的html文件解析路由，所以需要以下配置

location / {
        try_files $uri $uri/ /index.html;
    }

这个项目给我最大的感触就是，优化的过程是真的需要从各个方面去考虑，只不过每个方面优化程度影响也不一样，优化的过程需要先从优化效果最明显的步骤开始，逐步推进。