有趣的小良-CSDN博客

原创 :hover时设置边框border出现抖动异常

地出现边框效果，但实际情况却是元素出现了。在开发过程中，给 div 添加以下样式。，影响了用户体验和页面的美观度。在div元素上时（执行。主要有两个原因，分别是。

2023-10-16 09:47:08 325

原创 Webpack5 htmlwebpackplugin用法

Webpack是一个功能强大的模块打包工具，而HtmlWebpackPlugin是Webpack的一个插件，用于生成HTML文件并自动注入打包后的资源。介绍了Webpack5中HtmlWebpackPlugin插件的用法及其各种配置选项。借助HtmlWebpackPlugin插件，我们可以方便地生成HTML文件并自动注入打包后的资源，同时还能对HTML进行压缩和定制化配置。

2023-10-13 15:50:41 1451

原创 HTTP2.0的特性

HTTP/1.0作为Web发展的里程碑之一，其特性为Web应用程序的发展提供了基础。然而，由于非持久连接方式和其他局限性，HTTP/1.0在性能和效率方面存在一些不足之处。为了解决这些问题，后来的HTTP版本如HTTP/1.1以及更高版本开始引入了新的特性和改进，提高了网络通信的效率和安全性。综上所述，虽然HTTP/1.1在网络传输中有较大的优势，但是存在一些问题和不足。

2023-10-12 17:28:50 262

前几天面试美团的时候被一道链表的算法题卡住了，面试完之后我去查了这道算法，然后发现在解题过程中使用了>>这个操作符： let mid = (left + right) >> 1，因为在之前工作学习中没使用过，所以写这个博客记录下>>操作符的作用和用法~在 JavaScript 中，>>是一个位移操作符，用于将一个二进制数向右移动指定的位数。这个操作符执行有符号右移操作。>>操作符在 JavaScript 中用于将数字的二进制表示向右移动指定的位数，并保留符号位。

2023-10-07 17:37:19 2777 1

原创 Moment.js 处理日期库

这些只是 Moment.js 中一小部分常用方法的示例，你可以根据具体需求查阅 Moment.js 的官方文档来深入了解更多功能和用法。希望本文能帮助你更好地理解 Moment.js，并在前端开发中灵活运用。

2023-09-18 15:10:04 274

原创 decimal.js 处理浮点数计算

decimal.js库为前端开发人员提供了一个强大的工具，用于解决浮点数计算精度丢失的问题。通过decimal.js库，我们可以轻松地进行高精度的数字计算，并确保计算结果的准确性。无论是在财务应用、科学计算还是其他需要精确计算的场景中，decimal.js库都能够帮助我们处理复杂的数字运算。让我们拥抱decimal.js库，让高精度计算变得更加简单。

2023-09-12 16:29:33 1609

原创自动部署工具PM2

在现代应用程序开发中，自动化部署是一项至关重要的任务。它可以帮助我们快速、可靠地将代码部署到生产环境中，并确保应用程序的持续运行。在这方面，PM2（Process Manager 2）是一个备受欢迎的自动部署工具。本文将详细介绍PM2的作用以及其常见命令，以帮助读者更好地理解和使用这个强大的工具。

2023-09-07 21:15:05 533

原创 lodash的merge()方法

在JavaScript开发中，对象合并是一个常见的操作。Lodash是一个流行的实用工具库，其中的merge()方法能够方便地将多个对象进行合并。本文将深入介绍lodash的merge()方法，包括它的使用方法、深浅拷贝的原理，以及与JavaScript内置的Object.assign()方法的区别和联系。merge()方法是Lodash库中的一个函数，它允许我们将多个对象合并为一个新对象，而不改变原始对象。这个方法可以处理对象的深度合并，包括嵌套对象和数组的合并。

2023-09-04 14:05:37 5271 2

原创 Git git fetch 和 git pull 区别

只会从远程仓库获取最新代码，但不会自动合并。它将新的远程分支和提交存储在本地，你可以查看这些变更，然后决定如何处理。的作用都是用于从远程仓库获取最新代码，但它们之间有一些区别。它从远程仓库获取最新代码，并将其合并到当前分支中。

2023-08-29 14:26:31 648

原创 CSS 样式使用link和@import有什么区别

是在CSS文件加载完毕后才会开始下载被引入的样式文件，因此可能会造成页面闪烁，加载时间更长。标签时，会立即请求并加载该样式表，并在渲染页面时应用样式。是CSS2.1提供的语法规则，较旧的浏览器可能不支持它。标签是HTML标准的一部分，几乎所有的浏览器都支持。/* 在CSS样式表中使用@import导入样式 */规则用于引入Google Fonts提供的字体样式表。规则必须出现在CSS样式表的顶部。标签可以放置在HTML文档的。加载方式：当浏览器解析到。在页面导入样式时，使用。标签用于导入外部样式表。

2023-08-28 09:14:57 518

原创 Git commit代码规范校验

也就是说当我们执行npm install安装完项目依赖后会执行 husky install命令，该命令会创建.husky/目录并指定该目录为git hooks所在的目录。Husky是一个可以让我们使用Git hooks的工具，通过配置pre-commit钩子函数，在代码提交前执行自定义的脚本。完成这两步之后就可以实现使用commitlint对git的commit操作进行标准化的默认校验，默认校验规则可以自行查阅commitlint的官方文档，这里不做具体介绍。

2023-08-24 10:09:24 563

原创 Webpack5 处理图片资源

缺点：1.体积变得更大，Base64编码的数据体积通常是原数据的体积4/3，也就是datauri形式的图片会比二进制格式的图片体积大1/3。现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。优点：1.减少http请求数量，有时候图片的体积太小，占用一个HTTP会话不是很值得。的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来。此时如果查看 dist 目录的话，会发现多了三张图片资源。4.IE678兼容性较差。

2023-08-10 10:59:35 937

原创 Node.js的核心模块——path

Node.js的path模块是处理文件路径的必备工具，提供了规范化、拼接、解析和提取路径信息等功能。了解并熟练运用path模块的API，可以大幅提升文件路径处理的效率和准确性。无论是在构建Web应用、文件操作还是其他Node.js项目中，path模块都能为开发者节省不少时间和精力。path是Node.js的核心模块，专门用来处理文件路径，path模块为处理文件路径提供了一系列实用的功能和API。这里主要介绍一些path模块的常见api。

2023-08-10 10:01:47 864

原创 Webpack5 core-js和babel-loader区别和用法

通过使用babel-loader进行语法转换只能解决部分兼容性问题，而对于新增的API和全局对象，我们需要借助core-js来提供兼容性支持。核心思想是使用polyfill模拟缺失的功能，从而使JavaScript应用程序能够在各种浏览器中工作。通过合理配置Webpack和使用core-js，我们可以大大提升JavaScript应用程序的跨浏览器支持，为用户提供更好的体验。

2023-08-07 19:24:16 1112

原创 Webpack5 Preload/Prefetch技术

在现代Web开发中，页面加载速度对于用户体验至关重要。为了提高网页加载性能，Webpack 5推出了Preload和Prefetch这两个特性，可以帮助提前获取关键资源，从而加速页面加载速度。通过以上内容，读者将了解到Preload和Prefetch在Webpack 5中的作用、用法以及适用场景。他们可以根据实际需求，在项目中灵活应用这两个功能，从而提升网页加载性能。

2023-08-07 15:52:23 1005

原创 Vue 路由懒加载

通过使用require、ES模块语法import以及不使用懒加载的方式，我们可以根据需求选择合适的路由懒加载技术。懒加载可以优化应用程序的性能，减少初始加载时间，并提供更好的用户体验。同时，对于较小或者不常访问的路由组件，可以考虑不使用懒加载的方式，以简化开发和维护。在Vue应用程序中，我们应根据项目需求选择适当的路由加载方式。

2023-08-07 08:58:45 785

原创 Webpack5 动态导入按需加载

传统上，在Webpack中，我们使用import语句可以在代码中静态地导入模块。这意味着所有的模块都会在构建时被打包到bundle中。然而，动态导入和按需加载允许开发者在运行时根据需要动态地加载模块，减少初始加载时间和资源消耗。减少初始加载时间：只加载当前需要的模块，而不是全部模块。优化代码分割：可将类似功能或依赖关系较弱的模块进行拆分，使得每个chunk更小且更独立。提高用户体验：按需加载可以使应用程序更快地响应用户交互，提升用户体验。

2023-08-04 15:01:07 2774 1

原创 Webpack5 cacheGroups

vue项目可以使用cacheGroups抽离一些公共模块，比如layouts（项目页面框架），elementUI或者其他ui组件库，vue，以及都会分离的libs（node_modules目录模块），这里我举例说明的是对 libs 的配置项。在Webpack 5中，cacheGroups是用于配置代码拆分的规则，它可以帮助你更细粒度地控制生成的代码块。通过合理配置cacheGroups，可以根据项目需求将代码拆分成不同的块，提高构建速度和应用的加载性能。

2023-08-03 20:14:09 2065

原创 Webpack5 生产模式压缩图片ImageMinimizerPlugin

之前在loader里面用asset（webpack5内置的文件资源模块）已经对图片等资源进行加工处理，把小于20kb的图片会被base64处理转换成dataUrl形式了，为什么还要用到ImageMinimizerPlugin再处理一次图片资源，这是不是多此一举？在没使用ImageMinimizerPlugin之前，我项目的图片格式打包完成之后是png格式，保持了未打包之前的格式，在使用了ImageMinimizerPlugin之后，变成了WebP格式的图片，所以我上网查了这两个格式的区别如下。

2023-07-31 15:29:16 1501

原创 Webpack5 多线程Threads

传统的单线程构建方式已经无法满足需求，因此Webpack5引入了多线程 Threads 技术，以并行处理构建任务，从而显著提高构建速度。Webpack5 多线程 Threads 技术是提升构建性能的重要利器，通过并行处理任务，能够显著缩短构建时间，提高开发效率。使用 Threads 的步骤相对简单，只需安装。在Webpack5中，Threads 指的是并行处理构建任务的线程，通过充分利用多核CPU的能力来提高构建速度。随着前端项目的不断演进，我们应积极探索并采用更多优化手段，以追求更高的性能和开发体验。

2023-07-31 10:22:47 1319

原创 Webpack5 对bundle分析

这个插件不是必须的，但在项目需要进行性能优化或者查找打包过程中出现的问题时，它非常有用。通过分析报告，开发者可以了解各个模块的体积情况，找出体积较大的模块，优化加载性能；你可以访问报告页面，查看模块大小、依赖关系等信息，并根据需要进行优化调整。bundle是Webpack打包的产物，通过分析bundle包的大小和模块关系等信息，我们可以更好地理解代码打包结果，并且继续优化 bundle 大小和性能。它可以生成一个报告，展示打包后各个模块的大小、依赖关系以及其他相关信息，帮助开发者优化代码和资源。

2023-07-26 14:04:21 816

原创 Webpack5 vue-loader和VueLoaderPlugin

它会读取 .vue 文件的内容，并根据配置对其中的模板、样式和脚本进行相应的转换和编译，最终生成可在浏览器运行的 JavaScript 模块。它的作用是将 .vue 文件中的模板、样式和脚本进行编译，并将其转换为 JavaScript 模块，以供Webpack打包使用。简单来说，VueLoaderPlugin 是一个插件，用于告诉 webpack 如何处理和解析 .vue 文件，而 vue-loader 则是实际执行加载和转换 .vue 文件的加载器。例如，你可以在组件的样式中这样用 SASS。

2023-07-25 20:13:52 1975

原创 Webpack5 CopyPlugin的作用

在Webpack 5中，CopyPlugin是一个插件，用于将文件或目录从源位置复制到构建目录中。它的作用是帮助开发人员在构建过程中将静态文件（如图片、字体等）直接复制到输出目录，而无需经过任何处理。CopyPlugin并不是必须的，它的使用与具体项目需求相关。如果你的项目需要复制一些静态资源到构建目录中，可以使用CopyPlugin来完成这个任务。总结：CopyPlugin的作用是复制文件或目录到构建目录中，根据项目需求而定，不是必须的插件。目录下的文件复制到输出目录的。目录下的文件复制到输出目录的。

2023-07-25 20:04:11 1188

原创 Webpack5 DefinePlugin的作用

在Webpack 5中，DefinePlugin是一个插件，用于创建全局常量，这些常量可以在编译过程中被引用。它的作用是允许开发人员在代码中定义全局变量，这些变量在构建过程中将被替换为其对应的值。总结：DefinePlugin的作用是创建全局常量，可以在代码中引用。它不是必须的插件，但在需要定义全局常量或环境变量时非常有用。DefinePlugin并不是必须的，但它是一个非常有用的插件，在某些情况下可以帮助我们优化代码或定义环境变量。这些常量在构建过程中会被替换为相应的值，并且在代码中可以直接使用。

2023-07-25 20:03:03 913

原创 Webpack5 生产模式source-map是必须的吗

会增加构建时间和打包后的文件大小。在生产模式下，你可能更关注性能和用户体验，因此可以选择关闭。在生产模式下不是必须的，但根据具体需求和项目特点，你可以根据以上因素进行判断和决策。调试能力：如果你需要在生产环境中进行调试，查找问题或者进行性能优化，开启。安全性考虑：在某些情况下，你可能不希望将源代码暴露给终端用户。可能会泄露你的源代码逻辑，因此需要权衡安全性和调试需求。取决于你的具体需求和项目情况。可以提供更好的源代码映射，方便你定位和排查问题。构建速度和输出文件大小：生成。

2023-07-25 20:00:55 298

原创 Webpack5 CleanWebpackPlugin

clean-webpack-plugin是webpack的一个小插件，由于每次打包的时候有可能文件名称和文件内容不一样，打包后的文件就叠加到输出目录下了。所以cleanWebPackPlugin作用就是在每次打包之前，先把输出目录删掉，创建最新的目录，避免一些不必要的文件还留在同一个目录下~

2023-07-12 10:23:32 1981

原创 Webpack5 SourceMap

当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。开发时我们运行的代码是经过 Webpack 编译压缩合并之后的，这样的目的是以提高应用程序的性能，但是这种优化也给调试问题带来了困难，因为压缩后的代码难以追踪和调试。1，通过bundle和sourcemap文件，可以反编译出源码，也就是说，线上产物有sourcemap文件的话，就意味着有暴露源码的风险。会增加构建时间和打包后的文件大小。

2023-07-11 14:20:23 896

原创 Webpack5开发模式选择

Webpack 5 是一款强大的模块打包工具，可用于将许多分散的模块按照依赖关系打包成一个（或多个）bundle。在Webpack 5中，主要有两种开发模式，分别是开发模式（development）和生产模式（production）。开发模式（development）：这种模式主要是为了提升开发过程中的体验，做了一些优化。生产模式（production）：这种模式主要是为了优化打包后的代码，提升运行效率。记住，你可以通过在webpack的配置文件中设置。来选择使用哪种模式。

2023-07-10 20:42:28 694

原创 Git 分支重命名

在开发过程中，我们经常需要对分支进行重命名，以更好地组织和管理代码库。然而，在进行重命名操作之前，请确保了解相关风险，并与团队成员共享重命名后的分支名称。这将把当前分支重命名为新的名称。切换到目标分支：如果要重命名的分支不是当前所在的分支，需要先切换到目标分支。推送更新：如果已经将代码库推送到远程仓库，需要将分支重命名操作同步到远程仓库。确定当前分支：首先，在进行分支重命名之前，我们需要确定当前所在的分支。确保在进行重命名操作之前，我们已经切换到了正确的分支。命令查看当前分支，并确保我们处于正确的分支上。

2023-06-27 10:27:15 2450

原创 JS 对象解构赋值

当你进行对象解构时，解构的过程是将属性的值复制到新的变量中，而不是直接引用原始对象中的值。这意味着你无法通过修改解构后的变量来改变原始对象中的对应属性的值。ES6的对象解构语法是用于从一个对象中提取属性并赋值给变量。解构出来的变量值是通过匹配对象的属性名来确定的，它们是从对象中提取出来的值的副本。如果你想修改原始对象中的属性值，你需要直接访问原始对象进行修改，而不是通过解构出来的变量。

2023-06-27 10:19:49 176

原创 SSR 服务端渲染概述

服务端渲染简称 SSR，全称是 Server Side Render，是指一种传统的渲染方式，就是在浏览器请求页面 URL 的时候，服务端将我们需要的 HTML 文本组装好，并返回给浏览器，这个 HTML 文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中。以上就是对 SSR 技术的一些简要介绍，总结一下就是：SSR 提高 SPA 应用的首屏响应速度，有利于 SEO 优化。SSR 最适用于静态展示页面，如果页面动态数据较多时需要谨慎使用。

2023-06-25 10:56:11 1698

原创 JWT技术小结

发起受保护资源请求：当用户访问需要身份验证的受保护资源时，前端应在每个请求的头部（通常是"Authorization"头部）中包含JWT。可以使用安全的传输协议（如HTTPS）来传递JWT，并采取适当的防范措施，如防止跨站点脚本攻击（XSS）和跨站点请求伪造（CSRF）等。需要注意的是，JWT的验证和处理通常是在服务器端进行的。存储JWT：前端应用程序需要将接收到的JWT存储起来，通常使用浏览器提供的一些机制，如本地存储（localStorage）或会话存储（sessionStorage）。

2023-06-23 16:47:47 104

原创 CSS 文字超出范围显示省略号

需要实现的效果是当文字太多的时候只显示一行或两行，其余文字用…省略号配合tooltip组件去显示的时候可以用css样式这样实现。

2023-06-21 15:28:31 418

原创 JS for…in和for…of迭代区别

循环用于迭代可迭代对象（如数组、字符串等）的值。它会直接返回可迭代对象的每个元素值，而不是索引或属性。循环不能直接用于遍历普通对象（Plain Object），因为普通对象并不是可迭代对象。循环用于遍历对象的可枚举属性。它会将对象的每个可枚举属性作为循环变量来进行迭代。循环不直接适用于普通对象，但可以通过转换对象为可迭代对象的方式来遍历对象的属性值。循环遍历对象的属性值，可以将对象转换为可迭代对象，或者使用其他方法来实现。这样可以迭代对象的可枚举属性，包括从原型链继承的属性。用于遍历可迭代对象的值。

2023-06-19 11:38:11 354

原创 Nodejs的模块和CommonJS规范

Node.js中的模块指的是一个独立的JavaScript文件，其中包含了某些特定功能的代码，可以被其他文件引用和使用。同时，Node.js中的模块可以使用CommonJS规范来进行导入和导出，使得不同的模块之间可以互相调用和共享代码。CommonJS是一种用于JavaScript模块化的规范，它定义了模块的导入和导出方式，使得不同的模块之间可以互相调用和共享代码。在传统的JavaScript开发中，所有的代码都放在一个文件中，这样会导致代码量过大、结构不清晰，难以维护和修改。

2023-06-15 11:26:05 184

原创 JS深拷贝和浅拷贝

先说数据类型，因为深浅拷贝与数据类型有关，数据类型分为基本数据类型（String、Number、Boolean、Null、Undefined、Symbol (es6引入的一种类型) ）和引用数据类型（Object、Array、Function）。基本数据类型特点：直接存储在栈中；引用数据类型：它真实的数据是存储在堆内存中，栈中存储的只是指针，指向在堆中的实体地址。

2023-06-08 17:23:39 129

原创 JS 数组转字符串，字符串转数组方法汇总

在JavaScript中，我们经常需要将数组和字符串进行相互转换。幸运的是，JavaScript提供了一些方法来轻松地完成这些转换。

2023-06-08 09:37:49 1088

原创 JS 能改变this指向的方法

JavaScript中的this关键字非常重要，它用于引用当前函数所属的对象。但是，有时候我们需要在不同的上下文中使用相同的函数，这就需要改变this指向。在JavaScript中，有几种方法可以实现这一目标。

2023-06-08 09:13:50 832

原创 JS 箭头函数

ES6箭头函数是一种匿名函数，使用“=>”符号定义。与常规函数不同的是，箭头函数没有自己的this值，而是继承了父级作用域中的this值。这个函数接受两个参数a和b，并返回它们的和。

2023-06-08 09:03:01 870

原创 JS bind方法

还可以绑定函数的参数。这样可以在调用函数时，预先传入一些参数，使得函数的调用更加方便和简洁。是 JavaScript 中非常常用的一个函数方法，它可以用来解决函数调用时。是 JavaScript 中的一个函数方法，它可以用来绑定函数的。值是在运行时确定的，它取决于函数的调用方式。但是当将其赋值给一个全局变量并调用时，它的。值和参数的问题，使得函数调用更加灵活和方便。值和参数，返回一个新的函数。在 JavaScript 中，函数的。值，那么在函数被调用时，值，确保函数被调用时。值始终指向正确的对象。

2023-06-06 10:41:29 2688 2

空空如也

空空如也