写点什么

前端工程化

1 人感兴趣 · 21 次引用

  • 最新
  • 推荐
https://static001.geekbang.org/infoq/7e/7e73459ae5c8b3f172bd7b49f3fcf7cf.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

前端工程化实战:React 的模块化开发、性能优化和组件化实践

前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开发效率和质量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。

https://static001.geekbang.org/infoq/1b/1b4236ae4c06ecb88edeaa61ba1d9994.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

剥茧抽丝,细数模块化的前世今生

近几年,时常会感叹,前端,发展的太迅猛了。日新月异的新概念,异彩纷呈的新思想泉水般涌出;前端项目的复杂度、开发成本、维护难度也在不断提升,前端三件套开发模式(HTML-CSS-JS)滞后于前端的进步,这要求我们需要以更高层次的眼光来重新审视前端—工程化

十问 babel

为什么我总是看不懂项目中babe.config.js的配置项? 当然不是你的问题他的配置项确实很复杂,且网上配置项众说纷纭,花里胡哨一大堆,各个插件名字相似,很容易搞混。况且,这只是一个工具,配成啥样,都能用,既然能用,凑活用呗。

https://static001.geekbang.org/infoq/74/742d667cc55b5d7bc5c0838e2c49c2c7.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

从零打造你的前端开发脚手架

在实际开发过程中,我们经常都会用到脚手架来构建前端工程项目,使用脚手架可以大幅提升项目的构建速度,通过命令行的交互,选择你所需要的配置与集成,可快速完成初始项目的创建。

https://static001.geekbang.org/infoq/50/50a4448c3888ff140947b7b978f35f56.webp?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

众生皆苦,我选 pnpm

pnpm - 速度快、节省磁盘空间的软件包管理器 perfomance npm ,即 pnpm (高性能npm) 优势 快速 pnpm 是同类工具速度的将近 2 倍

https://static001.geekbang.org/infoq/01/01630c147cd55f771a8efb4ae85cb644.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

前端工资涨不上去?可能是你没掌握构建工具:关于 Webpack、Babel、esbuild、Vite、Rollup、Parcel、SWC...... 的那些事

用户头像
代码与野兽
2022-08-27

前端工程化,是每一个高级前端开发人员都必须要去深入了解的内容,这也是想要拿到高薪不可避免的一个关键因素。

Webpack5 新特性:使用 Assets Module 处理图片和字体资源

用户头像
昆吾kw
2022-08-03

本文介绍了 Webpack5 的 Assets Module ,是其内置的用来处理图片字体文件等资源模块的新功能。相比与过去通过 loader 的方式去处理,更加方便和简洁。

Elux- 将企业级工程化框架带入小程序开发

用户头像
hiisea
2022-06-14

Elux将企业级工程化框架引入小程序开发,支持React/Vue,支持Web(浏览器页面)SSR(服务器渲染)Micro(微前端)Taro(小程序)APP(手机应用)

https://static001.geekbang.org/infoq/e8/e839c6598d1e06aa5868331751a0306f.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

[万字总结] 一文吃透 Webpack 核心原理

用户头像
范文杰
2021-06-01

长文预警!万字总结 Webpack 核心流程与插件架构,带你深入理解从启动到输出 bundle,Webpack 内部逻辑流转与数据结构变化

前端工程化 -webpack

用户头像
chun1123
2021-04-27

1、Webpack 的构建流程主要有哪些环节?如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

https://static001.geekbang.org/infoq/bc/bc1c7606373299ca73c5a0461e467bdb.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

使用 Travis CI 为工程搭建一个持续集成服务。

用户头像
梁龙先森
2021-02-08

持续集成,工程化上重要的一环,保证分支大幅度偏离主干!

https://static001.geekbang.org/infoq/bc/bc1c7606373299ca73c5a0461e467bdb.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Webpack | 如何提升构建速度,进行体积优化?

用户头像
梁龙先森
2021-02-04

项目代码量到达一定程度,你不得不懂的优化策略。

https://static001.geekbang.org/infoq/bc/bc1c7606373299ca73c5a0461e467bdb.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

源码 | 浅谈 Webpack 原理,以及 loader 和 plugin 实现。

用户头像
梁龙先森
2020-11-30

通过源码理解webpack5原理和构建过程,以及raw-loader和cros-plugin插件实现,手撸最简webpack。

解密智联招聘的大前端架构 Ada

用户头像
智联大前端
2020-11-30

Ada是智联招聘自主研发的演进式大前端架构。于2017年正式投入使用后,又经过三年持续演进,全面覆盖了从研发到运维的各个方面,具备跨技术栈工程化体系、交互式图形界面开发工具、自动化发布流程、Serverless运行时和完善的监控预警设施。目前已经支撑集团内

https://static001.geekbang.org/infoq/bc/bc1c7606373299ca73c5a0461e467bdb.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

脚手架 | 从零搭建满足权限校验等需求的前端命令行工具

用户头像
梁龙先森
2020-11-23

从零自定义一套符合团队需求的前端脚手架,具备实时升级、权限校验、集成开发/生产构建部署等工具流,是工程化必不可少的部分。

https://static001.geekbang.org/infoq/3d/3d2825e0c02ee72c6c2cb7e7be775985.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Snowpack - 更快的前端构建工具

用户头像
曲迪
2020-11-22

Snowpack 更快的开发构建工具。以原生ES Module的方式在开发环境加载模块,提高开发效率

https://static001.geekbang.org/infoq/15/15fbf4f6d69926e719e07ef0fdd9db95.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

一条龙!CI / CD 、打造小团队前端工程化服务

用户头像
久违
2020-09-03

​这个是自动化部署 + npm私有库搭建 + API Mock server 等服务的搭建

https://static001.geekbang.org/infoq/91/9109570a3c70c15c3a0e148e02d2d524.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

比 Webpack 更高效的 Rollup 入门指南

用户头像
费马
2020-06-10

Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中,而不是以前的特殊解决方案,如 CommonJS 和 AMD。

前端工程化_前端工程化技术文章_InfoQ写作社区