基于 webpack5 完成前端工程化建设

前言

内容来源于抖音哲玄前端 大佬的《大前端全栈实践》课程,此课程是从零开始做一个企业级的全栈应用框架。

工程化架构

  • 工程化本质就是一个解析引擎,负责将业务文件转换为适合生产环境使用的产物文件
  • 核心就是对业务文件进行解析编译、模块分包、压缩优化

什么是webpack

  • webpack就是一个解析引擎,通过传入不同的配置实现自己想要的效果

模块分包

js 复制代码
// 配置优化手段
optimization: {
	/**
	 * 将 js 文件打成三种包
	 * 1. vendor
	 *  第三方库,基本不会改动,除非依赖的版本升级
	 * 2. common
	 *  公共使用的代码块,改动很少
	 * 3. entry.page
	 *  个性化的 业务需求,改动频繁
	 *
	 * 这样设计,可以充分利用浏览器的缓存
	 */
	splitChunks: {
		chunks: "all", // 对同步和异步的模块都进行分割
		maxAsyncRequests: 10,
		maxInitialRequests: 10,
		cacheGroups: {
			vendor: {
				test: /[/\\]node_modules[/\\]/,
				name: "vendor",
				priority: 20, // 优先级,越大越高
				reuseExistingChunk: true // 如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块
			},
			common: {
				name: "common",
				minChunks: 2, // 最少需要俩个地方引用 chunk 才分割
				minSize: 1, // 最小的分割文件大小 1字节
				priority: 10, // 优先级
				reuseExistingChunk: true // 如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块
			}
		}
	}
}

实现HMR

  • HMR本质就是 一个服务器拥有监控能力+通知能力
  • 监控能力负责监听业务代码是否有改动
  • 通知能力则是通知浏览器更新页面
  • 为了提高更新的效率,我们把构建后的文件不落地到磁盘中,而是放到一个服务器的内存中
  • 具体在webpack中通过HotModuleReplacementPlugin和webpack-hot-middleware手动实现热替换功能

为什么是服务器

  • ​HMR 的核心机制​是服务器主动向浏览器推送变更
  • ​技术实现​ :通过 ​WebSocket​ (或 Socket.IO、SSE)建立双向通信通道
    • 文件修改时,服务器通过 WebSocket 通知浏览器:"模块 A 已更新,请拉取新代码"
    • 浏览器收到消息后,动态请求更新后的模块代码
相关推荐
再吃一根胡萝卜几秒前
Kubernetes 命令操作文档
前端
WildBlue几秒前
React 遇上原子 CSS:前端开发的超级进化 🚀
前端·react.js
namehu3 分钟前
深度解析:移动端 1px 边框问题与 rem 方案
前端·javascript·响应式设计
小高0074 分钟前
JavaScript 隐藏技巧:让代码量减少一半的 5 个方法
前端·javascript·面试
李先生9304 分钟前
Puppeteer最新迁移和服务
前端·node.js
FSHOW4 分钟前
重新造轮子?HestJS:让 Hono 拥有 NestJS 的优雅
前端·javascript·后端
练习前端两年半7 分钟前
Vue 3 Render函数深度解析:Text、Comment、Fragment节点的渲染机制
前端·vue.js
7ayl7 分钟前
transition相关
前端
namehu7 分钟前
“c is not a function” - 一次由 useEffect 异步函数引发的 React 底层崩溃分析
前端·javascript·react.js
杨进军8 分钟前
微前端之微前端生命周期
前端·架构