DevOps前端: 01-构建流程与产物规范
前端构建工具介绍 Webpack:适合对兼容性和功能有较高要求的项目,但配置复杂,构建速度相对较慢 Vite:极大提升开发效率,适合快速迭代和现代浏览器环境,生产构建采用 Rollup 作为底层 Rollupd:适合构建库和组件,注重产物体积和性能优化,不太适合大型应用的多入口场景 Turbopack:目前仍在发展中,适合关注未来技术的团队,可期望成为 Webpack 和 Vite 的性能升级替代 产物优化策略 代码分割和懒加载:代码分割就是把应用拆成多个块(chunk)。拆割后,页面滚动或用户操作可以触发模块异步加载 Tree Shaking:构建工具能分析哪些模块和函数被实际调用,并剔除未用代码,降低体积。 静态资源压缩:前端工程师使用工具对 JavaScript、CSS、HTML 进行体积缩减,多媒体资源还需进行压缩、格式转换等 代码混淆:和后端、移动端的做法类似,通常会重命名代码里的一些变量、函数,并改变代码结构,防止逆向和滥用 Sourcemap 生成:构建时开启即可,sourcemap 是一种映射文件,可以将压缩或混淆后的代码映射回原始代码,方便调试与监控 构建配置策略 环境变量与多环境构建 ...