当前位置：首页 > news >正文

每天一个前端小知识 Day 7 - 现代前端工程化与构建工具体系

news 来源：原创 2025/6/27 15:30:37

现代前端工程化与构建工具体系

1. 为什么要工程化？（面试高频问题）

问题痛点：

模块太多、无法组织；
代码冗长、性能差；
浏览器兼容性差；
团队协作混乱，缺少规范与自动化。

工程化目标：

✅ 提升开发效率
✅ 保证代码质量
✅ 实现构建优化与产出部署自动化

2. 模块化规范回顾（理解构建目标）

模块规范	适用环境	示例
IIFE	早期浏览器	`(function(){})()`
CommonJS	Node.js	`const fs = require('fs')`
AMD	RequireJS	`define([], function(){})`
ESM	浏览器 & 构建工具	`import/export`（现代标准）

构建工具的核心任务之一：将模块统一转换为浏览器能识别的格式。

3. Webpack：经典构建工具（仍是大厂面试重点）

核心概念：

概念	说明
Entry	入口文件
Output	输出配置
Loaders	处理非 JS 文件（如 `.css`, `.ts`）
Plugins	扩展功能（如压缩、提取 CSS、HTML 模板等）
Mode	`development` / `production` 区别明显
DevServer	启动本地服务器，支持热更新（HMR）

示例配置：

module.exports = {entry: './src/index.js',output: { filename: 'bundle.js', path: __dirname + '/dist' },module: {rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]},plugins: [new HtmlWebpackPlugin({ template: './index.html' })]
};

4. Vite：新一代构建工具（性能爆炸提升）

Vite vs Webpack 面试常问点：

特性	Webpack	Vite
开发模式启动速度	慢（打包构建整个项目）	快（原生 ES 模块 + 按需编译）
依赖处理方式	打包	预构建 & 原生 ESM
HMR 热更新	较慢	极速（基于原生模块）
配置复杂度	高	极简（开箱即用）
适配框架	通用，适配 React/Vue/Angular 等	Vue/React 快速支持

5. Babel：语法转换器（兼容性保障关键工具）

Babel 用于将 ES6+ 转换为 ES5 兼容版本

// ES6
const greet = () => console.log('Hi');// Babel 编译后
var greet = function () {return console.log('Hi');
};

配置文件（`.babelrc`）示例：

{"presets": ["@babel/preset-env"]
}

面试考点：

Babel 是如何保证浏览器兼容性的？
Babel 插件机制是如何工作的？
Babel 和 TypeScript 的区别？

6. 开发体验提升工具链

工具	功能
ESLint	代码风格规范
Prettier	统一代码格式
Husky + lint-staged	Git 提交前自动检查
Commitlint	强制规范 commit message
Source Map	映射编译后的代码 → 源码
Tree Shaking	剔除无用代码

7. 构建优化实践（面试高级加分）

✅ 构建速度优化

使用 cache-loader 缓存中间结果；
开启多线程（thread-loader）；
Webpack 5 自带持久缓存功能。

✅ 打包体积优化

代码分割（splitChunks）；
动态导入（import()）；
压缩（terser-webpack-plugin）；
第三方依赖外部引入（CDN）；

8. 面试高频问答

📌 Q1：Webpack 和 Vite 的最大区别是什么？

Webpack 是“打包优先”，开发阶段先构建；
Vite 是“原生模块优先”，按需热更新，极快启动。

📌 Q2：如何实现 Tree-Shaking？

使用 ES Module；
避免 sideEffects；
设置 package.json 的 "sideEffects": false；
保证代码无副作用。

📌 Q3：如何减少打包时间？

缓存；
排除 node_modules；
动态 import；
HMR 优化；
文件层级扁平化。

📌 Q4：如何配置 Babel + Webpack 实现 ES6 转换？

module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: ['babel-loader']}]
}

✅ 总结

现代前端工程化体系是大型项目成功的保障。理解构建工具（Webpack/Vite）、转换器（Babel）、格式检查（ESLint/Prettier）、自动化流程（Git Hooks）等，不仅能写出更优雅的代码，也能在面试中展现你对整体架构的理解。

每天一个前端小知识 Day 7 - 现代前端工程化与构建工具体系

现代前端工程化与构建工具体系 1. 为什么要工程化？（面试高频问题） 问题痛点： 模块太多、无法组织；代码冗长、性能差；浏览器兼容性差；团队协作混乱，缺少规范与自动化。工程化目标…...

编程日记 2025/6/27 15:30:37

nginx的下载与安装 mac

1. 下载方法一：本地下载链接：https://nginx.org/en/download.html（可直接搜官网） 下载到本地后，上传到linux的某个文件夹中方法二：直接linux上下载（推荐） wget -c http://ngi…...

编程日记 2025/6/27 15:19:57

[持续集成]

学习目标能够使用 Git 代码托管平台管理代码能够实现 jenkinspostman 的持续集成能够实现 jenkins代码的持续集成持续集成概念 : 将自己工作成果持续不断地把代码聚集在一起,成员可以每天集成一次或多次相关工具 : git : 代码管理工具,自带本地仓库gitee : 远程代码管理…...

编程日记 2025/6/21 7:16:11

Spring Aop @AfterThrowing (异常通知): 使用场景

核心定义 AfterThrowing 是 Spring AOP 中专门用于处理异常场景的**通知（Advice）**类型。它的核心作用是： 仅在目标方法（连接点）的执行过程中抛出异常时，执行一段特定的逻辑。如果目标方法成功执行并正常…...

编程日记 2025/6/21 7:04:22

【赵渝强老师】Kubernetes的安全框架

Kubernetes集群的安全框架主要由以下认证、鉴权和准入控制三个阶段组成。这三个阶段的关系如下图所示。视频讲解如下【赵渝强老师】Kubernetes的安全框架认证（Authentication） 当客户端与Kubernetes集群建立HTTP通信时，首先HTTP请求会进…...

编程日记 2025/6/21 7:03:04

【Python小练习】3D散点图

资产风险收益三维分析背景王老师是一名金融工程研究员，需要对多个资产的预期收益、风险（波动率）和与市场的相关性进行综合分析，以便为投资组合优化提供决策依据。代码实现 import matplotlib.pyplot as plt from mpl_toolk…...

编程日记 2025/6/21 6:52:40

腾讯混元3D制作简单模型教程-2

以下是腾讯混元3D制作简单模型的详细教程，整合最新版本特性（截至2025年6月），操作门槛低且无需专业基础： 🖥 一、在线生成（最快30秒完成） ‌访问平台‌ 打开腾讯混元3D创作引擎官网…...

编程日记 2025/6/21 6:52:39

NVIDIA开源Fast-dLLM！解析分块KV缓存与置信度感知并行解码技术

Talk主页：http://qingkeai.online/ 文章原文：https://mp.weixin.qq.com/s/P0PIAMo1GVYH4mdWdIde_Q Fast-dLLM 是NVIDIA联合香港大学、MIT等机构推出的扩散大语言模型推理加速方案。论文：Fast-dLLM: Training-free Acceleration of Diffusion…...

编程日记 2025/6/21 6:33:20

大白话说目标检测中的IOU（Intersection over Union）

很多同学在学习目标检测时都会遇到IoU这个概念，但总觉得理解不透彻。这其实很正常，因为IoU就像个"多面手"，在目标检测的各个阶段都要"打工"，而且每个阶段的"工作内容"还不太一样。今天我就让IoU自…...

编程日记 2025/6/21 6:32:18

CentOS 8解决ssh连接github时sign_and_send_pubkey失败问题

我在一台centos8机器上安装git环境以连接到github，首先第一步需配置好ssh环境，因为我已经有一台Ubuntu机器已经配置好ssh环境，所以我ftp Ubuntu机器取得id_rsa id_rsa.pub known_hosts三个文件，然后执行命令： $ git …...

编程日记 2025/6/21 6:32:17

回答如何通过inode client的SSLVPN登录之后，访问需要通过域名才能打开的服务

需要dns代理 1 配置需求或说明 1.1 适用的产品系列本案例适用于软件平台为Comware V7系列防火墙：本案例适用于如F5080、F5060、F5030、F5000-M等F5000、F5000-X系列的防火墙。注：本案例是在F100-C-G2的Version 7.1.064, Release 9510P08版本上进行…...

编程日记 2025/6/21 6:22:14

OpenCV实现二值图细化（骨架提取）

对二值图进行细化（骨架提取），也就是把每根线条细化到一个像素的宽度。有两个比较成熟的算法实现此功能，分别是Zhang-Suen算法和Guo-Hall算法。我们下面使用OpenCVSharp，使用C#实现上述两个算法： private…...

编程日记 2025/6/21 6:15:53

Excel常用公式大全

资源宝整理分享：https://www.httple.net Excel常用公式大全可以帮助用户提高工作效率，掌握常用的Excel公式，让数据处理和计算工作更加便捷高效。了解公式学习方法、用途，不再死记硬背，拒绝漫无目的。命令用途注释说…...

编程日记 2025/6/21 6:11:35

在 Windows 上使用 Docker Desktop 快速搭建本地 Kubernetes 环境（附详细部署教程）

言简意赅的讲解Docker Desktop for Windows搭建Kubernetes解决的痛点目标读者： 对 Docker Desktop 有一定了解，能在 Windows 上成功安装和使用 Docker Desktop。想要在本地快速搭建一套 Kubernetes 环境进行测试或学习的开发者。一、准备工作安装 Doc…...

编程日记 2025/6/21 1:51:48

Python设计模式终极指南：18种模式详解+正反案例对比+框架源码剖析

下面我将全面解析18种Python设计模式，每种模式都包含实际应用场景、优缺点分析、框架引用案例、可运行代码示例以及正反案例对比，帮助您深入理解设计模式的价值。一、创建型模式（5种） 1. 单例模式（Singleton&#x…...

编程日记 2025/6/22 17:45:43

伯努利模型的极大似然估计与贝叶斯估计 import numpy as np import matplotlib.pyplot as plt from scipy.stats import beta, bernoulli from scipy.optimize import minimize_scalar# 设置中文字体 plt.rcParams[font.sans-serif] [SimHei] # 使用黑体 plt.rcParams[axes.…...

编程日记 2025/6/24 6:24:53

IPv4编址及IPv4路由基础

一、实验目的掌握接口 IPv4 地址的配置方法理解 LoopBack 接口的作用与含义理解直连路由的产生原则掌握静态路由的配置方法并理解其生效的条件掌握通过 PING 工具测试网络层连通性掌握并理解特殊静态路由的配置方法与应用场景二、实验环境安装有eNSP模拟器的PC一台&#…...

编程日记 2025/6/23 18:07:46

基于Python的机动车辆推荐及预测分析系统

博主介绍：java高级开发，从事互联网行业六年，熟悉各种主流语言，精通java、python、php、爬虫、web开发，已经做了六年的毕业设计程序开发，开发过上千套毕业设计程序，没有什么华丽的语言&#xff0…...

编程日记 2025/6/24 5:45:36

SpringBoot扩展——发送邮件！

发送邮件在日常工作和生活中经常会用到电子邮件。例如，当注册一个新账户时，系统会自动给注册邮箱发送一封激活邮件，通过邮件找回密码，自动批量发送活动信息等。邮箱的使用基本包括这几步：先打开浏览器并登录邮箱&…...

编程日记 2025/6/26 10:27:56

啊啊啊啊啊啊啊啊code

前序遍历和中序遍历构建二叉树 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNod…...

编程日记 2025/6/20 20:13:50

不同程度多径效应影响下的无线通信网络电磁信号仿真数据生成程序

生成.mat数据： %创建时间：2025年6月19日 %zhouzhichao %遍历生成不同程度多径效应影响的无线通信网络拓扑推理数据用于测试close all clearsnr 40; n 30;dataset_n 100;for bias 0.1:0.1:0.9nodes_P ones(n,1);Sampling_M 3000;%获取一帧信号及对…...

编程日记 2025/6/20 20:10:47

C语言学习day17-----位运算

目录 1.位运算 1.1基础知识 1.1.1定义 1.1.2用途 1.1.3软件控制硬件 1.2运算符 1.2.1与 & 1.2.2或 | 1.2.3非 ~ 1.2.4异或 ^ 1.2.5左移 << 1.2.6右移 >> 1.2.7代码实现 1.2.8置0 1.2.9置1 1.2.10不借助第三方变量，实现两个数的交换…...

编程日记 2025/6/23 2:03:16

Spring MVC参数绑定终极手册：单多参对象集合JSON文件上传精讲

我们通过浏览器访问不同的路径，就是在发送不同的请求，在发送请求时，可能会带一些参数，本文将介绍了Spring MVC中处理不同请求参数的多种方式一、传递单个参数接收单个参数，在Spring MVC中直接用方法中的参数就可以…...

编程日记 2025/6/20 19:46:03

宽度优先遍历(bfs)(2)——fllodfill算法

欢迎来到博主的专栏：算法解析博主ID：代码小豪文章目录 floodfiil算法leetcode733——图像渲染题目解析算法原理题解代码 leetcode130——被围绕的区域题目解析算法原理题解代码 floodfiil算法 floodfill算法，在博主这里看来则是一个区域填…...

编程日记 2025/6/20 19:46:02

嵌入式编译工具链熟悉与游戏移植

一、Linux 系统编译工具链使用与 mininim 源码编译在 Ubuntu 系统上编译 mininim 开源游戏需要正确配置编译工具链和依赖库。以下是详细的操作步骤和故障解决方法： 1. 环境准备与源码获取首先需要安装必要的编译工具和依赖库： # 更新系统软件包索引…...

编程日记 2025/6/22 9:44:24

STUN (Session Traversal Utilities for NAT) 服务器是一种网络协议

STUN (Session Traversal Utilities for NAT) 服务器是一种网络协议，主要用于帮助位于网络地址转换 (NAT) 设备（如路由器）后面的客户端发现自己的公共 IP 地址和端口号。这对于建立点对点 (P2P) 通信至关重要，尤其是在 VoIP&#…...

编程日记 2025/6/22 18:36:59

Transformer结构介绍

[编码器 Encoder] ←→ [解码器 Decoder] 编码器： 输入：源语言序列输出：每个词的上下文表示(embedding) 解码器：输入：目标语言序列编码器输出输出：下一个词的概率分布（目标句子生成&#xff09…...

编程日记 2025/6/22 17:44:32

SpringBoot扩展——应用Web Service！

应用Web Service Web Service是一个SOA（面向服务的编程）架构，这种架构不依赖于语言，不依赖于平台，可以在不同的语言之间相互调用，通过Internet实现基于HTTP的网络应用间的交互调用。Web Service是一个可以…...

编程日记 2025/6/25 1:36:14

5G核心网周期性注册更新机制：信令流程与字段解析

一、周期性注册更新的技术背景与流程概述 1.1 注册更新的核心目的在5G网络中，UE通过周期性注册更新维持与核心网的连接状态，主要作用包括：状态保活：避免AMF因超时而释放UE上下文（T3512定时器超时前需完成更新）；位置更新：通知网络UE的当前位置，确保寻呼可达；能力同…...

编程日记 2025/6/23 23:44:49

【LLM学习笔记3】搭建基于chatgpt的问答系统（下）

目录一、检查结果检查有害内容检查是否符合产品信息二、搭建一个简单的问答系统三、评估输出1.当存在一个简单的正确答案2.当不存在一个简单的正确答案一、检查结果本章将引领你了解如何评估系统生成的输出。在任何场景中，无论是自动化流程还是其他环境&#x…...

编程日记 2025/6/26 4:31:50

算法导论第十九章并行算法：解锁计算新维度

第十九章并行算法：解锁计算新维度 “并行计算不是未来，而是现在。” —— David Patterson 在单核性能增长放缓的时代，并行算法成为突破计算极限的关键。本章将带你探索多核处理器、分布式系统和GPU加速的奇妙世界，揭示如何通过协…...

编程日记 2025/6/20 18:32:36

Python 数据分析与可视化 Day 1 - Pandas 数据分析基础入门

🎯 今日目标理解 Pandas 的作用和核心概念学会创建 Series 和 DataFrame掌握基本数据读取（CSV）与常用查看方法 🧰 1. 什么是 Pandas？ Pandas 是基于 NumPy 的强大数据分析库，提供了灵活的表格数据结构 Da…...

编程日记 2025/6/23 18:08:13

【数字人开发】Unity+百度智能云平台实现长短文本个性化语音生成功能

一、创建自己的应用百度智能云控制台网址：https://console.bce.baidu.com/ 1、创建应用 2、获取APIKey和SecretKey 3、Api调试调试网址：https://console.bce.baidu.com/support/?timestamp1750317430400#/api?productAI&project%E8%AF%AD%E9%…...

编程日记 2025/6/24 14:44:38

（哈希）128. 最长连续序列

题目给定一个未排序的整数数组 nums ，找出数字连续的最长序列（不要求序列元素在原数组中连续）的长度。请你设计并实现时间复杂度为 O(n) 的算法解决此问题。示例 1： 输入：nums [100,4,200,1,3,2] 输出&#xff…...

编程日记 2025/6/20 17:50:02

MFC中使用CRichEditCtrl控件让文本框中的内容部分加粗

MFC中文本框控件的内容，设置好字体格式后，只能单一的显示，如果相对文本框的内容部分加粗，或者部分加颜色、链接等都无法实现，但MFC中提供了CRichEditCtrl控件，就很方便的实现文本框中部分内容需要特殊处理的…...

编程日记 2025/6/23 13:19:11

Redis 的优势有哪些，它是CP 还是 AP？CAP 理论又是什么？

Redis的核心优势 Redis作为当今最流行的内存数据库之一，具有以下显著优势： 1. 卓越的性能表现内存存储：数据主要存储在内存中，读写速度极快（10万 QPS）单线程架构：避免多线程竞争&#xff0c…...

编程日记 2025/6/25 15:34:49

flink的多种部署模式

## 部署模式和运行模式 ### 部署模式 - 本地local - 单机无需分布式资源管理 - 集群 - 独立集群standalone - 需要flink自身的任务管理工具 - jobmanager接收和调度任务 - taskmanager执行 - on其他资源管理工具yarn/k8s …...

编程日记 2025/6/26 9:35:25

SQL分片工具类

SQL分片工具类(SqlShardingUtil)提供数据库查询的智能分片功能，支持数字和字符串两种字段类型的分片策略。对于数字字段，可以指定分片数量均匀划分数值区间；对于字符串字段，则按照ASCII字符范围自动划分。工具类确保分片后的SQL语…...

编程日记 2025/6/26 11:24:25

死锁相关知识

死锁是什么死锁（Deadlock）是指两个或多个进程（或线程）在执行过程中，因为互相等待对方释放资源，导致永远无法继续执行的状态。 ✅ 死锁的形成条件（必须同时满足以下四个）&#xff1…...

编程日记 2025/6/20 16:36:49

oscp靶机练习PG Reconstruction

枚举阶段 nmap -A -T4 -p- -Pn -n 192.168.217.103 发现ftp，进行连接枚举都下载到本地这里提示我们两点，可以看看pcap文件，还有就是可能有密码遗留还没有删除。使用下面命令进行过滤筛选流量包，查看与密码相关 http.reque…...

编程日记 2025/6/20 15:55:41

写题。贪心题组

一、解题思路：主要还是写出val / m，按这个排序，就行了 #include<bits/stdc.h> #define endl "\n" #define ll long long #define pii pair<int,int> using namespace std;struct doro {int m, val;double cmp; } arr…...

编程日记 2025/6/26 18:07:06

UE官方文档学习 TAarry 查询

这个很简单经常用。二.GetData() . GetData()，像C里拿到数组首地址一样。它不具有越界保护机制，StrArr拥有越界保护机制。这个地址在数组不做改变，如扩容等有用。 void AWXArrayActor::WXFindArray() {TArray<FString> StrArr { &q…...

编程日记 2025/6/27 14:16:47

使用Haproxy搭建Web群集

LVS负载均衡群集 Haproxy介绍http请求负载均衡常用调度算法常见的web群集调度器示例操作安装httpd（两台网站服务器操作一致）编译安装haproxyhaproxy服务器配置(1)建立haproxy的配置文件(2)修改haproxy.cfg配置文件测试haproxy的日志(1)修改 haproxy 配…...

编程日记 2025/6/26 4:26:19

Linux 基础命令：`ls`、`cd`、`du` 快速入门

在 Linux 系统中，ls、cd 和 du 是日常操作中最常用的三个命令。掌握它们能大幅提升文件管理效率。 1. ls：查看目录内容用途：列出当前或指定目录下的文件和子目录。常用命令： ls -l # 详细列表（权限、大…...

编程日记 2025/6/20 15:19:12

[论文阅读] 人工智能 + 软件工程 | USEagent：迈向统一的AI软件工程师

论文信息 article{applis2025unified,title{Unified Software Engineering agent as AI Software Engineer},author{Applis, Leonhard and Jiang, Nan and Zhang, Yuntong and Tan, Lin and Liang, Shanchao and Roychoudhury, Abhik},journal{arXiv preprint arXiv:2506.1468…...

编程日记 2025/6/22 16:15:34