- 博客(256)
- 收藏
- 关注
RSS订阅原创 Webpack 优化细节详述
Webpack优化技巧全集 摘要：本文详细介绍了Webpack在开发和生产环境中的多种优化策略。在开发环境方面，重点讲解了模块热替换(HMR)的实现、Source Maps的选型配置、持久化缓存的使用方法以及增量编译的加速技巧。在生产环境方面，则涵盖了生产模式的自动优化、代码分割的具体实现、Tree Shaking的有效配置等核心优化手段。文章包含大量代码示例和配置详解，并辅以流程图说明HMR的工作原理，为Webpack性能优化提供了全面实用的技术方案。
2025-06-18 23:59:47
826
原创 Webpack5 原理剖析与实现
Webpack5核心原理与实现解析 架构设计： 采用事件驱动的插件架构，通过生命周期钩子协调组件工作 核心分层：配置处理层、Compiler控制层、插件注册层 关键组件： Compiler：编译过程控制器，继承Tapable实现钩子系统 核心概念：Entry（入口）、Output（输出）、Module（模块）、Plugins（插件） 实现特点： 标准化配置处理与默认值设置 丰富的钩子系统（beforeRun/run/done/failed等） 异步流程控制机制（AsyncSeriesHook/AsyncPa
2025-06-18 23:57:13
716
原创 Webpack 的 Compiler 与 Compilation
Webpack的核心构建过程围绕Compiler与Compilation两个对象展开。Compiler作为全局编译环境，管理配置、插件和整个构建生命周期，只实例化一次。它提供丰富的钩子函数，控制从初始化到完成的完整流程，并支持watch模式。Compilation则代表单次编译过程，处理模块依赖、资源生成等具体任务。通过这两个对象的协作，Webpack实现了模块化构建的强大功能，开发者可以通过插件系统在关键生命周期节点进行干预和扩展。
2025-06-18 23:50:48
772
原创 Webpack 插件机制 Tapable
Tapable 是 Webpack 插件架构的核心库，它提供了一套完整的事件钩子系统，使得 Webpack 能够在构建过程的各个阶段暴露钩子，让插件可以介入和扩展功能
2025-06-18 23:46:23
622
原创 Webpack Loader 和 Plugin 的区别详解
Webpack Loader 和 Plugin 的区别主要体现在：Loader 是文件转换器，用于处理单个模块（如转换CSS、TypeScript等），它以链式方式作用于文件内容；而 Plugin 是功能扩展器，通过生命周期钩子影响整个构建流程（如资源优化、文件生成等）。Loader 本质上是转换函数，Plugin 则是具有apply方法的类。Loader 在模块解析阶段执行，Plugin 在整个构建过程的不同阶段触发。二者协同工作，共同完成Webpack的构建任务。
2025-06-18 23:40:04
1112
原创 Webpack5 基础进阶与原理剖析
Webpack 是一个现代 JavaScript 应用程序的模块打包工具，其核心包括入口(Entry)、输出(Output)、加载器(Loaders)、插件(Plugins)和模式(Mode)。常用 Loaders 如 babel-loader 转译 ES6+代码，css-loader 处理 CSS 文件；常用 Plugins 如 html-webpack-plugin 生成 HTML 文件。构建过程分为初始化、构建依赖图、模块编译、生成代码块、优化和输出六个阶段。基础配置包含模式、入口、输出、模块处理和插
2025-06-18 23:21:19
865
原创 Vite5基础进阶与原理
Vite核心概念与基础实践 摘要 Vite是一款现代化前端构建工具，其核心在于利用浏览器原生ES模块(ESM)支持，实现快速启动和高效开发体验。主要特点包括： 极速启动：通过按需加载避免全量构建 即时HMR：模块热替换无需整页刷新 原生ESM：开发阶段直接使用浏览器模块系统 双引擎架构：开发环境使用esbuild实现毫秒级编译，生产环境采用Rollup进行深度优化 技术选型分析 Vite的架构设计体现了对开发/生产场景的针对性优化： 开发环境：esbuild的Go语言实现带来10-100倍的性能提升，满足实
2025-06-17 22:51:56
919
原创 为什么生产环境sourcemap产物托管到第三方平台？
在现代前端项目中，随着业务复杂度不断提升，构建链不断完善，生产环境的代码通常会经过压缩、混淆以及 Tree Shaking 等优化处理，以减小包体积、提升加载性能。然而，这也给线上异常排查带来了极大挑战：当浏览器抛出错误时，往往只会显示一段压缩后的、不可读的代码片段和毫无意义的行列号。为了解决这一痛点，SourceMap 应运而生，而将生成后的 SourceMap 上传并托管到专业的错误监控平台（如 Sentry）则进一步大幅提升了线上问题的定位与修复效率。
2025-06-17 22:48:59
525
原创 React路由库之@tanstack/router
@tanstack/router 是一个高性能 React 路由库，提供丰富的路由功能。它支持基础路由配置、动态路由匹配、嵌套路由和懒加载，通过优化算法和hooks实现避免不必要的渲染。优势包括高性能、配置灵活性和良好的开发者体验。深度功能涵盖类型安全、路由状态管理和内存优化。相比React Router和Reach Router，它在处理复杂路由时表现更优，并提供更现代化的API和TypeScript支持。最佳实践建议合理使用懒加载、简化路由配置并采用TypeScript确保类型安全。
2025-06-10 22:10:26
905
原创 React19 路由方案与原理详解
React 19 带来了许多新特性，其中路由系统依旧是前端架构设计的核心之一。本文将系统性梳理 React Router v6+ 的使用方式、底层原理以及高级应用，结合面试场景与实际项目落地，帮助高级前端开发者和架构师深入掌握 React Router 的完整生态。
2025-06-10 22:06:15
937
原创 Zustand 使用优化：深入探讨状态管理性能提升
Zustand 状态管理优化实践 本文总结了使用 Zustand 进行状态管理时的性能优化方案： 细粒度订阅 - 通过 useStore(state => state.xxx) 只订阅需要的状态，避免无关状态变化导致的组件重新渲染 自定义相等性比较 - 使用 createWithEqualityFn 配合自定义等式函数，精确控制状态更新的触发条件 Immer 集成 - 结合 Immer 简化不可变状态管理，特别是处理嵌套对象时 精准订阅中间件 - 使用 subscribeWithSelector 在非
2025-06-04 01:15:16
711
原创 React19 状态管理方案与原理剖析
React19 状态管理方案与原理剖析 文章系统梳理了React19状态管理方案的选择与实践。主要内容包括： 状态管理方案对比：从React内置（useState/useReducer/Context）到主流第三方库（Redux、Zustand、Jotai等），分析各自适用场景与选择依据（项目规模、状态复杂度、性能需求等） Redux核心原理：详解单向数据流、纯函数Reducer、Action分发机制和中间件体系，强调其可预测性和调试优势 性能优化策略： 组件层面：使用React.memo、useCallb
2025-06-04 01:12:16
850
原创 深入理解 React 19 中的 useTransition、useOptimistic、useDeferredValue：差异、联系与使用场景
React 19 引入了三个关键的并发特性 Hook：useTransition、useOptimistic 和 useDeferredValue，分别针对不同的异步状态处理场景。 useTransition 用于将非紧急 UI 更新标记为低优先级，避免阻塞用户交互，适用于搜索过滤等耗时渲染；useOptimistic 则通过乐观 UI 在提交数据前预先展示预期结果，提升评论、点赞等交互的响应速度，但需开发者处理请求失败时的回滚逻辑；useDeferredValue 通过延迟输入类场景的更新，优化性能敏感操
2025-05-27 23:59:28
851
原创 React19进阶特性
React Hooks是React 16.8引入的特性，允许在函数组件中使用状态和生命周期功能。核心Hooks包括： useState：管理组件状态 useEffect：处理副作用操作 useContext：访问上下文数据 React Suspense用于处理异步操作，配合React.lazy实现组件懒加载，通过fallback显示加载状态。 主要进阶特性： ref/forwardRef：访问DOM元素或组件实例 Suspense/Lazy：优化性能，实现代码分割 Hooks简化了状态管理，解决了高阶组件复
2025-05-27 23:50:53
688
原创 编译原理之visitor访问者模式
Visitor模式是一种行为设计模式，它允许我们定义一种操作，该操作作用于对象结构中的各个元素。该模式通过将算法从对象结构中分离，使得我们可以在不改变这些元素类的情况下定义新的操作。这在编译器设计中尤为重要，因为编译器需要处理各种不同的语法结构元素，而Visitor模式提供了一种灵活且可扩展的方式来实现这一目标。Visitor访问者模式是一种强大而灵活的设计模式，在编译器设计和前端开发中都有着广泛的应用。
2025-05-06 23:00:55
848
原创 JavaScript中的Set、Map、WeakSet、WeakMap详解
Set是ES6引入的一种新的数据结构，它允许我们存储任何类型的数据，但每个元素只能出现一次。换句话说，Set中的元素是唯一的，不允许有重复值。Map也是ES6引入的一种新的数据结构，它允许我们存储键值对（key-value pairs）。与普通对象不同，Map的键可以是任意数据类型，包括对象、函数等。WeakSet与Set类似，但它存储的引用是弱引用。这意味着如果WeakSet中引用的某个对象没有其他强引用指向它，垃圾回收机制可能会回收该对象，而不会考虑它是否存在于WeakSet中。
2025-04-28 09:15:00
1618
原创 从JavaScript V8 引擎原理剖析职场法则
在前端开发领域中，v8引擎作为JavaScript的执行引擎，不仅是技术实现的核心，更是蕴含了许多值得借鉴的职场法则。v8引擎通过新生代、老生代、垃圾回收、标记清除碎片、标记整理碎片等机制，优化了内存管理，提高程序运行效率。这些机制中隐藏着许多职场生存和发展的智慧，接下来，我将从这些机制出发，结合实际案例，探讨如何在职场中应用这些法则
2025-04-17 09:00:00
880
原创 GraphQL
[graphql](https://graphql.cn/) 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时
2024-10-25 21:48:18
1043
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人