前端面试题：工程化与构建工具
Webpack核心概念
- 模块打包机制：通过入口文件递归构建依赖图，将各种资源转换为浏览器可识别的模块
- Loader与Plugin区别：Loader用于转换特定类型文件，Plugin用于执行更广泛的自定义功能
- 热更新原理：通过WebSocket建立连接，文件变化时通知浏览器更新对应模块
Vite与Webpack对比
- 开发环境差异：Vite基于ES Module原生支持，无需打包，启动速度更快；Webpack需构建依赖图
- 生产环境：两者都采用Rollup打包，Vite利用预构建优化依赖，Webpack通过Tree Shaking优化
构建优化策略
- 代码分割：按路由、组件拆分，利用动态导入减少首屏加载体积
- 缓存策略：配置contenthash文件名，利用浏览器缓存减少重复请求
- 压缩优化：使用Terser压缩JS、CSSNano压缩CSS，配合Gzip进一步减小体积
工程化实践
- Monorepo架构：使用Lerna或pnpm管理多包项目，共享依赖和配置
- 自动化部署：结合CI/CD工具，实现代码检查、测试、构建、部署全流程自动化
- 质量保障：集成ESLint、Prettier、Husky等工具，确保代码质量和规范统一
