小帅の技术博客 小帅の技术博客
首页
  • 前端
  • 服务
  • Node
  • 技术
  • 服务器
  • 程序猿
关于
友链
  • 网站
  • 资源
  • Vue资源
  • 优秀技术文章
  • 分类
  • 标签
  • 归档
GitHub

前端小帅

学而不思则罔,思而不学则殆
首页
  • 前端
  • 服务
  • Node
  • 技术
  • 服务器
  • 程序猿
关于
友链
  • 网站
  • 资源
  • Vue资源
  • 优秀技术文章
  • 分类
  • 标签
  • 归档
GitHub
  • 前端

    • JavaScript

    • webpack

    • Vite

    • rollup

    • react

    • vue

      • vue3使用总结
      • vue编译为js的研究
        • 前言
        • 背景
        • 技术调研
          • SSG是也~
        • vue-loader 是什么
        • @vue/component-compiler 工作原理
        • 资料
    • monorepo

    • 性能爆表的solidjs
    • 项目开发的一些思考
    • 多级别权限设计思考及实战
    • 浏览器中JavaScript的运行机制
    • WebSocket连接过程及原理分析
  • NodeJs

  • 服务

  • 其他

  • 2021年终总结
  • 文章
  • 前端
  • vue
sunss
2022-12-07

vue编译为js的研究

# 前言

首先,思考下:

当我们在使用vue编写代码的时候,浏览器是如何识别的呢?进而联想到编辑器是如何识别的呢?更甚者我能可以思考其他各种类型的文件,平台是怎么识别的呢?

这些都是非常有趣的事情,其也必定存在着一种特定的内在运行逻辑,由此展开,发散思维,进一步了解编译原理相关的知识,对于我们探究这些问题都是极有帮助的。

本篇内容就先聚焦简单的一个点开始说起~

# 背景

我先说下项目背景:这是一个基于vue2开发的系统,目前有个报告管理模块,每条详情信息都包含各种列表、图表等,现在需要支持每条报告都支持下载导出为 html格式的一个文件,该html打开后的效果应该是和详情进去是一致的。

OK,问题来了,你打算如何实现?

  1. 只依靠前端实现
  2. 只依靠后端
  3. 前端提供 html + js 形式的模板给后端同学,由后端在后台使用Chrome内核渲染完成(后端注入数据)

1和2留给大家思考,我们公司按照以往经历采用的是方案3,本文先基于方案3进行探究。

抛开其他问题不谈,思考如何快速的把vue文件转换为 html与js,并且可以在浏览器中正常渲染(手写html+js不在讨论范围😀)。

# 技术调研

  1. Webpack+loader的方式:毕竟我们项目就是使用Webpack把vue编译成html、js的,可行性是有的
  2. @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 工作原理

# 资料

  • vue-component-compiler
  • 编译 Vue 单文件组件至 JS 文件
编辑
#vue
上次更新: 2022/12/07, 14:14:50
vue3使用总结
【前端组件化】系列第一篇

← vue3使用总结 【前端组件化】系列第一篇→

最近更新
01
【配置文件分析】——json、yaml、toml
09-06
02
【前端组件化】系列第二篇——monorepo方案实战
09-05
03
【前端组件化】系列第一篇——方案探究
08-18
更多文章>
sunss | © 2020.08-2022.12 浙ICP备2022002957号-1
载入天数... 载入时分秒...  |  总访问量 次
提供CDN加速/云存储服务
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式