前后端分离技术架构模式演变

PHP与Vite能摩擦出啥样的爱情火花？

一、背景

前段日子公司里准备要重构一个拥有10年高龄的网站，当时听到这个消息心里无比激动，因为我现在就是这个网站的维护人员😂😂😂,在现代这个前端技术快速发展的年代很难想象我尽然还在写JQ+PHP模板🤣🤣🤣，这都不是最令我不爽的，最不爽的还是我改一段js代码，还要去后端项目去更改时间戳，才能保证他更新，这样换来的结果就是我要同时去更改两个项目，哪怕我只改了一点,css也是一样。

这个项目前端代码和后端代码是分开的,后端主要是PHP模板渲染html,前端使用的是sea.js模块化加载插件以及JQ

二、技术调研

由于是一个10年高龄的网站了，其中了业务逻辑盘根交错、代码分布错综复杂，想要一把梭哈的话我估计我就离失业不远了😂，只能说是一个页面一个页面慢慢重构然后上线观察，基于这种形势我采用了vue3+vite的技术方向，你要问我为啥不选webpack作为打包工具，我只能说当你开过法拉利跑车后你还会去开拖拉机吗？再者vite作为vue3的亲儿子肯定选他啊。

三、搭建基础框架

一开始本来是想直接按照vite文档上与后端集成的那种方式去加载js和css文件的但是，我TM突然想到前端资源和后端模板压根不在一个项目啊，咋办去拉着脸皮求后端帮我们去动态拉取打包号的manifest资源清单？

manifest.json是一个vite打包之后产出的文件资源清单里面记录了当前这个入口依赖了那些js和css，大致就是下面这个结构。

作为一个有理想和抱负的前端自己选的，在困难也要完成，随即我发动聪明的大脑瞬间一个想法诞生，如果我写一个加载器，根据入口文件名去manifest资源清单里面去寻找，入口当前依赖了那些文件并把它全部加载到页面上不就可以了？说干就干。

四、Vite加载器编写

首先我们先编写一个vite 的class类里面有一个use方法用来加载入口名对应的文件依赖,方法里面还要区分是否为dev环境，如果为dev环境就不需要加载资源清单了直接调用getAssetSource方法拿到文件路径去请求入口文件，入口文件里面的依赖会根据esModule的特性浏览器自动发送请求获取。

 class Vite{private static config: ViteConfig;private static manifestJson: ManifestJsonprivate static root: string = 'vite/src/'private static is_dev: boolean = window.location.origin.indexOf('dev') > -1;private static support_module: boolean = window.support_module;private static manifest_loading: boolean = false;static async use(src: string) {//開發環境if (this.is_dev) {src = this.getAssetSource(src, environment.dev);this.loadScript(src, 'module')this.loadScript(`${this.config.base}@vite/client`, 'module')return}//頁面多個vite.use時，防重複加載衝突if(this.manifest_loading){setTimeout(() => {this.use(src)}, 1000);return}//加載清單文件if (!this.manifestJson) {await this.getManifest()}//加載清單源文件let src_item = this.getAssetSource(src, environment.production);this.importCSS(src_item);return this.importSrc(src_item.file)}} 

现在让我们来看看getAssetSource方法做了啥

 //獲取manifest對應的源字段值stat