<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[sinat_41212418的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/sinat_41212418</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; sinat_41212418]]></copyright><item><title><![CDATA[自己的服务器部署了Excalidraw，你确定不试试？]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/138602644</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/138602644</guid><author>sinat_41212418</author><pubDate>Thu, 09 May 2024 10:06:52 +0800</pubDate><description><![CDATA[它的特色在于提供了一种类似手绘的视觉效果，使得制作的图表看起来更加自然和非正式，适合创意讨论、头脑风暴以及远程协作场景。Excalidraw强调易用性和简洁性，让用户能够快速上手并开始绘制图形，无需复杂的界面学习过程。这么好的东西，当然得分享出来，于是乎我在自己的服务器上部署了Excalidraw和Excalidraw-room，支持分享给别人同时进行图设计。由于Excalidraw并不支持汉字的手写风格，我使用了云寒禅体字体支持汉化，我相信你会喜欢这个字体的。]]></description><category></category></item><item><title><![CDATA[使用 usePrevious 实现 React 函数组件中上一状态值的追踪]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/137868336</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/137868336</guid><author>sinat_41212418</author><pubDate>Wed, 17 Apr 2024 12:41:53 +0800</pubDate><description><![CDATA[在 React 开发过程中，有时我们需要在函数组件的某个阶段或事件处理函数中访问到上一次的状态值。本文将详细介绍 usePrevious 的实现原理与应用，并以实际代码示例展示其在 React 函数组件中的使用。是 React 中处理副作用的 Hook，它允许我们在函数组件中执行那些需要清理的操作，如订阅、手动更改 DOM、设置定时器等。是 React 提供的一个 Hook，，用于创建一个可变的引用对象。，并在后续的渲染周期中访问到它，不受重新渲染的影响。依然显示更新前的值，实现了展示上一状态的功能。]]></description><category></category></item><item><title><![CDATA[5分钟，为你的博客增加评论功能]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/137819858</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/137819858</guid><author>sinat_41212418</author><pubDate>Tue, 16 Apr 2024 12:09:56 +0800</pubDate><description><![CDATA[如果你有自己的个人博客网站，为了增加互动，评论功能是必不可少的。可以借助giscus这一工具，快速为您的博客添加评论功能，无需从零开始开发复杂的UI页面、设计数据库及搭建后端服务，轻松提升博客的互动性。作为一款基于GitHub Discussions的评论系统，giscus对个人用户完全免费，且遵循MIT开源许可协议，确保了使用的透明性和灵活性。giscus提供简洁易用的配置界面和丰富的文档支持，只需几步简单的设置，即可将评论功能无缝嵌入到您的博客中，大大节省了从头开发所需的时间和精力。]]></description><category></category></item><item><title><![CDATA[从传统方案到scrollIntoView：元素锚点与显示区域的优化之旅]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/137522504</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/137522504</guid><author>sinat_41212418</author><pubDate>Mon, 08 Apr 2024 20:20:49 +0800</pubDate><description><![CDATA[当用户点击链接时，浏览器会自动滚动页面，使带有对应ID的元素处于视口顶部。本文将首先分析现有的元素锚点到显示区域的方案及其存在的问题，然后详细探讨使用scrollIntoView方法的优势，并通过实例说明其应用。随着Web技术的发展，scrollIntoView方法以其简洁的接口、高度的可控性和良好的性能，为元素锚点到显示区域的问题提供了现代化的解决方案。作为原生方法，scrollIntoView通常比手动计算和滚动更高效，浏览器能够对其进行内部优化，减少不必要的计算和渲染开销，提升用户体验。]]></description><category></category></item><item><title><![CDATA[探索Docusaurus：源自Facebook的高效静态文档站点构建利器]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/137290064</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/137290064</guid><author>sinat_41212418</author><pubDate>Tue, 02 Apr 2024 20:57:07 +0800</pubDate><description><![CDATA[在开源世界中，优秀的文档是项目成功的重要基石。它提供了开箱即用的模板和工具链，只需几步简单的配置，就能将 Markdown 格式的文档转换为功能齐全、设计精良的静态网页。产品手册：无论是 SaaS 产品还是硬件设备，Docusaurus 都能助你打造用户友好的帮助中心，提升产品的易用性和客户满意度。个人博客：借助 Docusaurus，你可以轻松搭建专业的技术博客，专注于创作，让技术之美通过优雅的界面传递给读者。Docusaurus的确是一个非常棒的文档生成器，有需要的朋友可以用起来，这是一件很酷的事情。]]></description><category></category></item><item><title><![CDATA[一个包一条命令，我实现了对整个前端项目代码的校验]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/137244185</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/137244185</guid><author>sinat_41212418</author><pubDate>Mon, 01 Apr 2024 19:35:57 +0800</pubDate><description><![CDATA[在一个多人协作的项目中，代码风格的不统一可能导致频繁的代码冲突、难以理解他人的代码以及不必要的代码审查讨论。只需运行一条命令，@x.render/render-lint即可根据项目所使用的前端框架（如React、Vue）、技术栈以及团队偏好，自动生成完整的ESLint、Stylelint、Commitlint配置文件及相关依赖。面对上述痛点，我开发了@x.render/render-lint，旨在极大地简化代码校验与风格统一的配置流程，让开发者能够快速启动高质量的项目，将精力集中在实际业务开发上。]]></description><category></category></item><item><title><![CDATA[57 webpack中常用的工具]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984939</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984939</guid><author>sinat_41212418</author><pubDate>Thu, 16 Dec 2021 21:52:14 +0800</pubDate><description><![CDATA[常用工具
在这里对常用的模块工具做一下总结，方便我们找到自己所需的工具。

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]]></description><category></category></item><item><title><![CDATA[56 webpack中常用的插件]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984904</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984904</guid><author>sinat_41212418</author><pubDate>Thu, 16 Dec 2021 21:51:13 +0800</pubDate><description><![CDATA[常用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（]]></description><category></category></item><item><title><![CDATA[55 webpack中常用的Loader]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984822</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984822</guid><author>sinat_41212418</author><pubDate>Thu, 16 Dec 2021 21:48:52 +0800</pubDate><description><![CDATA[常用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]]></description><category></category></item><item><title><![CDATA[54 webpack原理-输出文件简单分析]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984668</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984668</guid><author>sinat_41212418</author><pubDate>Thu, 16 Dec 2021 21:44:25 +0800</pubDate><description><![CDATA[输出文件简单分析
本章节将简单揭秘一下，为什么通过Webpack输出的打包文件能直接在浏览器运行，其输出文件到底有什么魔法？
为了方便阅读输出文件的源码，在此在这里对输出文件进行了一些格式改造，但是并没有修改其功能，代码如下：
(function (modules) { // 启动匿名函数

    // 从异步加载的文件中安装模块
    function webpackJsonpCallback(data) {
        // 异步加载的文件中存放的需要安装模块对应的Chunk ID
      ]]></description><category></category></item><item><title><![CDATA[53 webpack原理-Compiler文件分析]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984546</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984546</guid><author>sinat_41212418</author><pubDate>Thu, 16 Dec 2021 21:37:50 +0800</pubDate><description><![CDATA[Compiler文件分析
之前说到Webpack把构建任务交给了Compiler进行处理，选取Compiler源码进行分析，看看具体做了一些什么，精简过后的源码如下：
"use strict";
// 省略其他引入
const {
    Tapable,
    SyncHook,
    SyncBailHook,
    AsyncParallelHook,
    AsyncSeriesHook
} = require("tapable");

const Compilation = require]]></description><category></category></item><item><title><![CDATA[52 webpack原理-Webpack初始化文件分析]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984439</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984439</guid><author>sinat_41212418</author><pubDate>Thu, 16 Dec 2021 21:31:15 +0800</pubDate><description><![CDATA[Webpack初始化文件分析
Webpack模块位置下的bin目录中的webpack.js为Webpack的初始化文件，该文件就是Webpack-cli工具启动Webpack构建所依赖的文件，Webpack的工作就是从该文件开始的，其内容如下：
"use strict";

const Compiler = require("./Compiler");
const MultiCompiler = require("./MultiCompiler");
const NodeEnvironmentPlugin ]]></description><category></category></item><item><title><![CDATA[51 webpack原理-Webpack执行文件分析]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984387</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984387</guid><author>sinat_41212418</author><pubDate>Thu, 16 Dec 2021 21:26:54 +0800</pubDate><description><![CDATA[Webpack执行文件分析
通过查看使用Npm下载的Webpack模块的package.json文件，可以确定Webpack的执行文件为webpack/bin/webpack.js，其内部代码大致如下：
#!/usr/bin/env node

const runCommand = (command, args) =&gt; {/**省略相关代码*/ };
// 判断所依赖的cli工具是否安装，例如webpack-cli
const isInstalled = packageName =&gt; {/**省]]></description><category></category></item><item><title><![CDATA[50 webpack核心API-require.context]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984288</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984288</guid><author>sinat_41212418</author><pubDate>Thu, 16 Dec 2021 21:22:14 +0800</pubDate><description><![CDATA[require.context
Webpack默认支持ES6，CommonJs，AMD等模块语法，所以你可以使用这些模块语句来编写你的项目。有关于这些模块对应的方法的使用，在这里不做阐述，在这里针对Webpack中require.context的使用进行简单介绍。
require.context方法会创建一个上下文，允许通过检索一个目录来引入对应的文件。其拥有三个参数，含义如下：

directory：需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式
]]></description><category></category></item><item><title><![CDATA[49 webpack核心API-Node.js API]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984204</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121984204</guid><author>sinat_41212418</author><pubDate>Thu, 16 Dec 2021 21:17:40 +0800</pubDate><description><![CDATA[核心API
Webpack是基于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]]></description><category></category></item><item><title><![CDATA[48 webpack优化-打包可视化]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121962861</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121962861</guid><author>sinat_41212418</author><pubDate>Thu, 16 Dec 2021 21:11:50 +0800</pubDate><description><![CDATA[打包可视化
使用webpack-bundle-analyzer插件可以对我们的打包结果可视化，通过观察生成的网页，如下所示：

通过观察该网页我们可以得出：

打包文件都包含了什么；
每个文件在总体的占比；
模块之间的依赖关系；
每个文件Gzip后的大小。

其使用非常简单，在安装该插件以后，只需在Plugins中配置即可：
module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
}

如果你想获得更精细化的打包信息，比如modules，ch]]></description><category></category></item><item><title><![CDATA[47 webpack优化-Loader相关优化]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121962666</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121962666</guid><author>sinat_41212418</author><pubDate>Wed, 15 Dec 2021 21:56:12 +0800</pubDate><description><![CDATA[Loader相关优化
Loader的功能是转换Webpack不能识别的模块，转换过程就是一个读写操作，是比较耗时的，所以在这里介绍一下相关Loader的优化。
OneOf
Webpack中的Loader默认是会被每一个需要处理的文件都过一遍的，就像Switch语法中没有Breack一样，文件会被所有的Loader检测一遍，该操作就会导致构建的缓慢。
可以使用oneOf来改变这种检测机制，oneOf的作用就相当于breack。使用oneOf对Loader的配置做出整体优化，就会使得文件被对应的Loader处理]]></description><category></category></item><item><title><![CDATA[46 webpack优化- Scope Hoisting]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121962622</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121962622</guid><author>sinat_41212418</author><pubDate>Wed, 15 Dec 2021 21:48:04 +0800</pubDate><description><![CDATA[Scope Hoisting
Webpack构建出来的文件源码，比如演练是实战中的build.js里面的内容里面包含了大量的函数声明语句，其原因是项目中引用了许多模块，每一个模块都有自己的作用域，导致了代码体积变大，内存开销也较大（函数作用域会消耗内存）。幸运的是Webpack使用Scope Hoisting技术解决了这个问题。
Scope Hoisting可以分析模块之间的依赖关系，最大程度地把零散的模块合并到一个函数中去，如此以来减少了函数声明代码，从而使得输出代码体积更小，内存的开销也变小了。
在mo]]></description><category></category></item><item><title><![CDATA[45 webpack优化-按需加载]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121962570</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121962570</guid><author>sinat_41212418</author><pubDate>Wed, 15 Dec 2021 21:45:46 +0800</pubDate><description><![CDATA[按需加载
网页常常有这种场景，用户需要和网页进行交互，才会出现别的内容，如果用户没有进行交互，那么这部分内容是不会出现的。如果把这部分内容在网页加载的时候一同加载，那么加载就会缓慢，而且这部分内容无法保证是100%要呈现出来的。此时使用按需加载就会很好解决这个问题，需要的时候才去异步加载，避免了网页加载缓慢的问题。
使用import()语句即可实现懒加载，之前我们已经使用了按需加载，如下所示：
// 懒加载测试
const btns = document.getElementById("home-dialo]]></description><category></category></item><item><title><![CDATA[44 webpack优化-代码压缩]]></title><link>https://blog.youkuaiyun.com/sinat_41212418/article/details/121962514</link><guid>https://blog.youkuaiyun.com/sinat_41212418/article/details/121962514</guid><author>sinat_41212418</author><pubDate>Wed, 15 Dec 2021 21:43:17 +0800</pubDate><description><![CDATA[代码压缩
为了提升页面的加载速度，需要对输出资源进行相应的压缩。一般来说，Webpack构建出的资源分为JavaScript文件，Css文件和其他类型的文件，需要针对不同类型的文件进行合理的压缩，以此来提升用户体验。
JavaScript压缩
之前介绍过Webpack的配置中mode的值会启用Webpack内置的优化手段，比如我们要构建生产环境的项目时，我们需要设置mode为production，这个时候输出的资源是经过一定程度上压缩的，其原因是当mode的值为production的时候，Webpack内部]]></description><category></category></item></channel></rss>