前端react单页应用项目太大，导致开发环境编译过慢，有什么解决思路么？

react项目中利用dva脚手架，roadhog打包工具打包后只生成了一个indexcss和indexjs。所有的js文件都打包在了一个indexjs文件中，所以这个文件有11M。部署到服务器上，首次访问首页加载的会特别慢，这样会流失很多的用户。

解决办法：gzip压缩。

GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指>

gzip可以极大的加速网站有时压缩比率高达80%，近来测试了一下，最少都有40%以上，还是相当不错的在Apache2之后的版本，模块名不叫gzip，而叫mod_deflate。

Nginx开启gzip：

在nginxconf中添加以下配置：

1gzipon;

2gzip_buffers324k;

3gzip_comp_level6;

4gzip_min_length200;

5gzip_typestext/csstext/xmlapplication/javascript;

6gzip_varyon;

重启nginx：

usr/local/nginx/sbin/nginx-sreload

1

清除浏览器缓存，重新访问网页，可以发现首次加载速度快了很多。

希望对你有所帮助！

一、CMS管理系统功能
CMS是Content Management System的缩写，意为"内容管理系统"。
CMS都有可能包括些什么？
隐藏在内容管理系统(CMS)之后的基本思想是分离内容的管理和设计。页面设计存储在模板里，而内容存储在数据库或独立的文件中。 当一个用户请求页面时，各部分联合生成一个标准的HTML（标准通用标记语言下的一个应用）页面。
一个内容管理系统通常有如下要素：
文档模板
脚本语言或标记语言
与数据库集成
内容管理系统也简化了网站的内容供给和内容管理的责任委托。很多内容管理系统允许对网站的不同层面人员赋予不同等级的访问权限， 这使得他们不必研究 *** 作系统级的权限设置，只需用浏览器接口即可完成。
内容管理系统被分离成以下几个层面：各个层面优先考虑的需求不同
1，后台业务子系统管理（管理优先：内容管理）：新闻录入系统，全文检索子系统等，针对不同系统的方便管理者的内容录入：所见即所得的编辑管理界面等，清晰的业务逻辑：各种子系统的权限控制机制等；
2，前台发布（效率优先：发布管理）：面向最终用户的缓存发布
可以通过WEB实现一套完整的CMS管理系统，用于对PC网站和移动端浏览内容的增、删、改、查等 *** 作，通过对模板内容的修改即可改变网页展示内容，方便了网站管理人员的日常管理和 *** 作。
二、One Page One Application
1定义
One Page, One Application(后面缩写为OPOA，或者1P1A)， 含义很简单：一个页面就是一个应用。不再使用iframe, 页面提交不能再使用submit方式。网页中发生的 *** 作和交互都在当 前页面进行。
在 众多的基于Web的MIS系统中，没有人关心页面的组织形式；大多数稍微复杂的MIS系统，都采用分祯(Frame)的方式来组织页面，这样，在进行业务 *** 作的时候，url的变化表现在一个框架页面内，从浏览器的地址看起来，只有一个地址；更有甚者，一些应用干脆d出一个去掉了浏览器菜单、工具条、地址 栏、状态栏的窗口（比如招商银行、民生银行的网上银行系统），连地址都看不见。因此，一个页面就是一个应用，从用户的角度来说，对于 *** 作型系统，是一种非 常自然的体现。用户无需了解每一个具体的 *** 作对应的地址是什么。
这种设计背后的含义实际是：是希 望由程序来控制用户的行为，还是反过来。在 *** 作型系统中，每一步的 *** 作往往被业务含义严格定义，无论是应用的设计者，还是其使用者，都希望在一种受控的状 况下来进行 *** 作。例如，一个审批动作，用户更希望是通过一个按钮来触发，而不是访问类似于/approveactionitemid=123的方式。
这样的好处是：很多东西，例如：JS，CSS，HEAD等整个系统都只需加载一次。加快响应速度。客户体验也有所提高，不再d出窗口，不再整个页面进行刷新。
2场景（内容管理系统更倾向明确的URL定位页面）
显然，OPOA的设计只能针对那些对URL不敏感的系统，或者说 *** 作型系统。绝大多数MIS系统都属于这一范畴，Email系统也是这一范 畴，其他领域，如监控系统，聊天室等都可以采用这种思路。反面的例子是，对于内容型系统，如新闻系统，Blog系统，论坛系统，用户更希望能够通过一个明 确的URL来定位页面内容，搜索引擎也喜欢这种地址。这种应用需要的是一个合理，易懂，明确的地址。
3设计与实现
注意到上述的OPOA地实现只是对用户而言，看起来好像是一个页面一样，但实际上还是有众多的action， page在后面工作。
三、react的技术准备
1react的起源
React 起源于 Facebook 的内部项目，意在解决随时间数据不断变化的大规模应用程序开发，react可以表现出应用程序在任何时间点的样子，底层数据改变时，react的虚拟DOM机制会自动重新渲染，更新界面。
2对react的认识
React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；
React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；
React的虚拟DOM原理：在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行 *** 作。而复杂或频繁的DOM *** 作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM *** 作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的 机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前 整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟 DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行 *** 作的仅仅是 Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要 关心在任意一个数据状态下，整个界面是如何Render的。
jsx语法：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。jsx语法与javascript并不兼容，需要通过babel-loader来解析。
组件化：构建可组合的组件（组件：对数据和方法的简单封装，封装起来的具有独立功能的UI部件），是代码复用、测试和关注分离。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义 成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。
React认为一个组件应该具有如下特征：
（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；
（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；
（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

本篇配置不在docker内实现build，而是外部build

更多关于dockerfile指令详解

nginx镜像有一个默认的配置文件 defaultconf
默认的配置有一个问题, 在非首页的路由页面刷新就会报404错误
我们使用 react-router 作为路由管理，在开发端的express服务器下运行和测试表现均正常，部署到线上的nginx服务器后，还需要对该应用在nginx的配置里作相应调整，否则浏览器将不能正常刷新，表现为页面不显示或页面跳转错误等异常。原因在于这些react应用在运行时会更改浏览器uri而又不真的希望服务器对这些uri去作响应，如果此时刷新浏览器，服务器收到浏览器发来的uri就去寻找资源，这个uri在服务器上是没有对应资源，结果服务器因找不到资源就发送403错误标志给浏览器。所以，我们要做的调整是：浏览器在使用这个react应用期间，无论uri更改与否，服务器都发回indexhtml这个页面就行。

docker使用镜像

打开浏览器，访问 localhost:80。出现如下页面表示工作正常，测试通过。

参考文档： >