由浅至深地谈电影购票系统(Vue+Webpack+异步加载+性能优化)

电影购票系统是我们的一个课程作业，从三月开始一直到现在，不是忙春招就是忙实习，所以拖延症发作一直到前几天才开始写代码。
从整体来看，我们主要是采用了前后端分离的策略，前端主要用Vue2.0进行开发，后端则使用了SpringMVC框架。当然了，如果问我Vue是什么框架，我站MVVM哈哈哈。下面先看看我们项目的架构。

图标——IconFont

IconFont 是阿里的一个矢量图标网站，开始为什么会叫iconfont？其实我记得在我大二的时候，网站里面的图标都是字体图标来的，需要在css文件夹里面import才能使用这些图标的，不过现在已经发展成用.svg/.png等来做图标了。项目里面主要是使用.svg做图标的，因为.svg是矢量，会比较好适应大小变化而不失真，同时它做动画也很方便，在去年的cssConf上面许多工程师都开始推荐使用svg而非canvas或png(这两个当然也有自己适合的场景)。基于图标大小常变化的项目特点，我们选用了.svg格式引入。

UI框架——ElementUI

以前提起UI框架，很容易就会想到Boostrap，经过了几年以后国内终于有一个比较拿得出手的开源框架——饿了么的ElementUI，issue保持在三百上下，和Angular比起来还是很不错的。

优点：
1. 开源框架维护得不错，提出来的issue基本会在三天内答复。
缺点：
1. 现在造轮子的框架基本上都重复了一个套路：会先实现一遍已经有的轮子再添加新的，ElementUI方面有使用者吐槽有的代码还是和Boostrap一样的。
2. 我试过在一天内发现了两个bug，提issue的话翻译机器人无力吐槽。

构建工具——Webpack

Webpack和Gulp以及Grunt这些一样都属于构建工具，其实对比Webpack我更喜欢Gulp，但是没有办法太懒了以至于我不希望自己来写gulpfile嘿嘿嘿所以用了vue-cli进行环境搭建。Webpack的优点在于构建和打包都很方便，同时还可以进行代码混淆以及图片压缩。去年，Webpack出了2.0版本的，2.0版本最大的不同在于打包算法上面有了很大的改进，这样打包后的代码大小要比之前的少了几十k(原本几百k的代码)，这个也是我在和其他同学交流的时候才发现的。

那么如果说要迁移到webpack2的话，那还要修改路径，例如-loader没有了这样的，具体的可以参考Webpack入门和迁移的博客。

我觉得Vue就不用太详细介绍了，如果说它带来了什么，那就是刚刚入门的时候需要花费时间进行组件的分离，那么下面就代码里面的一些写法进行分析。

文件目录结构

我是用sublime在Ubuntu 16.04下进行开发的，文件目录大概如下：

这里面的api文件夹主要是放置真正发送ajax请求的文件的，那么其他页面主要是调用这个目录下的index.js文件发送请求并返回，具体的方式下文会讲述。

之后的components文件夹这里是放置了所有vue文件，这里可以改进的地方是新建一个views文件夹与components文件夹同级，之后views放置的是页面，components放置的是分离出来的组件。

api/index.js

ApiUrl是我们服务器的公网IP(求别发起DDOS攻击)，在这里主要是调用函数来实现的，那么调用的时候其实相当于使用了闭包(词法作用域在index.js文件，调用的地方在.vue)，返回了一个Promise对象，里面嵌套了一个ajax请求，整个文件一目了然，比起散乱地将请求分布在各个vue文件，这样肯定会更好管理。但是，由于多人修改用一个文件，所以容易造成冲突，在nodeJS + MySQL的开发修改sql文件也常遇到过这种冲突的情况。

router/index.js

这个是整个项目的路由配置文件。和以往的那些多页面应用不一样，路由是在前端控制的，而不是在.java中返回一个model(页面例如html等)，这样做的好处我觉得就是让后端专注于数据了。不过不知道是不是我一开始配置的问题，如果childrens里面嵌套childrens，没有几层它就跪掉了，我看估计是我代码的关系吧。

这里主要看下面绿色component部分，这里可以看到，是利用了异步加载的原理的，我觉得这个的原理大概和webpack require 有点类似，因为都是首屏就是一打开网页立马就要显示的东西是一定要同步加载就是不能采用这种方式请求的，有一点类似

性能优化

对我们这个很晚才开始做的项目来讲，性能优化可能没有充足的时间完成。但是我也和其他同学交流过，越发觉得自己懂得太少，下面我会介绍一些常见的前端性能优化方法，至于实现与否，估计是没有时间了。

启用HTTP/2.0协议

http2协议是在SPDY的基础上提出来的，最大的优点就是多路复用减少http请求数，同时并没有限制浏览器(客户端)一次请求资源数。因为在http1.1协议中，Chrome一次最多只能请求5个文件，这样将导致类似下图的情况，

请求的时候有明显的一段一段的感觉，但是如果启用了http2.0协议，那么就会像下图一样：

http2.0的启用有很多种：
1. Nigix启用http2.0模块(有种冲动去学习一下了)，同时Nigix也用于负载均衡等方面
2. NodeJS启用
3. Apache启用

那么从实际出发，我看我们应该是用第三种启用的。但是三者同样需要申请第三方CA证书，因为http2.0是默认使用https协议的。因为不认识人估计来不及申请了(认识人的话半天就搞定了)，所以我们并不打算实现这个。

CDN

CDN是内容分发网络，原理大概就是将一些静态资源放在CDN上面，用户请求的时候将会在离他最近的CDN上面返回资源，做到将访问的压力转接到CDN上面。不过我之前申请的时候大概需要审核7天，也没戏了。

Webpack1.0迁移到Webpack2.0

就像我刚刚讲的，因为Webpack2.0改进了打包算法等，但是vue-cli搭建的环境默认就是webpack1.0，所以迁移的时候需要注意路径的变化等，目前网上面还没找到靠谱的，建议还是从官方文档入手，或者等同学写出来配置嘿嘿嘿。

启用HTML5缓存

在我看来这个算较为冷门的技术了，目前使用的场合还不是很多的样子HTML5缓存 ，具体的因为没有用过所以就不说什么了，但是有的时候缓存真的挺烦的，要强制刷新哦。

开发中遇到的一些坑

1. 后端代码不部署在公网IP的上，除非前后端两台电脑在同一个子网内，否则是无法交互的，所以最好还是部署到公网IP之后使用绝对路径进行请求。
2. 后端需要处理跨域问题，否则前端就会报”403Forbidden”错误，在Spring跨域中只需要写个标签就行了。
3. 代码冲突，这个怕不是最坑爹的

大概就这些了吧，毕竟代码写得有点仓促，丑是一定的，就看有多丑而已。