- 博客(106)
- 收藏
- 关注
RSS订阅原创 自己的服务器部署了Excalidraw，你确定不试试？
它的特色在于提供了一种类似手绘的视觉效果，使得制作的图表看起来更加自然和非正式，适合创意讨论、头脑风暴以及远程协作场景。Excalidraw强调易用性和简洁性，让用户能够快速上手并开始绘制图形，无需复杂的界面学习过程。这么好的东西，当然得分享出来，于是乎我在自己的服务器上部署了Excalidraw和Excalidraw-room，支持分享给别人同时进行图设计。由于Excalidraw并不支持汉字的手写风格，我使用了云寒禅体字体支持汉化，我相信你会喜欢这个字体的。
2024-05-09 10:06:52
502
2
原创 使用 usePrevious 实现 React 函数组件中上一状态值的追踪
在 React 开发过程中，有时我们需要在函数组件的某个阶段或事件处理函数中访问到上一次的状态值。本文将详细介绍 usePrevious 的实现原理与应用，并以实际代码示例展示其在 React 函数组件中的使用。是 React 中处理副作用的 Hook，它允许我们在函数组件中执行那些需要清理的操作，如订阅、手动更改 DOM、设置定时器等。是 React 提供的一个 Hook，，用于创建一个可变的引用对象。，并在后续的渲染周期中访问到它，不受重新渲染的影响。依然显示更新前的值，实现了展示上一状态的功能。
2024-04-17 12:41:53
918
1
原创 5分钟，为你的博客增加评论功能
如果你有自己的个人博客网站，为了增加互动，评论功能是必不可少的。可以借助giscus这一工具，快速为您的博客添加评论功能，无需从零开始开发复杂的UI页面、设计数据库及搭建后端服务，轻松提升博客的互动性。作为一款基于GitHub Discussions的评论系统，giscus对个人用户完全免费，且遵循MIT开源许可协议，确保了使用的透明性和灵活性。giscus提供简洁易用的配置界面和丰富的文档支持，只需几步简单的设置，即可将评论功能无缝嵌入到您的博客中，大大节省了从头开发所需的时间和精力。
2024-04-16 12:09:56
574
原创 从传统方案到scrollIntoView：元素锚点与显示区域的优化之旅
当用户点击链接时，浏览器会自动滚动页面，使带有对应ID的元素处于视口顶部。本文将首先分析现有的元素锚点到显示区域的方案及其存在的问题，然后详细探讨使用scrollIntoView方法的优势，并通过实例说明其应用。随着Web技术的发展，scrollIntoView方法以其简洁的接口、高度的可控性和良好的性能，为元素锚点到显示区域的问题提供了现代化的解决方案。作为原生方法，scrollIntoView通常比手动计算和滚动更高效，浏览器能够对其进行内部优化，减少不必要的计算和渲染开销，提升用户体验。
2024-04-08 20:20:49
823
原创 探索Docusaurus：源自Facebook的高效静态文档站点构建利器
在开源世界中，优秀的文档是项目成功的重要基石。它提供了开箱即用的模板和工具链，只需几步简单的配置，就能将 Markdown 格式的文档转换为功能齐全、设计精良的静态网页。产品手册：无论是 SaaS 产品还是硬件设备，Docusaurus 都能助你打造用户友好的帮助中心，提升产品的易用性和客户满意度。个人博客：借助 Docusaurus，你可以轻松搭建专业的技术博客，专注于创作，让技术之美通过优雅的界面传递给读者。Docusaurus的确是一个非常棒的文档生成器，有需要的朋友可以用起来，这是一件很酷的事情。
2024-04-02 20:57:07
1217
2
原创 一个包一条命令，我实现了对整个前端项目代码的校验
在一个多人协作的项目中，代码风格的不统一可能导致频繁的代码冲突、难以理解他人的代码以及不必要的代码审查讨论。只需运行一条命令，@x.render/render-lint即可根据项目所使用的前端框架（如React、Vue）、技术栈以及团队偏好，自动生成完整的ESLint、Stylelint、Commitlint配置文件及相关依赖。面对上述痛点，我开发了@x.render/render-lint，旨在极大地简化代码校验与风格统一的配置流程，让开发者能够快速启动高质量的项目，将精力集中在实际业务开发上。
2024-04-01 19:35:57
846
2
原创 57 webpack中常用的工具
常用工具在这里对常用的模块工具做一下总结，方便我们找到自己所需的工具。dotenv（https://www.npmjs.com/package/dotenv）:通过env文件配置环境变量，方便脚本文件使用。cross-env（https://www.npmjs.com/package/cross-env）：提供一个设置环境变量的scripts，可以跨平台的设置环境变量。stylelint（https://stylelint.io）：用于检查css代码。webpack-dev-middlewar
2021-12-16 21:52:14
1197
原创 56 webpack中常用的插件
常用plugin在这里对常用的Plugin做一下总结，方便我们找到自己所需的Plugin。文件处理相关copy-webpack-plugin（https://www.npmjs.com/package/copy-webpack-plugin）：复制指定文件到输出目录中的指定位置。clean-webpack-plugin（https://www.npmjs.com/package/clean-webpack-plugin）：重新构建的时候清除上一此的构建结果。zip-webpack-plugin（
2021-12-16 21:51:13
320
原创 55 webpack中常用的Loader
常用Loader在这里对常用的Loader做一下总结，方便我们找到自己所需的Loader。文件处理相关file-loader（https://www.npmjs.com/package/file-loader）：转换webpack不能识别的文件，代码中可以是使用相对URL去引用文件。url-loader(https://www.npmjs.com/package/url-loader)：功能和file-loader类似，唯一的区别是在文件很小的时候，以base64的方式将文件注入到代码中。ra
2021-12-16 21:48:52
1164
原创 54 webpack原理-输出文件简单分析
输出文件简单分析本章节将简单揭秘一下，为什么通过Webpack输出的打包文件能直接在浏览器运行，其输出文件到底有什么魔法？为了方便阅读输出文件的源码，在此在这里对输出文件进行了一些格式改造，但是并没有修改其功能，代码如下：(function (modules) { // 启动匿名函数 // 从异步加载的文件中安装模块 function webpackJsonpCallback(data) { // 异步加载的文件中存放的需要安装模块对应的Chunk ID
2021-12-16 21:44:25
734
2
原创 53 webpack原理-Compiler文件分析
Compiler文件分析之前说到Webpack把构建任务交给了Compiler进行处理，选取Compiler源码进行分析，看看具体做了一些什么，精简过后的源码如下："use strict";// 省略其他引入const { Tapable, SyncHook, SyncBailHook, AsyncParallelHook, AsyncSeriesHook} = require("tapable");const Compilation = require
2021-12-16 21:37:50
354
原创 52 webpack原理-Webpack初始化文件分析
Webpack初始化文件分析Webpack模块位置下的bin目录中的webpack.js为Webpack的初始化文件，该文件就是Webpack-cli工具启动Webpack构建所依赖的文件，Webpack的工作就是从该文件开始的，其内容如下："use strict";const Compiler = require("./Compiler");const MultiCompiler = require("./MultiCompiler");const NodeEnvironmentPlugin
2021-12-16 21:31:15
1081
原创 51 webpack原理-Webpack执行文件分析
Webpack执行文件分析通过查看使用Npm下载的Webpack模块的package.json文件，可以确定Webpack的执行文件为webpack/bin/webpack.js，其内部代码大致如下：#!/usr/bin/env nodeconst runCommand = (command, args) => {/**省略相关代码*/ };// 判断所依赖的cli工具是否安装，例如webpack-cliconst isInstalled = packageName => {/**省
2021-12-16 21:26:54
174
原创 50 webpack核心API-require.context
require.contextWebpack默认支持ES6，CommonJs，AMD等模块语法，所以你可以使用这些模块语句来编写你的项目。有关于这些模块对应的方法的使用，在这里不做阐述，在这里针对Webpack中require.context的使用进行简单介绍。require.context方法会创建一个上下文，允许通过检索一个目录来引入对应的文件。其拥有三个参数，含义如下：directory：需要检索的目录useSubdirectories：是否检索子目录regExp: 匹配文件的正则表达式
2021-12-16 21:22:14
220
原创 49 webpack核心API-Node.js API
核心APIWebpack是基于Node.js的进行构建的，其提供了相关的Node.js API ，当你需要自定义构建或开发流程时，Node.js API非常有用，因为此时所有的报告和错误处理都必须自行实现，Webpack仅仅负责编译的部分。所以Stats配置选项不会在Node.js API调用中生效。其实在我们的9实战项目中已经使用Node.js API ，在scripts目录下build.js下有如下内容：const webpack = require("webpack");const compi
2021-12-16 21:17:40
930
原创 48 webpack优化-打包可视化
打包可视化使用webpack-bundle-analyzer插件可以对我们的打包结果可视化，通过观察生成的网页，如下所示：通过观察该网页我们可以得出：打包文件都包含了什么；每个文件在总体的占比；模块之间的依赖关系；每个文件Gzip后的大小。其使用非常简单，在安装该插件以后，只需在Plugins中配置即可：module.exports = { plugins: [new BundleAnalyzerPlugin()]}如果你想获得更精细化的打包信息，比如modules，ch
2021-12-16 21:11:50
392
原创 47 webpack优化-Loader相关优化
Loader相关优化Loader的功能是转换Webpack不能识别的模块，转换过程就是一个读写操作，是比较耗时的，所以在这里介绍一下相关Loader的优化。OneOfWebpack中的Loader默认是会被每一个需要处理的文件都过一遍的，就像Switch语法中没有Breack一样，文件会被所有的Loader检测一遍，该操作就会导致构建的缓慢。可以使用oneOf来改变这种检测机制，oneOf的作用就相当于breack。使用oneOf对Loader的配置做出整体优化，就会使得文件被对应的Loader处理
2021-12-15 21:56:12
415
原创 46 webpack优化- Scope Hoisting
Scope HoistingWebpack构建出来的文件源码，比如演练是实战中的build.js里面的内容里面包含了大量的函数声明语句，其原因是项目中引用了许多模块，每一个模块都有自己的作用域，导致了代码体积变大，内存开销也较大（函数作用域会消耗内存）。幸运的是Webpack使用Scope Hoisting技术解决了这个问题。Scope Hoisting可以分析模块之间的依赖关系，最大程度地把零散的模块合并到一个函数中去，如此以来减少了函数声明代码，从而使得输出代码体积更小，内存的开销也变小了。在mo
2021-12-15 21:48:04
291
原创 45 webpack优化-按需加载
按需加载网页常常有这种场景，用户需要和网页进行交互，才会出现别的内容，如果用户没有进行交互，那么这部分内容是不会出现的。如果把这部分内容在网页加载的时候一同加载，那么加载就会缓慢，而且这部分内容无法保证是100%要呈现出来的。此时使用按需加载就会很好解决这个问题，需要的时候才去异步加载，避免了网页加载缓慢的问题。使用import()语句即可实现懒加载，之前我们已经使用了按需加载，如下所示：// 懒加载测试const btns = document.getElementById("home-dialo
2021-12-15 21:45:46
1102
原创 44 webpack优化-代码压缩
代码压缩为了提升页面的加载速度，需要对输出资源进行相应的压缩。一般来说，Webpack构建出的资源分为JavaScript文件，Css文件和其他类型的文件，需要针对不同类型的文件进行合理的压缩，以此来提升用户体验。JavaScript压缩之前介绍过Webpack的配置中mode的值会启用Webpack内置的优化手段，比如我们要构建生产环境的项目时，我们需要设置mode为production，这个时候输出的资源是经过一定程度上压缩的，其原因是当mode的值为production的时候，Webpack内部
2021-12-15 21:43:17
385
原创 43 webpack优化-代码分割
代码分割到目前为止输出的build.js里面包含了javaScript和Css代码，同时项目中使用的依赖模块也会被打包到build.js中导致build.js比较庞大，在加载build.js的时候会耗时较多，导致页面加载缓慢。所以需要对输出文件进行合理分割，生成多个多类型文件，然后充分利用浏览器的并行请求机制，同时请求这些文件，提升页面的加载速度。对Css的分割使用Mini-css-extract-plugin对于Css代码的分割，其配置如下：use: [ MiniCssExtractPlu
2021-12-15 21:39:20
252
原创 42 webpack优化-自动刷新优化
自动刷新优化控制刷新方式的就是DevServer里面的inline配置，默认为true，所以默认自动刷新使用的代理客户端。其机制是为每一个Chunk注入代理客户端（因为DevServer不知道网页依赖哪些Chunk，所以就给每一个Chunk注入代码客户端代码），正因为如此，当我们项目输出很多Chunk的时候，就会导致构建缓慢。当设置inline为false的时候，这个时候刷新机制就变成了通过刷新网页内嵌的iframe来达到刷新页面的效果。配置如下：devServer: { open: true
2021-12-15 21:32:15
277
原创 41 webpack优化-丰富构建操作
丰富构建操作针对不同环境的构建，我们进行了分配置文件构建的优化，这是一种好的解决办法。但是有些场景这样配置就显得力不从心了，比如之前的配置都是通过webpack或者webpack-dev-server命令去执行不同环境的构建，如果我们要在构建的时候添加一些额外的参数，去让构建适配特殊场景处理起来就比较棘手。上一节的优化不仅区分了环境配置，而且抽离了构建配置，在上一节的基础上，本节将会继续扩展，舍弃传统的用Webpck相关命令的方式执行构建，而是通过脚本文件去执行构建，在脚本文件中可以做一些额外的操作，以
2021-12-15 21:30:10
239
原创 40 webpack优化-区分环境
区分环境用户关心的是程序的功能服务和使用体验，而对开发者而言，关心的是程序是否方便调试，所以一个项目在不同的环境运行需要表现出与环境相关的特性。比如为了避免开发过程中对线上的数据造成影响，不同的环境开发代码和后台进行交互的接口地址应该是不同的，所以针对项目区分环境是十分有必要的。在之前章节介绍过相关的环境变量的使用和设置，其中我们可以使用process.env来区分环境，做一些优化操作。如下所示：const isProd = process.env.NODE_ENV === "production";
2021-12-15 21:23:39
142
原创 39 webpack优化-Thread-loader
Thread-loaderWebpack的构建过程涉及到大量的文件读写操作，系统的I/O操作是十分耗时的，当要操作的文件数量变得多起来的时候，Webpack的构建慢的文件就会变得更严重。由于JavaScript是单线程模型运行的，只能一个一个的排序处理任务，不能同时处理多个任务。像Java那样使用多线程进行任务处理显然是不可能的，退而求其次，我们想到使用多进程来并发去处理任务，子进程处理完成后将结果在返回给主进程，这样子就提升了构建效率。使用Thread-loader便可以实现我们上面的想法，其配置如下
2021-12-15 21:21:20
2801
原创 38 webpack优化-动态链接库
动态链接库动态链接库可以拆成动态链接和库，总的来说就是抽象出来的一个存放各种模块的动态链接的库。对于某些模块可能一段时间不会出现更新或者不会进行更新，使用这些模块的时候，每次构建都会出打包这些模块，导致构建性能降低。我们可以把这些稳定的模块提前打包好，然后给出一份链接的清单，在以后构建的时候，就去根据清单寻找对应的打包好的模块，避免每次都进行这些模块的打包，以此提升构建性能。动态链接库抽象出来就是有一个专门的库存放这些打包好的模块，然后提供模块的链接，确保构建的时候能够找到对应的模块。要实现动态链接，
2021-12-15 21:18:29
381
原创 37 webpack优化-缩小文件的查找范围
缩小文件的查找范围Webpack会按照默认的查找范围从入口文件开始递归查询和处理依赖，当使用import/require等导入语句的时候，Webpack会根据导入语句去导入对应的模块，之后根据导入文件的后缀，在去使用对应的loader去解析文件。当我们的项目变得十分庞大的时候，这种处理是十分耗时的，而这种处理是无法避免的，所以需要从查找范围入手，减少Webpack查找的时间，使得构建加速。Loader作用范围缩减开发项目，我们很明确我们要处理的各种文件的位置，同时也知道那种文件需要用Loader进行处
2021-12-14 22:50:01
453
原创 36 webpack单页应用实战
演练实战在此章节，我们将对前面的学习进行一次总结。把前面所学的知识进行综合使用，完成一次单页面应用的构建。配置代码如下：const path = require("path");const HtmlwebpackPlugin = require("html-webpack-plugin");const { CleanwebpackPlugin } = require("clean-webpack-plugin");const CopywebpackPlugin = require('copy-w
2021-12-14 22:39:59
325
原创 35 webpack中输出资源处理
输出资源处理Webpack的构建会输出各种资源，之前我们学习了如何把同一类型的资源进行归类输出，这对于项目的整体结构是很有必要的。但是还有一些问题需要解决：之前构建的资源会一直保存在构建文件中，我们需要手动删除这些过期的资源。项目中还会涉及到一些静态资源的处理，比如在单页面应用的时候，会短暂出现首屏加载白屏问题，为了提升用户体验，会使用图片给出一个loading动画,而这部分的涉及到的资源都是属于静态资源，不需要参与Webpack的构建，每次构建之后，需要手动拷贝该文件内容到输出目录。大多数时候
2021-12-14 22:38:06
207
原创 34 服务端运行Webpack
服务端运行Webpack之前介绍过DevServer便于搭建一个小型Http服务器，便于我们本地开发调试。DevServer是基于Express中Webpack-dev-middlewar中间件实现的。下面给出一份如何使用Webpack-dev-middleware在Express搭建的Node服务端程序中应用Webpack的代码：const webpack = require('webpack');const middleware = require('webpack-dev-middleware
2021-12-14 22:33:45
130
原创 33 webpack中的热更新
自动刷新和热更新项目自动刷新并不是在Webpack中才提出的，在之前WebStrom等开发工具就已经借助了浏览器提供的接口实现页面自动刷新。除了利用浏览器接口实现，还有向开发的网页中注入代理客户端，通过代理客户端去刷新整个页面。还可以把开发的网页装进一个iframe中，通过刷新iframe去查看最新效果。前面介绍的DevServer支持代理客户端和iframe方法，默认使用代理客户端方法。在之前的章节我们介绍了如何对文件进行监听,使用了DevServer后会自动启用Webpack的文件监听功能，同时会在
2021-12-14 22:28:41
374
原创 32 webpack中的离线应用
离线应用为了追求极致的使用体验，Goole推出了 Service Workers技术，是一种可以提供类似于原生应用程序(Native app)体验的网络应用程序(Web app)技术,使用该技术可以离线访问应用程序。集成该技术的项目在访问的时候可以生成对应的应用程序图标，类似于客户端程序的快捷方式。下面介绍一下如何在Webpack使用相关插件，实现一个简单的离线访问应用程序。const HtmlwebpackPlugin = require('html-webpack-plugin');const
2021-12-14 22:23:05
194
原创 31 webpack中的多页应用
多页应用之前我们的学习都是在单页面（Spa）程序的基础上进行的，在此章节，我们将介绍如何在Webpack中进行多页面应用（Mpa）的构建。配置代码如下：const HtmlwebpackPlugin = require('html-webpack-plugin');const path = require("path");module.exports = { entry: { index: './src/index/index.js', about: '.
2021-12-14 21:58:44
346
原创 30 webpack中使用Eslint
Eslint一个团队中每个人的编程习惯是不同的，那么项目中的代码就是各种风格的，这无疑增加了项目代码的维护成本。作为一个团队，应该有着统一的代码规范，让代码具有更高的可读性。单是靠程序员手动去修改不符合团队代码规范的代码，不仅耗时耗力，而且很少做到万无一失。这些代码规范的检测和修改应该交给程序帮我们去实现。本章节从JavaScript层面，介绍如何在Webpack中实现对JavaScript代码风格的格式化。对于JavaScript代码格式的校验和修改，最常用的就是Eslint。使用Eslint，开发者
2021-12-13 22:38:32
665
原创 29 webpack中的环境变量
环境变量使用Webpack构建项目的时候，往往会区分环境进行不同的构建，比如生产环境和开发环境。项目在上线之前，还需要进入测试环境，进行系统功能的检测，那么就又多了一个或者多个测试环境，不同的环境构建功能肯定是有区别的。大多数情况下，不同环境之间的配置还是有复用性的，只有少数的地方是因环境不同而变化的，使用环境变量就可以消除不同环境的配置差异，极大的复用我们的配置。本章节将针对Wabpack中涉及到的各种环境变量的定义，使用进行介绍。环境对象(Environment)当Webpack配置导出一个函数
2021-12-13 22:11:53
1010
原创 28 webpack中处理TypeScript
处理TypeScriptJavaScript发展到现在，已经十分成熟了，从传统的网页脚本，到后端服务,再到桌面客户端程序几乎到处都可以看见它的身影。它在带给我们惊喜的同时，由于其本身设计的缺陷也时常给我们带来困扰。全局变量window的使用泛滥，var定义任意类型的变量等等问题，在我们开发庞大复杂系统时候，常常让我们痛苦不堪。其间虽然出现了const，let等新特性来约束JavaScript变量定义的问题，但是始终不能像Java等语言那样做到严格的约束。TypeScript的问世改变了这一现状，严格来说
2021-12-13 21:40:57
480
原创 27 webpack中资源文件路径问题
资源文件路径问题Webpack中涉及到很多路径的操作，文件的生成路径，资源的引入路径等等，有时候配置的小差异，就会导致路径不正确的问题。同时在之前的学习中，构建出的项目文件全部是在同一个文件夹dist目录下，较好的实践是同一类型的资源应该是在一个统一的文件夹下面，比如生成的JavaScript文件全部放在同一个文件夹下面，Css文件全部放在同一个文件夹下面。此章节针对于上述两个问题给出具体的解决方案。生成资源文件夹假设项目中使用了JavaScript，Css，字体图标和其他媒体资源，我们希望在构建完成
2021-12-13 21:35:46
1538
原创 26 webpack中文件处理
文件处理开发项目的时候，会使用许多文件资源，比如各种格式的图片，Svg，字体图标等等，这些都是需要配置相应的Loader转换之后，Webpack才能够正确解析它们。在本章节，我们将介绍如何在Webpack中处理各种文件资源。处理图片资源针对各种类型的图片处理最常用的就是File-loader和Url-loader。File-loader的使用File-loader的使用很简单，如其他Loader使用一样，需要在module.rules中进行配置：module.exports = { mo
2021-12-13 21:25:38
313
原创 25 webpack中处理样式
样式处理Webpack中需要配置相应Loade对Css代码转换成Webpack能够识别的JavaScript代码。对Css模块转换最常用的两个Loader分别是Style-loader,Css-loader，其基础配置如下：module.exports = { module: { rules: [ { test: /.css$/, use: [ 'sty
2021-12-10 20:27:43
497
原创 24 浅谈Tapable
浅谈TapableTapable是Webpack中的核心工具，Webpack中许多对象扩展自Tapable类。这个类暴露Tap，TapAsync和TapPromise等方法，可以使用这些方法，注入自定义的构建步骤，这些步骤将在整个编译过程中不同时机触发。插件类型通过使用Tapable中提供的不同钩子（Hook）和Tap（Tap，TapAsync，TabPromise）方法，插件可以有着多种不同的方式运行，Compiler hooks分别记录了使用哪些Tapable钩子，指出哪些Tap方法可用。例如，
2021-12-09 21:32:17
463
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人