一、基础

Vue2/3、React

JS深入理解、Typescript（tsc），初级工程化，必须的工具链 postcss sass

框架原理

js ---> 面向对象(es5) ---> es6 angular1 ---> webpack4 rollup 摇树优化--->hooks

二、进阶

工程化

模块化 commonjs / es module

包管理器 npm pnpm yarn

打包工具 webpack vite

工具链

postcss sass、less tailwind windi

eslint prettier husky

babel

网络

运维

linux

云服务器

nginx

docker

框架源码

站在巨人的肩膀上

vue设计

学习源码的目的：并不是敲一遍代码，而是学习思想

全栈

java

next.js

三、细节

1、打包工具和脚手架

webpack

初级：会用就行，知道大概如何配置，区分webpack core是干嘛的，css，图片又是如何处理的

中级：自己通过webpack完整的配置项目工程，loader，plugin

中高级：webpack优化，自己写webpack的插件，基本的webpack的一些实现原理

高级：webpack的一些基础底层实现，可以解决公司任何的打包配置和问题

Vue-cli:官网看一遍，webpack-merge webpack-chain

Create-react-app: npm run eject, react-app-rewired, customize-cra

nextjs

vite: 无论创建vue还是react

中级：官网拉通走一遍，可以做一些优化

中高级：vite插件的编写。esbuild，rollup(rust化，绣化)

高级：vite的一些基本底层实现，搞定公司所有打包相关问题

包管理器

npm pnpm

了解多包仓库 monorepo

3、状态管理

useReducer、useContext

事件总线、mixin、注入

Vue3/react18 hooks

React rudx toolkit Zustand recoil mobx

Vuex pinia

4、数据获取

axios、fetch

5、CSS样式

sass、工具优先tailwind

6、UI库

四、其他

1、业务场景

权限控制 路由页面控制，按钮的控制

文件上传 大文件上传，断点续传...

大批数据处理

虚拟列表

中间层分层

web workers

web socket

2、前端监控

web vitial ---- 中位数分数

用户数据和实验室数据

数据埋点，其实就是在客户端埋入代码，上传有用的信息

3、微前端

iframe 通信困难，隔离很好

渲染、隔离(沙盒)、通信

还涉及到不同的打包工具的问题webpack vite

MicroApp 无界 --- iframe

qiankun

五、AI

2024年的程序员，必须拥抱AI

六、动画

gsap

七、可视化

小赛道，大概念

Echart，D3....

前端GIS

Leaflet, Mapbox

八、鸿蒙

先等一等

鸿蒙是另外一个概念，它解决的不是手机场景，而是全智能场景

车载。智能家居....

不要把找工作想的那么的技术化

找工作可以很简单，也很难。就是对方喜欢你