- 综合排序
- 最热优先
- 最新优先
- 来自专栏Vue开发社区
从 0 搭建 Vite 3 + Vue 3 前端工程化项目
前言 Vue 3 正式版已经发布有一段时间了，随着 Vite 脚手架注定成为下一代前端工具链，许多用户都想基于 Vite 来构建 Vue 项目，如果想基于 Vite 构建 Vue 3 项目，社区模板完全满足您的需求 TypeScript 语言的用户不是很友好，因此接下来从 0 开始手把手带大家搭建一套规范的 Vite 3 + Vue 3 + JavaScript 前端工程化项目环境。 + Vue3 + Vue Router + Pinia + Axios + Less 的前端项目开发环境搭建完毕。 通过此链接 ElanYoung.github.io/vite-vue-js…[66] 即可访问本项目 文章总结 本文从技术选项到架构搭建、从代码规范约束到提交信息规范约束，一步一步带领大家如何从一个最简单的前端项目骨架到规范的前端工程化环境 ，基本涵盖前端项目开发的整个流程，特别适合刚接触前端工程化的同学学习。
4.6K10编辑于 2023-02-27 - 来自专栏学习/读书笔记
《前端工程化》-- 1. 前端工程简史
前端工程师不仅要求熟练地使用基本的开发技能，还必须具备性能优化的意识和技能。 3）扩展技能：Node.js 并非指的是Node.js本身，而是以Node.js为代表的Web服务器端知识。 前后端分离策略是制定前端工程化解决方案的指导方针之一；前端工程化的最终目的之一便是实现更合理、更便利的前后端分离开发环境。 前端渲染的优点： 1）前端掌控路由，与传统的服务器端路由相比用户体验更佳； 2）可移植、可离线使用； 3）服务器端提供的是干净的数据接口，具备高度的可复用性； 4）HTML资源作为静态资源，易于部署； 不论前端工程化的功能如何完备，规范如何严谨，需要谨记的是，前端工程化必须是整个Web工作流中间的一个子集方案。前端工程化最终的完美形态，必然与整体工作流结合，作为持续集成方案中的一环。 1.5 工程化方案架构 目前市场上流行的前端工具大体分为3类： 1）工作流管理工具：比如Grunt、Gulp； 2）构建工具：比如webpack、rollup； 3）整体解决方案：比如FIS、WeFlow
1.4K10编辑于 2022-04-07 - 来自专栏闲花手札
前端工程化
小白眼中的前端开发 vs 实际的前端开发 小白眼中的前端开发 会写 HTML + CSS + JavaScript 就会前端开发 需要美化页面样式，就拽一个 bootstrap 过来 需要操作 DOM UI 结构、样式、行为） 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理） 自动化（自动化构建、自动部署、自动化测试） 什么是前端工程化 前端工程化指的是：在 企业级的前端项目开发 中，把前端开发所需的 工具、技术、流程、经验等进行规范化、 标准化 企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的。 好处：前端开发自成体系，有一套标准的开发方案和流程。 前端工程化的解决方案 早期的前端工程化解决方案 grunt（ https://www.gruntjs.net/ ） gulp（ https://www.gulpjs.com.cn/ ） 目前主流的前端工程化解决方案
46520发布于 2021-08-24 - 来自专栏用户2442861的专栏
前端工程——基础篇
前端工程的三个阶段 现在的前端开发倒也并非一无所有，回顾一下曾经经历过或听闻过的项目，为了提升其前端开发效率和运行性能，前端团队的工程建设大致会经历三个阶段： 第一阶段：库/框架选型 ? Wei博士在当年的交流会上提到过一些关于Facebook的一些产品数据： Facebook整站有10000+个静态资源； 每个静态资源都有可能被翻译成超过100种语言版本； 每种资源又会针对浏览器生成3种不同的版本 ； 要针对不同带宽的用户做5种不同的打包方法； 有3、4个不同的用户组，用于小批次体验新的产品功能； 还要考虑不同的送达方法，可以直接送达，或者通过iframe的方式提升资源并行加载的速度； 静态资源的压缩和非压缩状态可切换 支撑这么大规模前端项目运行的底层架构正是魏博士在那次演讲中分享的Static Resource Management System(静态资源管理系统)，用以解决Facebook项目中有关前端工程的3D 相关文章：(注: 以下文章还在占坑中, 作者还未完成) 前端工程——工具篇 前端工程——框架篇 前端工程——架构篇 前端工程——流程篇 前端工程——监控篇 前端工程——测试篇
85820发布于 2018-09-19 - 来自专栏马涛涛的专栏
前端工程化
工程化 所谓前段工程自动化就是：由于前端分裂，有人写css代码，有人写scss，有人写es5，有人写es6，那么就需要翻译工具（命令行工具）翻译成ie或其他所有浏览器能运行的代码版本。 ? 工程化中自动化的过程 例如我们有这样的工程目录。 ? 那么我们需要开一个sass监听scss文件的修改，并转换为css，然后放到dist里。 所谓前段工程自动化就是：由于前端分裂，有人写css代码，有人写scss，有人写es5，有人写es6，那么就需要翻译工具（命令行工具）翻译成ie或其他所有浏览器能运行的代码版本。 于是前端从nodejs出现之后，开始用一个工具代替这些自动化工具，最开始是Grunt（已过时），然后是Gulp，现在开始被webpack替代，所以这就是我们为什么要学习webpack！ 3、在”.gitignore” 文件里输入你要忽略的文件夹及其文件就可以了。
1.5K30发布于 2018-10-31 - 来自专栏学习/读书笔记
《前端工程化》-- 2. 脚手架3. 构建
前端工程体系涵盖功能广泛、封装方案类型众多，对应的配置项也非常复杂。大多数前端工程方案和相关工具的开发者并不负责一线业务开发。 前端工程体系不是Vue、React这种业务开发框架，工程体系是一种“服务”，是辅助性质的，其服务的主要对象就是一线的业务开发人员。 2.2.2 局限于本地的执行环境 前端工程化的3个阶段：本地工具链、云管理平台和持续集成。三者最明显的外在差异在于，对各个功能模块执行环境的划分。 整体流程如图： 3. 构建 3.1 构建功能解决的问题 构建，或者叫作编译，在前端工程体系中的角色是将源代码转化为宿主浏览器可执行的代码，其核心是资源的管理。 3.4.2 模块化与工程化 模块化是属于架构层面的概念，前端工程化与模块化的关系类似于组装车间与零件。
1.6K20编辑于 2022-04-07 - 来自专栏全栈
前端工程化（一）---工程目录搭建
由于一直在搞后端开发，对于前端内容的掌握一直停留在css、jquery、js、html这类的基础应用上。 一下子接触到前端工程化、spa这类的东西，曲线有些陡峭，整个过程经历了诸多曲折。 一些知识点 1、前端工程化 记得在刚刚进入软件行业的时候，项目组中一般都会有美工这个角色，负责设计系统需要的各种图片、切图，设计系统整体的样式。 前端的所有工作围绕着切图、调样式开展 现在的前端趋势是什么？ JavaScript 应用程序的静态模块打包器(module bundler) 在我自己的项目场景中，webpack就是将es6、less、vue、图片、字体这些资源通通都打包为浏览器能够解析的js、css代码 3、 node.js 进入 https://nodejs.org/en/download/ 根据自己电脑的系统不同，下载对应的安装文件，进行安装 2、由于npm下载资源很慢，因此推荐使用阿里的 cnpm来取代npm 3、
76431发布于 2018-06-28 - 来自专栏希里安
前端工程化浅谈
但现在的前端开发，早就进入了工程化开发的时代，已经存在有各种现代化的框架，编译工具以及预处理器等等。 下面就传统和工程化的前端开发优劣介绍下： 传统开发： 没有采用工程化工具和流程的情况下进行开发，通常需要开发者手动管理文件、依赖和构建过程。 2、维护难，没有统一的代码风格，团队协作难 3、难扩展，缺少模块化和组件化 工程化： 优势就是传统化所存在的问题的解决 1、组件化，效率高 2、代码质量提升 3、自动化工具和流程 4、按需导入导出 等等 劣势： 1、入门稍慢 2、灵活性不如传统开发 3、复杂度较高 这只是简单的介绍，其实有更多的知识点在这里面，更多的是因为工程化开发是现代前端开发的必备项了。 为什么说要掌握主流框架是必备，因为前端框架就是前端工程化开发中不可或缺的一部分。框架肯定是利用了现有行业中优势技术，也能避免大家不断重复造轮子，降低上手难度，提升开发效率。
51830编辑于 2023-10-30 - 来自专栏Web前后端、全栈出发
前端工程模块化
模块化的概念 为什么需要模块化技术： 随着 Web 技术的发展，各种交互以及新技术等使网页变得越来越丰富，前端工程师登上了舞台 同时也使得我们前端的代码量急速上涨、复杂性在逐步增高，越来越多的业务逻辑和交互都放在 //导入uniq第三方包:包下载之后和内置模块一样直接导入; const uniq = require('uniq'); //使用uniq第三方包:快速实现数组去重; let arr = [1,2,3,3,4,4,5,6,5,7,8,8 /module02.js"; import * as m3 from ". /module03.js"; console.log(defaultobj2.sayName()); </script> 前端工程化： ESM 项目结构： ，上述了解了ESM 模块化的使用： 而对于一个项目所需要的模块非常多 --> ESM 引入NPM包： Demo： 使用 NPM 安装 Jquery包，并使用Jquery修改页面背景颜色； resource/JS/mapp.js： 麻烦：前端工程化之后，代码更新也需要随之进行更新
58310编辑于 2024-08-06 - 来自专栏性能与架构
向bootstrap学习前端工程
bootstrap是目前最流行的前端开发框架，提供了丰富的前端组件，对于经验丰富的高手来说，其中的每项功能可能并不是太复杂，但由于他功能丰富，已经是一套系统，所以整体开发和组织的过程就不简单了 如果你来负责开发 有时间可以思考下，可以锻炼自己全局思维 通过bootstrap的源码，大概看下bootstrap的工程化开发方式 需求 （1）开发 主要使用css和js开发，js本身就是编程语言，开发环境也很成熟 css 编写的话效率不高，所以使用css的预处理语言进行开发，bootstrap选择的是less （2）测试 作为一个产品，质量肯定是非常关键的，就需要做全面的测试，例如代码检查、单元测试、不同浏览器下的测试 （3）
72770发布于 2018-04-02 - 来自专栏编程技术分享
前端工程化建设
随着浏览器和前端技术的发展，现在的前端项目越来越大、业务也越来越复杂，前端工程化已经成为一件势在必行的事情。 前端工程化其实就是软件工程在前端方向上的实施，不过篇幅有限，本文只讲解其中的几个点。 团队规范 如果前端团队只有一两个人，规范的作用微乎其微；但团队人数超过一定数量时，规范的作用就显现出来了。 百度前端代码规范 Airbnb 翻译版 如何编写高质量代码 UI 规范 UI 规范需要前端、UI、产品沟通，互相商量，最后制定下来，建议使用统一的 UI 组件库。 推荐阅读： 高性能网站建设指南 高性能网站建设进阶指南 Web性能权威指南 测试 测试是前端工程化建设必不可少的一部分，它的作用就是找出 bug，越早发现 bug，所需要付出的成本就越低。 监控是前端工程化建设中的最后一环，当项目上线后，通过监控系统可以了解到项目在生产环境中的运行情况，开发团队可以根据监控报告对项目做进一步的调整和优化。
97720发布于 2020-09-28 - 来自专栏Web前后端、全栈出发
前端工程模块化
前端工程\模块化本篇文章，学习记录于：尚硅谷，紧接前文：邂逅Node.JS的那一夜→博客 无论是前端、后端、甚至非编程领域都有模块化的概念，只是不同的领域叫法不同，不过，新技术的产生一定是有原因的：模块化的概念为什么需要模块化技术 ： 随着 Web 技术的发展，各种交互以及新技术等使网页变得越来越丰富，前端工程师登上了舞台同时也使得我们前端的代码量急速上涨、复杂性在逐步增高，越来越多的业务逻辑和交互都放在 Web 层实现代码一多， /module02.js"; import * as m3 from ". /module03.js"; console.log(defaultobj2.sayName());</script>前端工程化：ESM 项目结构：，上述了解了ESM 模块化的使用： 而对于一个项目所需要的模块非常多 -->ESM 引入NPM包：Demo： 使用 NPM 安装 Jquery包，并使用Jquery修改页面背景颜色；resource/JS/mapp.js： 麻烦：前端工程化之后，代码更新也需要随之进行更新
62410编辑于 2024-08-01 - 来自专栏code秘密花园
谈前端工程化
开篇语：抖音前端团队通过几年的实践，积累了一些前端研发中的经验与理念，计划通过比较轻松、简洁的语言记录下来分享给大家，希望对大家有帮助，有理解不妥的不吝赐教。 作为前端架构的一部分，工程化是个永恒的话题，我们之所以老生常谈这个事情，核心原因在于浏览器这个环境所支持的三种语言没有在语言层面提供统一的模块化支持，这使得大家都在考虑如何添加这些模块特性，更好的支持好开发 它们包含了 HTML、CSS、JS，我们通过工程化的手段来达到组件的工程化支持。现在的浏览器已经逐步支持 Web Component 来逐步磨平这些个不足。 所以我们的工程化体系里面有了打包(package)这个名词，这个名词几乎是我们工程化体系中无法抹去的一个话题，也同样是性能优化体系里面一个非常重要的手段。 同样在前端的组件化体系中也同样有这样的问题。 解决依赖是个非常麻烦的事情，一般我们会在构建编译的阶段去搞定这个事情，如果静态编译想搞定这个事情需要有一套可识别的标志。
63420发布于 2021-10-19 - 来自专栏前端架构与工程
前端工程化-构建
简单说，构建就是把前端工程师开发的源代码进行编译、压缩、打包等一系列操作，最终产出可以直接上线或者可供后端工程师的资源。 构建可以划分为纯前端构建和前后端协作构建。 所谓纯前端构建，就是说不涉及后端模板的构建，经过构建之后的前端代码可以直接上线。 我们在浅析前端工程化一文中提到的便是前后端协作的构建模式，也是本文将要讨论的方向。 下面我们细化资源管理的每个关键点，共同探讨一下前端工程中构建环节的工作内容和面临的问题。 1. 3. 依赖管理 依赖管理之所以方案不唯一是因为每个项目可能会采用不同的客户端模块加载方案（AMD/CMD/CommonJS）。构建平台本身不应该面向某一种方案，而应该是可配置的。 模板交由后端构建的优点是可以对每种模板引擎有针对性的处理，而且是很工程化的构建方式；缺点是需要额外书写寻址function，但是这个缺点相对于优点来说微不足道。
1.4K60发布于 2018-01-30 - 来自专栏TagBug
前端工程化 - 笔记
主要是前端工程化理论 # 前端工程化理论 ---- # 定义 前端工程化 = 软件工程 + 前端 是⼀种通过规范化、模块化、⾃动化等⼿段，提⾼前端项⽬在研发、运维阶段的效率、质量。
37020编辑于 2023-03-16 - 来自专栏前端架构与工程
浅析前端工程化
什么是前端工程化 自有前端工程师这个称谓以来，前端的发展可谓是日新月异。相比较已经非常成熟的其他领域，前端虽是后起之秀，但其野蛮生长是其他领域不能比的。 虽然前端技术飞快发展，但是前端整体的工程生态并没有同步跟进。 笔者收集了一些资料可供参考： Web应用的组件化开发； 前端组件化开发实践; 大规模的前端组件化与模块化。 3. 本文论述的前端工程体系没有涉及Node.js这一层面，当一个团队步入大前端时代，前端的定义已经不仅仅是“前端”了，我想Web工程师这个称号更合适一些。 参考资料 前端工程-基础篇; 前端开发体系建设日记; 前端工程与性能优化; 如何高效地管理网站静态资源;
1.4K91发布于 2018-01-30 - 来自专栏服务器运维笔记
工程化(3)：现代前端应用应如何配置 HTTP 缓存机制
「前端工程化」系列正在更新: 3/36 ---- 关于 http 缓存配置的最佳实践为以下两条： 文件路径中带有 hash 值：一年的强缓存。 前端将会发起一个新的 URL 的请求。配置响应头 Cache-Control: public,max-age=31536000,immutable 文件路径中不带有 hash 值：协商缓存。
69230发布于 2021-09-28 - 来自专栏地方网络工作室的专栏
什么是前端工程师？前端工程师需要掌握什么技能？
什么是前端工程师？前端工程师需要掌握什么技能？ 前言 前端工程师是一个出现了10年左右，而颇受重视则是最近这五六年的事情。受到重视到前端从业人员井喷，也就是这一两年而已。 大量的公司需要前端工程师的加盟，因此大量后端工程师开始转向前端。 在这混沌乱世，我不禁要问，到底什么是前端工程师？到底掌握什么技能才能称之为前端工程师？ 什么是前端工程师？ 现在的前端工程涉及的面实在是太多了。 后前端工程师 什么是后前端工程师？上面的前前端工程师其实就是原来的前端工程师，而这两年炒得火热的前端工程师实际上是把原来属于后端工程师的活儿给抢过来了。所以我把它命名为后前端工程师。 当然，在大部分公司，是不会把前端工程师分成前前端工程师和后前端工程师的，所以，页面制作的工作也需要由你来实现。 这才使真正的前端工程师。
97810编辑于 2022-05-05 - 来自专栏前端皮小蛋
AST 与前端工程化实战AST 与前端工程化实战
本文将通过 AST 与前端工程化的实战向大家展示 AST 的强大以及重要性。 直播分享视频地址：AST 与前端工程化实战 一、初识 AST 1、demo-1 第一次看见 AST 这个概念的时候还是在《你不知道的 JavaScript》一书中看到的。 三、前端工程化 现在，咱来聊聊前端工程化。 前段工程化可以分成四个块来说，分别为 模块化：将一个文件拆分成多个相互依赖的文件，最后进行统一的打包和加载，这样能够很好的保证高效的多人协作。 而这些前端自动化其中的一部分，前端自动化还包含了持续集成、自动化测试等方方面面。 而，处于其中任何一个块都属于前端工程化。 AST 又能为前端工程化做些什么？ 如果觉得文章不错，那么希望你能动动你的小手，帮忙点个赞，谢谢了 ~ 前端交流群：731175396
1.8K40发布于 2020-03-03 （大前端）前端高级工程师
多端一致性、性能瓶颈与工程化效率成为制约前端团队规模化发展的核心挑战。本文将从架构设计视角，解析高级工程师如何通过系统性思维破解这些难题。 跨端渲染引擎：对复杂交互场景（如3D商品展示），可采用WebGL或自研渲染引擎统一渲染逻辑，通过Canvas/WebGL跨端兼容层输出到不同平台，避免重复开发。3. 二、性能优化：从“局部调优”到“全链路治理”的系统性思维性能是前端体验的生命线，但优化不能仅聚焦于代码层面。高级工程师需构建“感知-分析-治理”的闭环体系：1. 3. 结语大前端架构设计的本质是在复杂度与效率之间寻找平衡点。高级工程师需具备“纵览全局”的视野，从业务场景出发，通过抽象层设计、性能全链路治理与工程化价值驱动，构建可扩展、高可用、易维护的前端体系。
46510编辑于 2025-09-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号