【2025春第一节课】前端工程化

前端工程化

什么是前端工程化

前端工程化，就是降本提效的体现

广义上，前端工程化包含一切以降低成本、提高效率、保障质量为目的的手段

通过一系列的规范、流程、工具达到研发提效、自动化、保障质量、服务稳定、预警监控等

一个优秀的前端工程师，需要对所开发项目的效率、性能、质量等工程化维度，去制定和实施技术优化指标，只有具备这方面能力，才能应对和优化复杂项目，保证团队高效产出

前端构建工具

简单来说，构建工具是可以帮助开发者管理本地源文件，优化开发流程，降低开发复杂度，使开发者更加专注在业务逻辑开发上的一种工具。我们在开发环境的代码，是为了方便阅读与开发，生产环境的代码则是为了代码更好的运行。开发环境的代码，要进行压缩编译以后，才能放在线上执行，这样代码体积更小，加载起来更快，所以构建工具一般有以下几种作用：

• 代码压缩

将js、css代码混淆压缩，让代码体积更小，加载更快

• 编译语法

编写css时使用Less、Scss，编写js时使用es6、ts等，这些标准目前都无法被浏览器兼容，因此需要构建工具编译，例如使用Babel编译es6语法。

• 处理模块化

css和js的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、Rollup等处理js模块化。

市面上的构建工具特别多：

• webpack
• vite
• rollup
• esbuild
• parcel
• gulp
• ......

babel

• 简介

因为浏览器兼容性问题，有些浏览器可能不兼容ES6+的语法等等，需要用babel将ES6+的语法降级为ES5语法，让浏览器可以运行。比如让const，let降级为var，箭头函数降级为普通函数。

在线babel转换网址： Babel · The compiler for next generation JavaScript

效果：

webpack

• 简介

webpack是静态模块打包工具（将静态模块压缩，整合，转译，比如LESS，SCSS转译为CSS，ES6+降级为ES5），当webpack运行时，会从entry入口开始构建依赖图，并将每个模块合成多个bundles用于展示内容

• 基础使用

1. 安装webpack

pnpm i webpack webpack-cli -D

2.修改命令

3. 根目录创建webpack.config.json文件配置

4. 引入静态资源模块化

Webpack本身只可以处理JS文件，无法处理CSS文件，需要额外的配置

如果已经定义了webpack.config.js文件，那么在项目下执行npxwebpack时就会默认按照config文件里的设置来执行

1. 核心概念

   1. entry 入口：表示webpack打包从哪个文件开始
   2. output输出：表示webpack打包完成后输出到那个目录，并且叫什么名字（名称涉及缓存能否复用）
   3. loader加载器（本身是函数，用于处理不同类型的文件）：Webpack本身只可以处理JS文件，无法处理CSS文件，json等，这些需要loader进行处理
   4. plugin插件（本身是含有apply方法的对象，在webpack的不同生命周期执行不同的操作）：扩展webpack功能。
   5. mode模式：指定开发还是生成模式，可以快速切换BASE_URL等等，且在生产模式下打包也会自动压缩代码。

1.1. entry

• 入口文件要用相对路径，而输出目录要用绝对路径

• 只有相关内容会被打包

2. loader

2.1 配置加载CSS （会让CSS自动放在HTML中的style标签中） 2.1.1 安装依赖

pnpm i style-loader css-loader -D

2.1.2运行结果

2.2配置多个loader

2.3 处理图片资源

很小的图片（小于5kb）转化为base64字符串格式可以减少服务器请求数量，只要还是在background：url(）里面，字符串也可以解析为图像（但是体积会大60%左右，所以针对于小图片而言可以转化为base64）

2.3.1 配置图片loader

2.4 Babel

2.4.1 Babel为每个编译的文件都加入了辅助代码，导致代码文件体积过大，可以将这些辅助代码单独提取出来，避免重复引入

3. output

4.plugin

4.1 处理JS

虽然Webpack可以编译JS语法，但是无法进行兼容性处理，以及代码格式处理，所以需要额外的配置

4.1.1 配置ESLint

ESLint是规范团队代码格式的工具，保证代码风格统一，便于维护。

4.2 自动处理HTML

每次打包后都要去手动给HTML文件引入打包后的js文件太麻烦了，可以设置这个插件自动引入打包后的js文件

5.devServer开发服务器

开发服务器解决了2个问题

1. 可以设置HMR热更新，避免修改代码后要重新打包才可以看到变化
   

2. 可以解决跨域问题，开发服务器会用本地node代理我们的请求，避免了因为浏览器的同源策略导致的CORS。

5.1 配置

• 需要注意的是devServer HMR热更新内容是存在于内存中的，不会对dist内容进行修改。

6.mode模式

6.1 将开发和生产模式分开配置

6.2 开发和生产模式差异

开发模式不需要输出，所以不需要设置output的path。

生产模式只需要输出，不需要开发服务器。

---

7. 对CSS更加详细的处理

7.1 避免闪烁

以前的style-loader会将所有的CSS写在style中，当JS加载后再创建style标签，再加载CSS，可能出现样式突然闪烁，所以要将CSS单独提取到link ref='xxx.css'中，避免样式闪烁

7.2 CSS兼容性处理

有些浏览器因为内核不同，CSS样式会加上前缀，比如--webkit，而postCSS就可以实现自动加上这些前缀，以及更多的兼容性处理功能。

---

7.3 封装loader

7.4 CSS压缩

生产模式会默认压缩JS和HTML，CSS需要插件。

复盘Webpack的配置

基本配置

loader配置

plugins配置

更多配置

还有OneOf，Thread， runtimeChunk， Code Split ，Tree Shaking等等配置，可以自行了解，B站有相关视频。

webpack 基本原理

webpack的热更新HMR原理

1.基本流程图

2.文字叙述版（我自己的理解，可能有误）

Vite

Vite相比Webpack的优势

1. vite只用ES模块化去引入（会预构建，用esbuild将非ES模块化的转换为ES规范去导出导入），不允许CJS引入，省去了分析依赖的过程，节约了服务器部署时间，而Webpack支持ES和CJS等等引入方式，为了统一引入方式，需要读取所有依赖统一变为__webpack_require__，所以部署开发服务器耗时长
2. vite是懒加载，直接开始服务器，用到什么依赖才引入，为webpack是全部引入后才开启服务器

预构建

更多....

鉴于笔者最近Vite也不是很了解，最近也正在学习，所以无法阐述更多。读者有兴趣可以自行学习。