26｜页面编译和运行：如何设计Vue.js搭建页面的渲染策略？
杨文坚
你好，我是杨文坚。
上节课，我们学习了如何实现“页面搭建”功能，实现流程可以分成两个关键点，“布局设计”和“填充物料”。有了“页面搭建”功能，我们可以通过可视化操作界面，生成完整的页面数据，这个数据，我们约定称为“页面布局数据”。
根据页面功能维度的五大功能模块，“页面搭建”“页面编译和运行”“页面发布流程”“页面版本管理”和“页面渲染方式”，有了页面布局数据，接下来，我们要做的就是基于页面布局数据，进行“页面编译和运行”。
到这里，你可能有疑问，为什么不能像页面搭建功能那样，直接通过 AMD 模块或者 ESM 模块方式，进行组装渲染运行呢？为什么还要进行页面编译?
为什么要进行页面编译
回忆一下我们之前做过的编译操作。在“物料组件产物管理”中，我们把物料的 Vue.js 组件，编译成了多种 JavaScript 模块格式；上节课“页面搭建”，我们在搭建页面的时候，基于组件的一种或多种模块格式，进行搭建页面的可视化操作渲染。
在页面搭建过程中，每个物料都是独立加载对应物料组件的 JavaScript 文件，同时，也加载物料组件的 CSS 文件进行渲染。所以，每个物料组件渲染的时候，就需要两个 HTTP 请求，来请求物料 JavaScript 和 CSS 的静态资源。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了Vue.js页面渲染技术的设计策略，重点围绕页面编译和运行展开讨论。首先强调了减少HTTP请求、提升用户体验的重要性，解释了页面编译的必要性。详细探讨了动态编译的实现方式，包括使用ESTree描述代码片段和通过Babel工具实现代码转化。文章还指出选择Vite作为动态编译构建工具是最方便的。在页面运行方面，介绍了如何设计渲染策略，权衡了用户体验和页面稳定性，提出了优先使用编译后的Bundle文件渲染页面，并在出现异常时降级成部分模块渲染的策略。总的来说，本文提供了全面的技术视角和解决方案，对于想要深入了解Vue.js页面渲染技术的读者来说，是一篇值得阅读的文章。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(4)
- 最新
- 精选
庄周梦蝶有没有demo源码，能跑出效果的源码作者回复: 您好，第26讲的源码在这里 https://github.com/FE-star/vue3-course/tree/main/chapter/26
2023-03-07归属地：浙江- 庄周梦蝶有点不太懂
作者回复: 您好，本课程有源码的，第26讲的源码在这里 https://github.com/FE-star/vue3-course/tree/main/chapter/26
2023-03-07归属地：浙江2 
戡玉这个低码雏形很棒，老师的代码真是不错，质量过硬，能学到东西！2023-09-14归属地：湖南
Akili老师，请教一个问题，如果不是这种为运营搭建的物料系统，而是独立的vue项目，改如何做版本管理啊。2023-07-10归属地：日本
收起评论