an blog

常见造火箭面试题

Vue源码
AST抽象语法树
Babe作用与原理
Vue完整版和运行时runtime版本的区别？

运行时版不包含模版编译器 Vue在模版编译环节具体做了什么

手写匹配有效括号算法--AST
设计C端polifill方案--babel，preset env usebuild ten设计背景

锻炼架构能力最好的办法，也是大部分开发无法接触到的办法是从0搭建一个好的项目

打造应用基础建设
制定应用过程化方案
实现应用构建和发布流程
设计公共方法和底层架构
Vue完整版和运行时版区别
- vue runtimejs运行时版本不包含模版编译器，才能说清vue在编译环节具体做了什么
手写匹配有效括号算法
- leetcode上easy难度编译原理算法题
- AST
设计C端polyfill方案
- babel，preset

从0到1打造项目基础建设

指定项目的工程化方案
构建和发布流程
设计公共方法和底层架构

前端工程化管理工具
- npm和yarn
- webpack和vite
前端开发生态圈
- webpack
- babel
常用库核心代码设计
- axios
- koa
架构实战搭建
利用nodejs
- 网关、代理

小技巧自定义npm init

npm init本质就是调用shell脚本输出一个package.json文件

create vue脚手架的npm init还是依赖了npm的指令,被npm识别成 npx createxxxx,这里的自定义npm init是让npm指令执行我们定义的内容(shell)

bash

npm config set init-module ~\xxxx.js

该js自己编写问答来初始化package.json

本地调试包

一般是开发依赖包的人自己写个demo测试一下但是更希望直接在别人的业务包里测试，但是不能直接发布测试包也不想让人来手动复制包到业务代码里挑事

就可以用npm link TODO: 没懂是指把项目中的依赖指向全局依赖？然后再取消指向这不还是要发布测试包吗

npx使用eslint

npx eslint --init npx eslint xxx.js

npm自动识别用什么源给项目npm添加脚本 npm run preinstall

preinstall: "node ./bin/preinstall.js"

在执行npm i之前先执行npm run preinstall

npm3的时候不是彻底的扁平化，当有子级包时，且后续迭代更新依赖开始什混乱，可以使用npm dedupe

pnpm

yarn

CI环境 npm ci 替换 npm i

打包工具的几大考量点

代码分割：导出公共代码，避免重复打包，运行时有合理的按需加载(不同模块的上下文分开，单入口多入口都支持重复模块的打包，依赖的值变化，所有引用方都变)
打包后资源的hash：最大化的利用缓存，文件不变的话hash不变
- 区分webpack的hash、chunkhash、contenthash
依赖收集兼容代码编写的模块化方式：Commonjs、esm支持
输出资源的模块化方式：可配置esm、commonjs
非js资源打包：html、css、图片、视频
编译：压缩、treeshacking

tooling.report官方平台打包工具打分

tooling.report怎么实现打分的？

vite

webpack的不足以下是vite dev时的编译情况

// 浏览器最终执行的js
import { createApp } from '/@modules/vue.js'
import index from '/src/index.vue'
import '/src/index.css?import'

// 开发过程的js
import { createApp } from 'vue.js'
import index from './index.vue'
import './index.css'

由上看出，虽然浏览器直接支持模块化，但是第三方资源还是需要打包工具处理，只处理路径，dev阶段不打包第三方资源，由浏览器识别到是/@modules路径时读取node_module中的资源

moduleRewritePlugin来改写路径输出

koa中间件获取请求资源的内容(用koa干嘛？起本地服务？，类似webpack的dev-server) es-module-lexer解析收集资源AST,拿到import的内容判断是第三方资源则处理拼接公共代码路径 /@modules/xxx 判断到相对路径处理成 /src/xx

dev打包后的vue文件跟开发过程的vue文件大不一样 vite dev的时候，serverPluginVue 通过parseSFC方法解析单文件组件？通过compileSFCMain方法将template、js、css拆分

dev阶段，浏览器访问的资源是koa服务器的资源，koa在访问服务器资源时才如上编译，实现按需编译。 vite server = webpack dev-server koa基本都依赖中间件实现，拦截资源请求

处理依赖，改写路径(第三方资源、相对路径)
按需编译.ts .vue
预编译：sass、lass
开启socket连接，实现HMR(在首次加载html模版时注入/vite/client文件注册监听web socket)

vite build打包则基本使用rollup

core.js

垫片 polyfill

nodejs

BFF、SSR、G...QL

现代前端工程

SSR同构技术、心智负担最小化？、虚拟DOM

状态仓库管理职责单一 minimal necessary为目标

CSR、SSR切换

前端渲染架构

- 浏览器端渲染（普遍）

- 前端服务器send html给浏览器，浏览器down jsh和请求数据来渲染页面

- 实现了前后端分离

- 优化了跳转的不需要重复加载的性能，缺点首屏加载慢

- 服务器端渲染（同构技术

- 服务端加载好html和js，或是把数据也处理好，返回给浏览器直接渲染页面

- 优化了首屏加载，缺点需要考虑把服务端处理的东西同构给前端初始化项目才能接手后续交互

- Native端渲染

- Native渲染生成html后缓存下来

- 边缘渲染：边缘计算（CDN）

SSR的 hydration 注水

脱水：SSR服务端请求数据(存入store)并带在html上(script标签里window全局变量)，给浏览器端

注水：从html上的全局变量取数据

流式SSR

服务端向浏览器通过sream发送html（原本是字符串

渐进式SSR

hydration 部分注水完成就渲染，不需要等所有hydration 注水完成才渲染

本地调试包 ​

pnpm ​

yarn ​

vite ​

core.js ​

本地调试包

pnpm

yarn

vite

core.js