vue编译为js的研究
# 前言
首先,思考下:
当我们在使用vue
编写代码的时候,浏览器是如何识别的呢?进而联想到编辑器是如何识别的呢?更甚者我能可以思考其他各种类型的文件,平台是怎么识别的呢?
这些都是非常有趣的事情,其也必定存在着一种特定的内在运行逻辑,由此展开,发散思维,进一步了解编译原理相关的知识,对于我们探究这些问题都是极有帮助的。
本篇内容就先聚焦简单的一个点开始说起~
# 背景
我先说下项目背景:这是一个基于vue2
开发的系统,目前有个报告管理模块,每条详情信息都包含各种列表、图表等,现在需要支持每条报告都支持下载导出为 html
格式的一个文件,该html
打开后的效果应该是和详情进去是一致的。
OK,问题来了,你打算如何实现?
- 只依靠前端实现
- 只依靠后端
- 前端提供
html
+js
形式的模板给后端同学,由后端在后台使用Chrome
内核渲染完成(后端注入数据)
1和2留给大家思考,我们公司按照以往经历采用的是方案3,本文先基于方案3进行探究。
抛开其他问题不谈,思考如何快速的把vue
文件转换为 html
与js
,并且可以在浏览器中正常渲染(手写html
+js
不在讨论范围😀)。
# 技术调研
Webpack
+loader
的方式:毕竟我们项目就是使用Webpack
把vue
编译成html
、js
的,可行性是有的@vue/component-compiler
库:官方库,把vue
编译为CommonJS
(现在替换为了@vue/compiler-sfc),不过,并不影响我们进行编译研究
基本思路应该就是这样,我们主要需要的数据的也是3个部分:template
、script
、style
在分离出这3部分内容之后,就是后面的组合引用了,以及对于代码中涉及到的异步请求部分要如何处理。
# SSG是也~
其实按照后端同学的思路,我提供的模板应该是从上到下按顺序执行的,所有的数据会在最开始由后端注入到我们约定的变量对象上,前端的所有渲染应该以这里的数据为主。
- 客户端渲染 BSR (
Broswer Side Render
):只在浏览器上执行,通过Vue 和 React 构建的单页面应用SPA 都是采用这种方式渲染 - 静态页面生成 SSG (
Static Site Generation
):动态内容静态化,构建时渲染为html,针对博客这种,每位用户访问的相同页面内容都是一致的,Vuepress、Nextjs等 - 服务端渲染 SSR (
Server Side Render
):请求之后,获取数据执行渲染,后端返回给前端的是注入数据之后的 html 字符串,返回给前端在浏览器完成渲染,可根据不同用户返回不同内容
我再一想,这不是和SSR、SSG很像吗,顺着这个思路有没有合适的方案呢
# vue-loader 是什么
# @vue/component-compiler 工作原理
# 资料
上次更新: 2023/04/26, 10:07:14