MonkeyEye电影售票系统--性能优化总结

案例来源：SYSU SE305 课程大作业。互联网售票软件是比较常见的软件系统。通常由多个零售系统和多个供给系统系统。 机票、酒店房间、电影票似乎是风马牛大相关的系统，但它们之间存在极其相似的业务模型。 以电影票为例，格瓦拉、蜘蛛网、腾讯等等都做类似的电影票分销、推广业务，但票是由各大院线排期提供的。 分销-院线-影院形成了一个完整的生态体系。 本课程以大家熟悉的订票为例，学习分析、设计、开发的方法。

我所在的小组做的是一个叫做MonkeyEye的项目，实现一个简单的电影购票系统，并在项目完成过程中学习系统分析与设计，学习UML建模等技能。本系列文章将会以此项目为案例，总结整个项目的设计、建模与开发过程。

前端项目地址：https://github.com/SYSUMonkeyEye/MonkeyEye-FE

关于项目的介绍和技术要点请查看项目结构和技术要点。

由于我在项目中主要负责前端开发，因此本文将会较多地讲解本项目中使用到的前端性能优化技巧，后面再简单涉及一些服务器部署方面的优化技巧。

一、主要问题

1. 服务器带宽较小，库文件体积较大。还没做优化的时候，构建之后的产品文件里面，库文件vendor.js的大小大概有400+KB。加载这个文件的时延大概是3-4s。
2. 图片体积较大，数量较多。应用中有比较多电影海报图片，大小大概也是几百KB，由于服务器带宽很小，加载一张图片的时延也是需要几秒。

应用没有计算性能方面的问题，另外我们也没有更高配置的服务器，所以优化方向主要朝着减小资源文件体积进行。

二、前端优化

1、按需引入

webpack打包的时候会根据代码中import的内容，将相关文件打包到产品文件中。本项目使用的UI框架是vue-material，之前引入这个库的方式如下。这种方式会将整个vue-material库引进来，也就可以随意使用它里面的UI组件了，但这也造成了引入部分无用组件从而增加了产品文件的体积。

查看官方文档后，发现这个库是支持按需引入的，因此，我们将代码改成只引入我们用到的组件，如下。