前言
时隔多天我我也完成了第二阶段工程化建设的学习,经过这么多天的学习,我从一个对工程化一无所知的小白,到现在对工程化有了一些自己的想法。下面是我学完哲玄《大前端全栈实践》-前端工程化课程的一下分享。
前端工程化概述
- 前端工程化是指通过一系列工具和流程,将前端开发过程中的手动工作自动化,提高开发效率和质量。
- 工程化包括代码解析、依赖管理、模块打包、压缩优化等步骤,最终生成可在浏览器中运行的产物文件。
- 工程化的目标是使前端开发更加规范化、可维护和可扩展。
前端工程化的作用
- 前端工程化有助于提高开发效率,通过自动化工具减少手动操作,使开发者能够更专注于业务逻辑的实现。
- 工程化可以规范代码结构,避免重复劳动,提高代码的可维护性和可读性。
- 通过模块打包和压缩优化,可以减少文件体积,提高页面加载速度,提升用户体验。
前端工程化的基本模型
- 前端工程化的基本模型包括业务文件、解析引擎和产物文件。
- 业务文件包括view、js、css、less、sass、png等不同类型的文件,存放在不同的目录中。
- 解析引擎负责将业务文件解析成浏览器可识别的js、html和css文件。
- 产物文件是解析引擎生成的最终文件,存放在public目录下,可供koa等服务器渲染页面时使用。
解析引擎的工作流程
- 前端页面设计包括目录结构、组件库、工具库和入口文件。
- 目录结构应清晰明了,便于管理和维护。
- 组件库包含各种可复用的组件,提高开发效率。
- 工具库提供常用的工具函数和功能,简化开发过程。
- 入口文件是页面的主入口,依赖组件库和工具库。
webpack配置基类
总结
学习前端工程化虽然可以帮助我们实现前端开发的高效性和质量,但不应该盲目的使用现有的工程化方案, 而是应该了解工程化的本质。这里的 webpack 只是让我们要掌握整体思路,工作流程和思考性能优化方案,然后针对业务进行项目的工程化配置,均衡业务和开发需要。
如果你也想学习各种前端相关知识可以进入我们的知识星球。