1、你熟悉webpack、vite等构建工具,并负责维护微前端基座项目和前端项目脚手架。请说明:
1.Webpack和Vite的核心区别是什么?为什么Vite在开发环境下更快?
2.你是如何通过构建工具优化项目性能的?具体做了哪些配置优化?
3.微前端架构是如何实现的?基座项目的职责是什么?
可拓展深入问题
构建工具原理
- Webpack的打包流程是什么?Loader和Plugin的区别?
- Vite为什么开发环境不需要打包?ESM模块加载机制是什么?
- Tree-shaking的原理是什么?如何确保Tree-shaking生效?
- Code Splitting的策略有哪些?如何实现按需加载?
2、你负责对业务公共组件库进行系统性重构,提取了10+个高复用性业务组件,使开发效率提升约30%。请说明:
1.组件库的设计原则和架构思路是什么?
2.如何保证组件的可复用性和可维护性?
3.组件库的文档、测试、版本管理是如何做的?
可拓展深入问题
1.组件设计原则
- 如何设计一个高复用性的组件?单一职责原则在组件设计中如何应用?
- 组件的API设计原则是什么?如何平衡灵活性和易用性?
- 如何实现组件的主题定制?CSS变量、Theme Provider等方案的优劣?
- 组件库的TypeScript类型定义是如何设计的?如何保证类型安全?
3、假如让你负责一个商城系统的开发,现在需要统计商品的点击量,你有什么样设计与实现的思路?
4、如何做一个前端项目工程的自动化部署,有哪些规范和流程设计
5、怎么处理微信小程序里的静默授权异步问题?
在微信小程序中,静默授权(wx.1ogin )是异步的。假设我们系统是通过微信静默授权,拿到用户的openid 作为唯一标志。 我们在页面 onLoad 里需要等授权完成,拿到openid才能继续后续接口调用。由于静默授权的异步性,我们怎么能保证,在全局能够知调用wx.1ogin一次,而不会每个页面都去重复调用wx.login ?
6、canvas 性能为何会比 html/css 好?
7、js动画与css动画区别及相应实现
8、跨端地图组件统一架构
为 H5、微信小程序、React Native三端设计一套统一地图组件架构,支持高德/百度两套SDK,目标:0~1代码重复率显著降低、业务接口统一、在任一端新增地图能力耗时≤1天 业务层→抽象地图接口层(统一API)→SDK适配层(Adapter) →原生/第三方SDK 坐标系转换接口(toWGS84/fromWGS84)、统一事件模型(tap/drag/poi),以及统一图层/要素 CRUD (addMarker/updateFeature/removeFeature)坐标误差累积、事件语义不一致、SDK版本裂变造成破坏性变更
9、微前端整合方案
将三个独立 Vue3应用整合为可独立部署、样式隔离且可共享状态的平台,要求:子应用可热插拔且主应用体积最小化,说明选型与实现步骤
10、内存泄漏排查
九号运营平台长驻运行7天后内存占用翻倍,描述你会如何定位根因并给出长期防漏体系设计(自动化检测+监控)