这题我居然会，三年前主导过 Bootstrap + Jquery 转 Vue，也是在 PHP 端输出 HTML 。
首先是后端先把页面结构拆了，留一个页面主要结构，比如下面的：
```html
<body>
<div class="g-container"><?= $content ?></div>
// 其他公用 js 逻辑，比如加载 vue 文件
</body>
```
接下来主要是靠框架的 View 层去填充这个$content 。
比如一个文章列表页，可能是下面这样的一个 php 文件，里面内容是下面的
···php
<header-component></header-component>
<article-list-nav></article-list-nav>
<article-list-item></article-list-item>
<script>
// 先实例化 g-container 作为 vue 容器
// 接着并发加载各类组件
requirejs(["vue", "article-list-nav.js"，"article-list-item.js"], function (...) {// 组件加载完后的逻辑}
</script>
```
关键的来了，这里的组件标签主要用了 Vue 的动态模板，通过 requirejs 来并发动态获取 html 来填充的，每一个标签都对应着一小块 html 文件，这个小块的 html 里面还会插入 css 和自己的业务 js 。
为了极致性能，每个静态资源（ html 、js 、css 、图片等）都打包压缩了（文件名带版本号），包括你看到上面 requirejs 里那个数组，在打包的时候会插版本号进去，变成 article-list-nav-04a3838d2a.js 这样，Nginx 开了最大过期时间，打包完的所有资源放一个 json 里，这个 json 也是带版本号缓存的，而这个版本号是在发布构建的时候通过变量替换的。
做到了这些之后，每个组件都是自己独立的缓存，极致的本地缓存以及 http2 的多路复用，页面加载快得飞起。
同时这些事情做完了，在开发的时候每个 view 文件只需要输出上面的那种结构就好了，剩下都是安心写接口，前端自己的静态页面也是这样的，已经充分解耦了。
热更新其实是个伪命题，你直接做流量切换就好了。