前端工程化需要知道的一些知识

前端的概念

前端开发的产出是直接面向用户的

软技能:用户体验(性能)

编程技能:

css:

综合实践能力、常见兼容hack

html:

遵循w3c规范的语义化结构

js:

硬技能:

数据结构、算法、抽象能力、架构能力、工程化思维

大前端(纵向、nodejs)、泛前端(横向\react native)

前端工程化的意义

一系列规范和流程及集合

一种可演化、可扩展的服务,服务的目标是解决前端开发及后端协作开发过程中的难点和痛点问题

工具是前端工程化的实现媒介、规范是工程化的指导方针,工作流程是工程化的外在表现形式以及约束规范的载体

编程规范、持续的架构设计 -> 质量、效率

内容

脚手架

初始化项目(即用即弃)yeoman

发开

本地服务器(nodejs + express + middleware)

HMR (runtime runtime server)

livereload

mock

SSR

webpack-dev-middleware

构建 webpack rollup gulp

打包

babel

loader

postCSS

less

sass

资源定位

CDN、反向注入html

模块依赖关系

缓存策略

强制缓存策略

协商缓存策略

fis

sprite 项目强绑定

测试

单元测试、集成测试、仿真环境

工作流

持续集成、持续交付

gitflow与版本管理

webhook与自动构建

部署

速度、协作、安全

自动化容器化部署、灰度发布、增量更新(保留多个版本,有利于回滚)

相关推荐
Hilaku1 分钟前
前端架构师的克制:什么时候该坚决对新技术说不?
前端·javascript·程序员
陈随易27 分钟前
前端项目部署只要30秒
前端·后端·程序员
本末倒置18328 分钟前
从 Vue CLI 迁移到 Rsbuild 后,JSX 突然全挂了?一次排查记录
前端
古夕29 分钟前
多应用同域部署下 Favicon 异常问题排查与治理
前端·javascript
YIAN31 分钟前
从零手写文件读取 MCP 服务:一文吃透 Model Context Protocol 全链路通信原理
前端·后端·mcp
Imchendiana31 分钟前
《狂人日记NO.9》— 前后端一把梭,我的全栈实录
前端·后端
逍遥运德38 分钟前
前端工程化-03:包管理NPM-package.json 和 package-lock.json 详解
前端·前端框架·前端工程化
逗逗豆巴吧43 分钟前
WPS 加载项中实现当前文档直接上传
前端·javascript·ecmascript 6
慢功夫43 分钟前
💡【调试】按下 F5 后,mini-vscode 到底做了什么
前端·visual studio code
妙码生花1 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(二十一):网络请求封装优化
前端·javascript·vue.js