前言
好消息好消息！！！人事管理系统项目完结撒花了，实在是可喜可贺。前后端都是自己一个人写的，工作量确实大了不少，不过还是在预期下完成了这个项目。在完成项目后，确实有些问题还困扰我，不过还是让我对vue框架有了一定的理解。今天这一期就是前端性能优化的博文，接下来就一起看看！
步骤
1.按需导入
- 直接引入
相信不少人在使用ElementUI的时候，都是按照官网这样的写法
import 'element-ui/lib/theme-chalk/index.css'//没有按需导入的做法
- 按需导入
如果在项目中没有使用太多组件的话，这就是一个大的弊端，会占用项目的极大资源，这一点我深有体会。在项目几个页面做起来之后，在npm run serve命令时，项目往往会加载很久，所以按需导入能够一定程度上的解决这个问题(如果几乎使用了全部的组件另当别论)，按需导入只对使用组件库不多的情况下极为有效。
下面举几个常用的例子来说明
import {
Loading,
Pagination,
Dialog,
} from 'element-ui';//按需导入了三个组件，其他未使用的组件就不会占用项目过多的资源
Vue.use(Loading)
Vue.use(Pagination)
Vue.use(Dialog)
2.路由懒加载
懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
- 基础写法
//未使用路由懒加载
import Login from '@/views/login/index'
//路由配置法
const routes: [
{
path: '/',
name: 'Login',
component: Login
}
]
- 路由懒加载写法
说到路由懒加载就会有好几种加载的方式，在这里我就举一种例子说明，其他的还请自行学习了解。不过，在按照下面这种的写法时，
优点：可以大大提升页面的响应速度，减少项目的白屏时间，优先加载页面中使用的路由，未使用的路由暂不加载。
缺点：每一个注册路由会生成各自一个js文件，假如你有10个路由，则会生成10个注册路由，在后期管理时就挺麻烦的。
删除import Login from '@/views/login/index'
//在路由配置表这么写
const routes: [
{
path: '/',
name: 'Login',
component: resolve => require(['@/views/login/index'], resolve),
}
]
3.BootCDN
链接：BootCDN官网
在这里我使用的国内提供的CDN技术：BootCDN，链接在上方。
CDN的全称是(Content Delivery Network)，其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，提高用户访问网站的响应速度。
CDN技术还是特别有必要的，后面还是不断地去学习的。在未使用CDN技术前，我点开登录页面时，打开速度至少要花费2秒，存在短暂的白屏，用户体验感极其不好，于是在网上搜罗了一下，就采用BootCDN技术辽，打开页面至少比之前快了不少，几乎是秒开，白屏效果也不存在了，不枉我一下午努力。
- 引入方法
在index.HTML页面中引入js脚本，在这里需要按照自己项目中的版本来，版本依赖可以在package.json文件查看噢~
在项目中使用CDN技术
- 减少项目体积
通过build命令后，也使项目的体积缩小了不少了，之前是好几M的，对我来说，能够缩小成已经很是欣慰了。
4.压缩图片
- 对于图片的处理，可以采用压缩或者是懒加载。对于小icon图片多的话，可以考虑采用精灵图，减少http请求方式。对于大图片的话，可以考虑压缩图片的方法，在这里我就举压缩图片的例子，因为我在项目中基本用的都是大图，大的达到了1m多，小则好几百k，下面推荐两个可以对图片进行压缩的网址。
- tinypng.com
- 在线无损压缩图片
这两个网址都是可以对图片进行压缩。我采用的第一种，具体还是看自己需要来选择，通过压缩后，我的1.8m图片压缩成了300k，而且神奇的是，图片不会模糊，这就很舒服了。在压缩图片的同时还不会失去原有的效果哈哈哈。
- 此外，给大家推荐一个矢量图网址，里面包含了很多很多小icon图片，可以搜索任何你想要的图片哦。
- 网址：阿里巴巴矢量图
总结
在此，人事管理系统项目告一段落了，不过收获还是挺大的，学习到了许多新的知识，也加深了自己的目标决心，下面又是另外一个新的项目。加油，我们能赢！！！