HI，有段时间没有更新了，主要因为第一年前事情比较多，有些事得忙着张罗下；第二呢，对个人网站进行了一次大范围的优化，主要是申请的云服务器资源有限，1m的网络带宽，带上图片展示的话，打开网站的平均速度会达到20s以上，用户的体验不是很好；经过这次优化，已将访问速度控制在1s左右，整体感觉速度和用户体验提升了不少。当然，最主要的是，把网站的模式改成了单页应用模式，算得上是比较大的重构了，所以耽搁的时间比较久，请大家见谅。
那今天主要来说一下我是怎么重构之前的网站代码，更新为单页模式吧，顺便分享下个人性能优化的经验。
重构出发点和目标之前.Net Core自动帮我们生成的网站代码，主要是多页的应用，我们定义页面的时候，引入了_layout文件，相当视图区域的模板页，那通过控制器调整页面的同时，会将整个页面包括模板页都会再次加载一遍。所以，之前的多页应用，对应我的个人应用来说，有以下问题：
页面导航跳转时，需要重新加载整个页面包含的css、js和html元素，云服务器带宽有限，重新加载资源有些浪费；
用户体验不好，在网速带宽不够的情况下，页面刷新慢，用户需要等待很长一段时间才能看到内容区域；
作为后台管理系统，页面布局包含导航栏，头部区域、尾部区域和内容区域，除了内容区域的视图会经常变换，其他区域不会有大的变化，却每次需要重新加载和刷新；
当初网站设计需要在移动端提供支持，多页应用在移动设备中页面切换的表现加载慢、不流畅、用户体验差；
现在，网页设计整体趋向于单页网站设计，但是这里我还是要强调一下，我从没说过单页模式就一定比多页模式要好，只是这对我个人网站项目来说，单页模式可能会更合适。其实2者都有很明显的优缺点，多页模式也有它的优势，比如可以很方便的做SEO，单页模式也有自己的劣势，比如得单独方案做SEO，而且开发难度相对多页会复杂些。
所以说，一切抛开具体应用去谈技术之间的好坏都是耍流氓！！！这里，我们的网站也不完全是单页模式，比如登录页面跳转等等用的还是多页，所以只能说是以单页模式为主的混合模式。
那既然我们决定要改造我们的网站为单页应用，首先定一下优化的目标吧：
以简单、容易和可操作的方式展示给用户，提供用户简单的线性体验；
整个页面有固定的导航栏，头部区域、尾部区域和变化的内容区域，实现页面片段局部刷新；
公共资源首次加载后，页面更新后不在重新加载；
选择专门的UI框架，降低单页模式的开发难度；
很好的响应式设计，支持移动端良好的用户体验；
引入UI路由框架既然我们舍弃了多页模式，就不能再用微软提供的_layout模板页取渲染视图了，很方便的Razor引擎也没法再用了（这里稍微解释下，.Net Core之前版本的，是可以继续用Razor来渲染数据模型的，但是.Net Core中，会将cshtml文件一起编译成dll文件，所以cshtml文件在发布路径中是找不到的，所以路由后的url是找不到的），那选用那种UI框架，来满足单页模式应用呢？
我们理一下思路：如图，我们通过导航栏side的url地址，通过一种路由方式找到对应的html文件，然后后台加载数据，通过UI渲染，在内容区域content中显示。这里可以看出，主要要满足一是url的路由，二是数据模型的渲染。当然，满足这样需求的UI框架很多，我这里用的一种主流框架angular-ui-router(url路由，可以支持多样化视图和嵌入式视图)+angular（数据模型和UI界面双向绑定），大家也可以用别的方式，条条大道通罗马嘛！
angular-ui-router配置本文只是简单介绍angular的使用方法，如果需要了解更多的使用方法，请参考官网文档。
首先，我们引入以下2个脚本：angular.js和angular-ui-router.js。导航菜单结构重构如下：
1 /// <summary> 2 /// 导航菜单项 3 /// </summary> 4 public class NavMenu 5 { 6 public string Name { get; set; } 7 public string TemplateUrl { get; set; } 8 public string Icon { get; set; } 9 10 /// <summary> 11 /// 子菜单 12 /// </summary> 13 public IList<NavMenu> SubNavMenus { get; set; } 14 } 15 16 /// <summary> 17 /// 左侧导航菜单视图模型 18 /// </summary> 19 public class NavBarMenus 20 { 21 public IList<NavMenu> NavMenus { get; set; } 22 }