前端总结

# 简历素材

vue2 ->升级 vue3

resolve.fallback：确保 Webpack 5 能找到 path-browserify 作为 Node.js 的 path 模块替代。 自动导入插件 (AutoImportPlugin) 和 组件插件 (ComponentsPlugin)：自动按需导入 Vue、Vue Router、Vuex 及 Element Plus 组件。 SVG 图标：配置 svg-sprite-loader 以使用图标库，避免 SVG 文件重复打包。 CSS 预处理器：配置 Sass 和 Less，使全局变量和 mixins 可用。 生产环境优化：splitChunks 配置了库、Element Plus 组件、通用组件和 vendor 文件的拆分，提高加载效率。

基建相关 脚手架 私仓 组件库 cli Git Hook配置 性能优化 项目架构 di node cloufare 部署流程 node 图形学
专项 WebAssembly rec canvas黑板

推动了 。。。。。 落地了 ....

amplify 项目部署 搭建

了解 React htmlx svelte Million

service worker 离线缓存

workbox

workbox-webpack

react 18 中 采用了 million

cli RESTful API 调用quicktype 生成接口类型 类型声明 在全队fetch时候 responced type 就不需要人来管理了

css module

性能监控 用户回溯还原

rollup-sdk 性能监控工具 项目描述： 基于 Rollup 构建的前端性能监控 SDK，用于收集和分析网页性能指标。实现了 First Contentful Paint (FCP) 等核心性能指标的自动采集，为前端性能优化提供数据支持。

主要职责：

  1. 设计并实现了基于 PerformanceObserver API 的性能指标采集系统
  2. 使用 Rollup 搭建了支持 ESM/UMD/CommonJS 多格式的构建系统
  3. 基于 Changeset 实现了规范的版本管理和发布流程
  4. 开发了示例页面用于功能演示和测试验证

技术亮点：

  1. 模块化设计：采用 TypeScript 开发，实现了高度可扩展的插件化架构
  2. 构建优化：
    • 使用 Rollup 实现了 Tree-shaking，减小包体积
    • 支持多种模块格式（ESM/UMD/CommonJS），提升使用兼容性
  3. 工程化实践：
    • 集成 Changeset 进行版本管理
    • 使用 Monorepo 管理多包项目
    • 实现了完整的 CI/CD 发布流程
  4. 性能采集：
    • 支持采样率控制，降低性能消耗
    • 实现了性能数据的批量上报机制
    • 提供了可扩展的指标系统

项目成果：

  1. 成功发布到 npm，支持公共访问和安装使用
  2. 首次加载体积仅 xKB，对应用性能影响极小
  3. 提供了完善的示例和文档，降低了使用门槛

← 项目 Monorepo 项目 →