vue后台项目中遇到的技术难点以及解决方案 外汇业务难点有哪些问题

作者：yeyan1996

https://juejin.im/post/5c76843af265da2ddd4a6dd0

写在前面

马上到了金三银四的时间，很多公司开启了今年第一轮招聘的热潮，虽说今年是互联网的寒冬，但是只要对技术始终抱有热情以及有过硬的实力，即使是寒冬也不会阻挠你前进的步伐。在面试的时候，往往在二面，三面的时面试官会结合你的简历问一些关于你简历上项目的问题，而以下这个问题在很多时候都会被问到

在这个项目中你有遇到什么技术难点，你是怎么解决的？

其实这个问题旨在了解你在遇到问题的时候的解决方法，毕竟现在前端技术领域广，各种框架和组件库层出不穷，而业务需求上有时纷繁复杂，观察一个程序员在面对未知问题时是如何处理的，这个过程相对于只出一些面试题来考面试者更能了解面试者实际解决问题的能力

而很多人会说我的项目不大，并没有什么难点，或者说并不算难点，只能说是一些坑，只要google一下就能解决，实在不行请教我同事，这些问题并没有困扰我很久。其实我也遇到过相同的情况，和面试官说如何通过搜索引擎解决这些坑的吧不太好，让面试官认为你只是一个API Caller，但是又没有什么值得一谈的项目难点

我的建议是，如果没有什么可以深聊的技术难点，不妨在日常开发过程中，试着封装几个常用的组件，同时尝试分析项目的性能瓶颈，寻找一些优化的方案，同样也能让面试官对你有一个整体的了解

在这篇文章中，我会分享在我目前公司的项目里，是如何在满足业务需求的基础上，让整个系统焕然一新的过程

技术栈是Vue + Element的单页面应用

起源

在我刚入职的那会，编码能力不怎么好，加上之前离职的前端技术栈是React，接手这个Vue项目的时候，代码高度的耦合，而那个时候因为能力有限，也只是在他的基础上继续开发，好在接手的时候开发进度也只是刚刚开始，因此在几个月后的某一天，我做了一个决定：准备把整个项目重写

得益于整个后台管理系统都是我独立开发的，项目的不足点我都深有体会，并且修改的时候能够更加的自由，恰好在那段时间看了花裤衩的vue-element-admin，我决定新开一个工程把之前的代码全部重写

项目结构

之前我有打算基于Webpack4自己写个脚手架用来打包文件，但是那段时间刚好Vue-cli3刚刚发布正式版并且也是基于Webpack4封装的，于是想了一下还决定使用新的Vue-cli3脚手架搭建，最后我将项目分为以下层级

├─api                                 //api接口├─assets                              //项目运行时使用到的图片和静态资源├─components                          //组件│  ├─BaseEllipsis                     //业务组件 (Base开头都是全局组件)│  ├─BasePagination                   //分页器组件   │  ├─BaseIcon                         //svg图标组件│  ├─BaseToggle                       //业务组件│  ├─BaseTable                        //表格组件│  ├─FormPanel                        //业务组件(Form开头是围绕表单相关的小组件)│  ├─TableOptions                     //业务组件(Table开头是围绕表格相关的小组件)│  ├─TheBreadcrumb                    //面包屑组件(The开头是每个页面组件只会引入一次的无状态组件)|  ├─TheSidebar                       //侧边栏组件│  ├─TransitionSildeDown              //业务组件(Transition开头是动画组件)│  └─index.js                         //全局组件自动注册的脚本│  ├─directives                          //自定义指令├─element                             //elementui├─errorLog                            //错误捕获├─filters                             //全局过滤器├─icons                               //svg图标存放文件夹├─interface                           //TypeScript接口├─mixins                              //局部混入├─router                              //vue-router│  ├─modules                      │  └─index.js           ├─store                                //vuex│  ├─modules                      │  └─index.js                      ├─style                                //全局样式/局部页面可复用的样式├─util                                //公共的模块(axios,cookie封装,工具函数)├─vendor                              //类库文件└─views                               //页面组件(所有给用户显示的页面)

一个良好的项目分层在业务迭代的时候能够快速找到对应的模块进行修改，而不是在茫茫的代码海中找到其中的某一行代码

性能优化

在我重写整个系统之前，每次打包都会花费好几分钟的时间，并且打包后的项目超过了17M

然而在我优化系统之后，打包后的体积只有2M，缩小了8倍

这里我从以下4个方面分享一下我在项目中是如何改善系统的性能，让系统"步履如飞"的

网络请求相关

构建相关

静态资源优化

编码相关

网络请求相关

这部分旨在实现需求的前提下尽量减少http请求的开销，或者减少响应时间

CDN

将第三方的类库放到CDN上，能够大幅度减少生产环境中的项目体积，另外CDN能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上

另外因为CDN和服务器的域名一般不是同一个，可以缓解同一域名并发http请求的数量限制,有效分流以及减少多余的cookie的发送（CDN上面的静态资源请求时不需要携带任何cookie）

通俗的来说就是使用CDN会一定程度上提升项目中的静态文件的传输速度，在vue-cli3中可以通过externals配置项，将第三方的类库的引用地址从本地指向你提供的CDN地址

externals只适用于ES Module的默认导入

这里通过环境变量来判断生产环境才启用CDN，除了需要开启CDN外，你还需要在index.html注入CDN的域名，所以我这里通过html-webpack-plugin根据cdn域名动态的注入script标签，同时需要在index.html中通过模版的语法