- 博客(1029)
- 收藏
- 关注
RSS订阅原创 前端常用构建工具介绍及对比
现代软件开发中，构建工具各有特点：Gulp侧重任务自动化，Webpack适合复杂项目但配置繁琐，Rollup专精库开发，Parcel零配置易上手，Vite提供极速开发体验。选择时需根据项目规模、复杂度及开发需求来决定，如大型应用选Webpack，库开发用Rollup，快速原型开发则适合Parcel或Vite。理解各工具优势才能做出最优选择。
2025-07-01 23:36:05
664
原创 Webpack的插件机制Tapable
Tapable是Webpack插件系统的核心库，提供多种钩子类型实现插件扩展。主要分为同步（SyncHook/SyncBailHook等）和异步（AsyncSeriesHook/AsyncParallelHook等）两类钩子，支持串行/并行执行、中断机制和参数传递。通过tap/tapAsync注册回调，call/callAsync触发执行，示例展示了同步输出和异步延迟调用的实现方式。在Webpack中，插件可通过compiler.hooks（如emit/done）在编译各阶段注入逻辑，实现功能扩展。
2025-07-01 22:08:53
419
原创 Webpack 简版手写
本文介绍了如何从零实现一个简易版Webpack5构建工具。通过创建核心模块（createAsset解析文件、createGraph构建依赖图、bundle生成打包代码），配合自定义Loader（如Babel转换）和Plugin（如编译日志），最终将多个JS模块打包成单一文件。项目包含完整的目录结构、配置文件和示例代码，展示了Webpack的基本工作原理。运行node index.js即可在dist目录生成最终的bundle.js文件。
2025-07-01 21:36:36
421
原创 Webpack原理剖析与实现
Webpack5的核心架构包含Compiler、Compilation、Module、Chunk等关键模块，通过Tapable插件机制实现扩展功能。Compiler类(lib/compiler.js)协调整个编译流程，Compilation类(lib/compilation.js)处理具体编译逻辑，Module类表示独立模块。Loader在模块编译阶段执行转换，Plugin通过生命周期钩子(emit/compile等)扩展功能。
2025-06-30 23:53:00
412
原创 Webpack优化详解
Webpack5优化配置指南：本文详细介绍了Webpack5在本地开发和线上构建中的优化策略。本地开发方面，建议开启模块热替换(HMR)、使用SourceMaps、优化编译速度、配置持久化缓存和增量编译。线上构建优化包括启用生产模式、代码分割、压缩JS/CSS、TreeShaking、懒加载、图片压缩等。文章还提供了完整的开发环境和生产环境配置示例，帮助开发者提高构建效率和项目性能。这些优化措施能显著提升开发体验和应用性能。
2025-06-30 21:38:43
231
原创 Webpack中plugin详解
本文系统介绍了Webpack插件(Plugin)的开发与应用。首先讲解了Plugin的基础概念，它是通过监听Webpack生命周期事件来扩展功能的机制，并展示了基本插件结构。接着列举了HtmlWebpackPlugin、CleanWebpackPlugin等8个常用插件及其配置方式。深入部分解析了Plugin实现原理，重点说明了Compiler和Compilation对象的作用，以及如何利用Webpack的事件流机制。
2025-06-29 22:42:32
579
原创 Webpack中的Loader详解
Webpack中的Loader是用于处理模块转换的工具，能将不同格式的文件（如TypeScript转JavaScript、SCSS转CSS）转换成Webpack可识别的模块。Loader通过链式调用，每个Loader专注于单一转换任务，如sass-loader、css-loader和style-loader依次处理SCSS文件。常用Loader包括babel-loader（ES6转ES5）、file-loader（处理文件资源）等。
2025-06-29 18:05:42
906
原创 Webpack 核心与基础使用
本文详细介绍了Webpack5的核心配置及使用方法。Webpack是一个模块打包工具，可将JavaScript、CSS等资源打包成浏览器可用的文件。文章涵盖了Webpack的安装（推荐本地安装）、基本目录结构创建，以及webpack.config.js中的核心配置项：Entry（单/多入口）、Output（输出路径和文件名）、Module（处理各种文件类型的rules规则）、Resolve（模块解析路径）等。同时提供了完整的配置示例，包括开发和生产模式的运行方式，帮助开发者快速上手Webpack打包工具。
2025-06-28 19:18:38
505
原创 Webpack中常用的Loader和Plugin
本文介绍了Webpack中常用的Loader和Plugin及其分类。Loader部分详细说明了BabelLoader、CSS/StyleLoader、SassLoader等常见工具的使用方法，并按功能分为文件加载、模板编译、脚本转换、样式处理等类别。Plugin部分则列举了HTMLWebpackPlugin、CleanWebpackPlugin等核心插件，并分为行为修改、优化和其他三大类。文章通过具体配置示例，展示了Webpack生态系统中不同工具的实际应用场景和配置方式，为前端工程化构建提供了实用参考。
2025-06-26 00:37:26
1230
原创 Webpack 构建过程详解
Webpack打包流程详解：从配置读取到代码输出，Webpack分为7个关键阶段。首先初始化配置和插件系统，然后构建模块依赖图并进行编译转换。通过代码拆分生成chunk后，Webpack进行代码压缩、TreeShaking等优化处理，最终输出打包文件。示例配置展示了如何结合Babel、CSS提取和图片处理等loader，以及Terser、SplitChunks等优化插件实现高效打包。开发阶段还可启用DevServer实现热更新。整个流程实现了前端资源的模块化管理和性能优化。
2025-06-25 23:47:16
903
原创 Webpack 核心概念
Webpack是一个模块打包工具，核心概念包括入口(Entry)、输出(Output)、加载器(Loaders)和插件(Plugins)。入口定义构建起点，输出指定打包结果存放位置，加载器处理非JS文件，插件扩展功能。其他重要特性有开发/生产模式(Mode)优化、模块化处理(Modules)、依赖图(Dependency Graph)、热模块替换(HMR)和代码分割(Code Splitting)。这些功能使Webpack能高效管理项目资源，优化构建流程，适合现代前端开发需求。
2025-06-25 23:22:51
389
原创 Python中数字常用的操作方法
Python提供了全面的数字处理方法，主要包括数字类型、运算、函数和转换四类操作。支持整数、浮点数、复数等数字类型，提供加减乘除等基础运算，以及幂运算、取模等高级运算。math模块包含丰富的数学函数，如平方根、对数、三角函数等。Python还支持类型转换、数字格式化输出和随机数生成功能。这些方法覆盖数值计算的基础需求，是数据分析和科学计算的重要基础。
2025-06-25 10:51:57
226
原创 Vite 简版手写
要实现一个简版的 Vite 工具，我们需要分解任务，包括参数解析、代码转换、模块解析和插件机制。开发环境使用 esbuild，构建使用 rollup，同时使用 postcss 处理 CSS。
2025-06-23 22:01:23
222
1
原创 Vite 原理深入剖析
Vite源码架构主要由开发服务器、模块解析、构建工具链和插件系统四大模块组成。开发服务器基于Node原生http模块(server/index.ts)，负责处理请求和热更新；模块解析(moduleRewrite.ts)处理ES模块转换；生产构建使用Rollup(build.ts)进行打包优化；插件系统(plugins/index.ts)提供功能扩展机制。核心特性包括预构建优化(optimizer/index.ts)加速开发体验，以及基于ESM的按需加载。
2025-06-22 21:18:38
822
原创 Vite 插件配置与开发
Vite插件开发指南：扩展构建功能的最佳实践 Vite插件基于Rollup插件体系扩展，支持开发和生产环境功能集成。开发前需熟悉Rollup插件生命周期，优先检查现有方案避免重复开发。关键开发要点包括： 通过vite.config.js配置插件，支持组合多个插件 提供文件转换、虚拟模块等常用模式示例 区分通用钩子（如buildStart）和Vite特有钩子（如configureServer） 强调插件命名规范、执行顺序控制和路径规范化 推荐使用vite-plugin-inspect调试插件 开发过程中可利用
2025-06-22 15:00:46
939
原创 Vite 核心与基础使用
Vite是一款创新的前端构建工具，采用"bundleless"设计理念，通过原生ES模块支持显著提升开发效率。文章详细介绍了从零搭建Vite项目的完整流程，包括创建目录结构、安装依赖、配置React/Vue基础文件、编写vite.config.js配置文件等核心步骤。同时解析了Vite的核心配置项：插件系统(plugins)、模块解析(resolve)、开发服务器(server)、构建选项(build)、CSS处理、全局常量定义等功能模块。
2025-06-22 13:37:23
971
原创 深入理解前端理念bundleless
Bundleless是前端开发的新趋势，它利用浏览器对ES模块的原生支持，减少或去除传统打包步骤。优势包括开发快速反馈、流程简化及模块按需加载，但生产环境仍面临性能和兼容性挑战。现代工具如Vite在开发阶段采用bundleless，生产阶段仍打包优化。Bundleless代表了轻量灵活的现代开发方式，并非完全取代打包，而是根据场景灵活选择，提升开发效率与体验。
2025-06-22 10:25:52
573
原创 Python集合常见操作方法
Python集合是一种高效的无序、不重复元素数据结构。常用操作包括：使用{}或set()创建集合；add()/update()添加元素；remove()/discard()删除元素；集合运算如并集(|)、交集(&)、差集(-)和对称差集(^)；子集/超集判断；以及成员测试(in操作)等。集合基于哈希表实现，查找时间复杂度为O(1)，适用于去重和快速成员检查。此外，frozenset()可创建不可变集合。这些特性使集合成为处理唯一性数据的理想选择。
2025-06-22 09:22:40
225
原创 Python元组常用操作方法
摘要：元组是Python中不可变的有序序列，与列表类似但创建后不可修改。主要特点包括：1)使用圆括号创建，单元素元组需加逗号；2)支持索引、切片、连接等基本操作；3)仅提供count()和index()两个方法；4)支持解包操作；5)可作为字典键；6)若包含可变对象（如列表），可变对象内容可修改。元组的不可变性使其适用于需要数据保护的场景。
2025-06-22 00:08:05
313
原创 Python字典常用操作方法
Python字典(dict)操作指南 摘要：字典是Python中以键值对存储数据的核心数据类型。本文总结了字典的常用操作方法：创建字典的多种方式；通过键或get()方法访问元素；使用赋值或update()添加/修改元素；del、pop、clear等删除操作；in关键字检查键存在性；三种遍历方式(keys/values/items)；字典推导式创建新字典；以及复制、长度获取等实用方法。掌握这些基础操作能有效提升Python编程效率，适用于数据处理、配置管理等场景，是Python开发者必备的核心技能。
2025-06-21 23:18:35
285
原创 Python列表常用操作方法
Python列表(list)是重要的数据结构，提供了丰富的操作方法。摘要涵盖：1)创建空列表、数字列表、混合列表和嵌套列表；2)访问元素(索引、切片)；3)修改列表(赋值、append、insert)；4)删除元素(del、remove、pop)；5)列表操作(连接、重复)；6)常用方法(extend、index、sort等)；7)列表推导式；8)其他操作(len、in、max等)。掌握这些方法能高效处理各种列表操作任务。
2025-06-21 22:08:44
752
原创 Python中字符串常用的操作方法
摘要：本文总结了Python中常用的字符串操作方法，包括：1）大小写转换（lower/upper/title等）；2）查找替换（find/replace）；3）字符串判断（isalpha/isdigit）；4）分割连接（split/join）；5）空白处理（strip）；6）对齐填充（center/zfill）；7）格式化（f-string/format）；8）其他操作（len/in/count）。所有方法均返回新字符串而不改变原对象，这些功能为文本处理提供了高效工具。
2025-06-21 21:44:05
343
原创 Vite 构建工具：ESbuild 与 Rollup 的选择及其优势分析
Vite采用双引擎架构：开发时用ESbuild实现极速编译，提升开发效率；生产环境切换至Rollup，利用其成熟的tree-shaking、代码拆分和丰富插件体系生成优化代码。这种设计在开发速度和生产质量间取得平衡，开发阶段追求即时反馈，构建阶段注重性能优化，体现了现代前端工具区分开发与生产流程的设计理念，既保证了开发体验又确保了最终产出的代码质量。
2025-06-17 00:38:27
467
原创 Vite的核心概念
Vite是一个创新的前端构建工具，通过原生ES模块支持实现快速启动和按需编译，显著提升开发效率。其核心特性包括：1）即时热更新（HMR）保持开发流畅性；2）基于Rollup的插件系统增强扩展性；3）按需编译策略优化资源加载；4）生产环境采用Rollup打包确保性能；5）支持.env环境变量管理。Vite专为现代浏览器设计，结合ESM原生支持与高效构建流程，成为提升前端开发体验的理想选择。
2025-06-17 00:13:47
1118
1
原创 React 中除了react-router还有哪些路由方案
摘要：本文介绍了React开发中除react-router外的两个替代路由方案。@tanstack/router提供了强大的TypeScript支持和类型安全导航等高级特性，适合复杂应用。wouter则以轻量级著称(仅2.1KB)，支持React和Preact，提供简洁的hook API。两者都借鉴了react-router的设计理念，但在特定场景下具备独特优势。文章包含基础使用示例和原理分析，帮助开发者根据项目需求选择合适的路由方案。
2025-06-15 23:16:51
681
1
原创 手写简版React-router
本文实现了一个简化版ReactRouter，包含BrowserRouter、Routes/Route、Link、useRoutes和useParams等核心组件。BrowserRouter利用HistoryAPI管理路由状态，Routes组件匹配当前路径并渲染对应Route组件，Link实现导航功能，useRoutes和useParams提供hook方式的路由访问。文章还提供了路径匹配函数matchPath的实现，并通过示例应用演示了基本用法。
2025-06-15 22:32:29
322
原创 React-router实现原理剖析
React-router实现的核心在于路由管理机制，主要包括路由映射、变更监听、操作方法及存储四个方面。BrowserRouter通过History对象管理浏览器路由，利用pushState/replaceState变更路由，监听popstate事件响应路由变化。MemoryRouter则采用内存存储方式实现类似功能，但独立于浏览器历史记录，主要处理路由记录的压入和跳转逻辑。两种路由方式通过统一的API接口封装，确保使用体验一致性。
2025-06-15 21:52:58
441
原创 React-router 多类型历史记录栈
React Router提供四种路由管理方案：1）createBrowserRouter使用浏览器原生历史API，需配合Nginx处理静态资源；2）createHashRouter基于URL哈希值，不推荐生产环境使用；3）createMemoryRouter将路由状态保存在内存中，刷新后丢失；4）createStaticRouter专为SSR设计，处理服务端路由。前两者适用于客户端，后两者分别针对测试环境和服务器渲染场景。
2025-06-15 19:36:58
338
原创 React-router 基础使用
React-router V6.23.1 是 React 应用的路由管理标准库。文章详细介绍了其安装方法（npm install react-router-dom）和基本使用，包括 BrowserRouter、Routes/Route、Link 等核心组件的用法。主要内容包含：1）基础路由配置示例；2）主要 API 如 Outlet（嵌套路由）、useParams（获取路由参数）、useNavigate（编程导航）等功能说明；3）动态路由和路由保护实现；4）三种路由定义方式......
2025-06-15 18:09:48
637
原创 React 动态路由的使用和实现原理
本文介绍了现代Web开发中的动态路由技术，重点讲解了其在React应用中的实现原理和使用方法。通过示例代码演示了如何使用React Router的useParams Hook和Route组件来实现动态路由，如/users/:id路径的参数提取和组件渲染。文章分析了动态路由的路径匹配机制和实现要点，并强调其优势：灵活性高、便于实现参数化页面，能提升单页应用的用户体验和导航效率。动态路由是构建复杂Web应用的重要技术，掌握其原理有助于开发更丰富的交互功能。
2025-06-15 13:28:35
512
原创 React-router、React-router-dom、React-router-native之间的区别
React路由库主要分为三种：1) react-router是核心库，提供基础路由功能；2) react-router-dom针对浏览器环境，支持历史管理和链接组件，适用于SPA开发；3) react-router-native专为ReactNative设计，支持原生导航行为。开发者应根据项目运行环境选择对应库，浏览器应用选-dom，原生应用选-native。三个库都基于核心react-router，但各自扩展了环境特定的功能。
2025-06-15 13:12:13
358
原创 React-router 路由历史的模式和原理
本文概述了React Router中的四种路由历史模式：Browser History、Hash History、Memory History和Static History。每种模式都有其独特的实现方式和适用场景。Browser History利用HTML5 API创建真实URL，适合SEO；Hash History通过URL的hash部分模拟路径，简单易用；Memory History将历史记录保存在内存中，适用于非浏览器环境；Static History专为服务端渲染设计。
2025-06-15 11:51:55
909
原创 React 第三方状态管理库的比较与选择
本文对比了5种主流前端状态管理库的特性。Valtio采用Proxy实现响应式状态管理，适合中小项目；XState基于状态机理论，适用于复杂业务场景；MobX提供自动化响应式更新，适合中大型应用；Recoil专为React设计，支持细粒度状态管理；Zustand强调简洁灵活，适合轻量需求。每种方案各有优劣，开发者应根据项目规模、复杂度及团队熟悉度等因素选择合适工具，小型项目可选Valtio/Zustand，复杂场景适合XState/MobX，React生态推荐Recoil。
2025-06-15 00:04:24
1085
原创 Redux 原理深度剖析
本文介绍了Redux的核心实现和应用方法。首先定义了Action和Reducer类型，展示了如何创建store并实现getState、dispatch、subscribe等基本功能。通过combineReducers合并多个reducer，使用compose组合函数和applyMiddleware应用中间件。示例代码演示了一个计数器reducer和日志中间件的用法。接着讲解了如何将Redux与React结合，通过自定义Hook useReduxStore订阅状态变化。最后简要提及了异步处理方案和Mantin
2025-06-14 22:00:51
630
原创 React 集中状态管理方案
React基础状态管理方案适用于简单项目，但随着项目复杂度增加，集中状态管理成为更优选择。它旨在不同组件间共享状态，提升状态管理的效率和可维护性。当多个组件需要频繁共享或更新相同状态时，集中状态管理尤为适用。
2025-06-12 23:40:18
1441
原创 React 基础状态管理方案
本文介绍了React三大状态管理Hook：1. useState用于管理简单状态，提供状态变量和更新函数；2. useReducer适合复杂状态逻辑，通过reducer函数管理状态；3. useContext实现全局状态共享，避免props层层传递。文章通过计数器示例展示了各Hook的用法，并提供了一个综合应用场景（用户登录、主题设置、计数器）的组合使用方案。最后提出优化建议：对Context进行合理拆分，避免不必要的渲染，并推荐根据项目规模选择合适的Hook组合方案。
2025-06-12 21:54:45
819
原创 React 状态管理指南：Redux 原理与优化策略
本文总结了React常见的状态管理方案及其适用场景，包括useState、useReducer、Context API、Redux、MobX等，并提出了选择方案时应考虑项目规模、状态复杂度、性能需求和团队熟悉度等原则。重点分析了Redux的核心概念（单一状态树、纯函数reducer、动作action、中间件机制）和数据流特点。
2025-06-11 23:56:55
1130
原创 React 19 新特性
React19带来多项创新特性：1）Actions简化异步处理，自动管理状态；2）useOptimistic Hook实现乐观UI更新；3）use API直接读取异步资源；4）稳定支持服务器组件提升性能；5）无缝集成Web组件；6）组件内直接管理SEO元数据；7）样式表优先级控制；8）任意组件支持异步脚本。这些改进显著优化开发体验、应用性能和SEO能力，同时强化了异步数据处理能力。
2025-06-11 00:03:59
432
原创 React 中的TypeScript开发范式
摘要：TypeScript在React开发中能显著提升代码质量，通过类型检查确保组件可靠性。文章介绍了React+TypeScript的项目初始化、组件类型定义(函数/类组件)，重点讲解了泛型在灵活组件(如通用列表)中的应用和infer的类型推断技巧。通过综合示例展示了如何结合泛型与infer创建类型安全的组件，并提供了针对React优化的tsconfig配置建议，包括严格模式、路径别名等关键设置，帮助开发者构建更健壮的React应用。
2025-06-10 23:22:37
653
原创 深入理解 React 样式方案
React样式方案选型指南：本文对比了4种主流React样式方案的优缺点。1）内联样式简单直观，适合小型项目，但功能有限；2）CSS Modules提供局部作用域，适合中大型项目，配置较复杂；3）CSS-in-JS（如styled-components）组件化程度高，功能强大但性能开销大；4）TailwindCSS开发效率高，适合各类项目，但灵活性受限。建议根据项目规模、团队熟悉度和样式需求进行选择。
2025-06-09 22:39:56
1371
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人