- 博客(2185)
- 收藏
- 关注
RSS订阅原创 pnpm hoist机制
在 pnpm 中，hoist 机制并不是默认启用的，因为 pnpm 设计之初就是为了解决 npm 和 Yarn 中由于 hoist 引起的幽灵依赖（Phantom Dependencies）和包重复（NPM Doppelgangers）问题1。目录都是独立的，且只包含该项目直接依赖的包和这些包的直接依赖（通过链接指向 Store 中的包）12。由于硬链接和软链接的指向性，pnpm 能够确保相同的依赖包在磁盘上只存储一次，从而节省了大量的磁盘空间，并避免了包重复的问题23。的顶层，以减少依赖树的深度1。
2024-08-09 09:22:08
284
原创 文件上传，怎么做文件预览，文件在上传中预览可行吗
文件上传时的预览功能，对于提升用户体验来说是非常有帮助的。实现文件预览的具体方法取决于文件的类型（如图片、视频、文档等）以及你所使用的技术栈。下面是一些常见的文件类型预览方法及关于上传中预览的可行性讨论。
2024-08-09 09:21:00
332
原创 package A和package B依赖一个包的不同版本，如何统一成一个版本
如果可能的话，首先检查这些依赖的版本兼容性。然而，这种方法可能会导致一些难以预料的问题，因为并非所有的依赖都会按照你预期的那样工作。如果以上方法都不可行，并且这些包之间的冲突非常严重，你可能需要考虑将项目拆分成多个部分，每个部分使用不同的依赖版本。当不同的包（比如你的例子中的package A和package B）依赖同一个库的不同版本时，这可能会导致版本冲突，影响项目的编译或运行。如果可能的话，尝试与package A和package B的维护者联系，询问他们是否可以更新他们的包以支持更广泛的依赖版本。
2024-08-09 09:14:56
134
原创 什么是幽灵依赖，会引发什么问题
目录中存在但未被实际使用的依赖包。在使用npm或其他包管理工具安装依赖包时，有时会出现安装了一些不需要的或者不正确的依赖包的情况。为了解决幽灵依赖问题，一些包管理工具如pnpm采用了不同的策略。例如，pnpm通过使用符号链接（软链接）来创建依赖项的嵌套结构，将项目的直接依赖符号链接到。目录，确保项目中只包含必要的依赖。此外，使用适当的包管理工具也可以帮助减少幽灵依赖的发生。这样可以避免重复文件的复制，同时解决幽灵依赖问题12。的根目录，依赖包中的每个文件再硬链接到。目录中，占用了项目的存储空间1。
2024-08-09 09:12:34
287
原创 pnpm 软链接和硬链接的区别
硬链接通过直接指向文件的inode来共享文件内容，适用于需要节省磁盘空间且不需要跨文件系统或磁盘分区的场景。软链接通过指向文件或目录的路径来访问文件内容，适用于需要跨文件系统或磁盘分区访问文件的场景，也常用于解决特定的问题，如幽灵依赖。在pnpm中，这两种链接方式被巧妙地结合使用，以实现高效的包管理和依赖管理。
2024-08-09 09:12:00
381
原创 前端性能监控
关注Vue 3的新特性： Vue 3引入了一些新特性，如Composition API、Teleport组件、Suspense组件等，这些新特性为性能优化提供了更多的可能性。监控渲染性能： Vue 3对虚拟DOM进行了重构和优化，但即便如此，随着应用规模的增大，渲染性能仍然可能成为问题。这些工具提供了更全面的性能监控功能，包括应用响应时间、用户行为追踪、错误监控等，有助于你更深入地了解应用的运行状态和性能表现。同时，关注Vue官方文档和社区动态，及时了解Vue的最新更新和最佳实践，以便更好地优化你的应用。
2024-08-07 08:58:45
224
原创 其他内容：Nodejs 中的中间件
中间件是Node.js和Express应用中一个非常强大的功能，它们允许你以模块化和可重用的方式构建应用，同时保持代码的清晰和组织性。可以接受两个参数：一个可选的路径字符串和一个回调函数（即中间件函数）。在Express中，你可以使用。
2024-08-07 08:51:29
226
原创 前端文件流、切片下载和上传：优化文件传输效率与用户体验
是指将数据作为连续的块（chunks）进行发送和接收的过程，而不需要一次性加载整个文件到内存中。这种方式对于处理大文件尤其有效，因为它减少了内存的使用，并允许文件边下载边处理。是指将大文件分割成多个小片段（slices）并行下载，最后再将这些片段合并成完整的文件。这种方式可以显著提高下载速度，特别是在多线程/多连接支持的环境下。它将大文件分割成多个切片，然后并行上传到服务器，最后由服务器合并这些切片。通过应用上述优化策略，可以显著提高前端文件传输的效率和用户体验。
2024-08-07 08:51:14
303
原创 谈谈Webpack5性能优化
请注意，以上优化策略并非全部，具体使用时还需根据项目的实际情况和需求进行选择和调整。同时，请注意在优化过程中保持代码的可读性和可维护性。Webpack 5 提供了多种性能优化手段，旨在提高构建速度和减少最终产物的大小。
2024-08-06 16:25:20
343
原创 12道性能优化的问题
懒加载是一种延迟加载技术，指在需要使用某个对象或数据时才进行加载，而不是在系统启动或页面加载时就立即加载。这种技术可以应用于图片、视频、音频、数据库查询、代码模块等多种资源类型1234。异步加载：重点在于资源的加载和执行是并行的，不会阻塞页面渲染，但资源的执行顺序是不确定的。延迟加载：重点在于资源的按需加载，即在需要时才加载资源，以减少初始加载时间。对于脚本来说，虽然延迟加载的脚本不会阻塞页面解析，但它们会在页面解析完成后按顺序执行（如果使用defer属性）。
2024-08-06 16:05:39
744
转载 Vue 3 的内置组件：Teleport
只会改变最终渲染的 DOM 结构，它不会对 Vue 组件树的层级结构产生影响，父子组件之间的属性传递和事件触发保持不变。逻辑上，这个弹框受子组件的状态控制，隶属于子组件。但在 DOM 树结构中，它应该超越子组件，最好是。属性设定转移的目的地，它可以是 CSS 选择器字符串，也可以是真正的 DOM 节点。有时候需要根据某些条件，动态启用或禁用 Teleport，使用它的。一个常见的业务场景：在某个子组件中，点击按钮，出现一个全局弹框。的直接子元素，否则它很容易受到子组件样式的影响。组件加载到 DOM 之前，
2024-08-06 13:53:31
144
转载 软件License授权原理
软件License授权不仅是保护知识产权的重要工具，也是维护市场秩序和促进软件行业健康发展的关键因素。随着技术的进步和法律的完善，我们有理由相信，未来的软件授权机制将更加智能、高效和安全，为用户和开发者带来更好的体验。我们做的商业软件需要进行售卖，为了收取费用，一般需要一个软件使用许可证，然后输入这个许可到软件里就能够使用软件（比如，一串序列码或者一个许可证文件）。如果签名有效，则说明软件是原始的、未被篡改的。：当软件开发者的权益得到充分保护时，他们更有动力投入研发，推出更多创新的产品和功能。
2024-08-06 13:50:33
407
转载 前端在本地开发还能用https？
这样一来，当浏览器访问 loft.example.com 时，Nginx 就会将请求转发到本地的服务上，而由于使用了 SSL 证书，通信就变得安全可靠。但由于我们项目的cookie除了设置了secure，还设置了domain，localhost/127.0.0.1 是拿不到这个cookie的，所以我必须要在本地成功使用 https://*.example.com 指向本地项目才行。首先，我们修改了本地的 hosts 文件，将一个虚拟的子域名指向了本地的 IP 地址。mkcert会默认把生成的证书文件放到。
2024-08-06 10:39:35
46
转载 2024 Vue 生态工具最能打的组合！
Nuxt 是一个开源的服务端渲染（SSR）框架，建立在 Vue.js 之上，专注于提供一套完整的前端开发解决方案，旨在帮助开发者构建高性能、可扩展的Web应用。Pinia 是一个专为 Vue.js 设计的新一代状态管理库，它提供了更简单、更灵活的 API，并且完全支持 Vue 3。Axios是一个基于Promise的网络请求库，它可以在Node.js和浏览器中运行，它提供了一种简单而直观的方式来发送各种HTTP请求，如GET、POST、PUT、DELETE等，并且易于对请求和响应进行拦截处理。
2024-08-06 10:39:19
66
转载 Volta：更好用的 node 版本管理工具
它专为现代 JavaScript 开发工作流而设计，能够自动处理工具版本的切换和依赖关系管理，确保开发者始终使用正确的工具版本。团队成员可以使用 Volta 确保他们的开发环境与项目配置一致，避免了由于工具版本不同而导致的“运行在我机器上没问题”的问题。在 CI/CD 管道中使用 Volta，可以确保构建和部署过程中使用正确的工具版本，避免由于版本不一致导致的构建失败。Volta 通过锁定项目的工具版本，避免了工具版本不一致导致的问题，提高了项目的稳定性和可维护性。
2024-08-06 10:39:04
275
转载 15 个你不知道的 CSS 属性
剪切路径允许您定义剪切区域以有选择地显示元素的一部分，从而实现简单矩形之外的复杂且富有创意的形状。mask-image应用图像来选择性地遮盖或显示元素内容的部分内容，从而实现复杂且具有视觉吸引力的设计。文本溢出允许您控制溢出其容器的文本的显示方式，提供省略号或自定义溢出指示器的选项。此属性控制元素的内容与其背景混合的方式，提供与图形设计软件中类似的各种混合模式。该属性定义了溢出元素的滚动行为，只需简单的声明即可实现平滑的滚动动画。此属性控制图像在浏览器中的渲染方式，提供优化图像质量和渲染速度的选项。
2024-08-06 10:38:43
25
转载 ES9中5个最具变革性的JavaScript特性
异步生成器是ES9中一个强大的特性。当我们调用.next()时，我们会得到一个Promise现在要消费这个生成器，我们将使用我想知道实际的YouTube JavaScript代码是否使用了这样的生成器？
2024-08-06 10:38:13
23
转载 高级前端性能优化
异步加载（Async Loading）和延迟加载（Deferred Loading）有什么区别？什么是重排（Reflow）和重绘（Repaint）？如何减少它们对性能的影响？使用React/Vue/Angular等框架时，如何避免不必要的渲染？你如何使用构建工具（如Webpack、Gulp等）来优化前端性能？什么是懒加载（Lazy Loading），它如何帮助提升性能？如何设置合适的缓存策略来减少服务器请求？如何优化移动设备上的页面加载性能？如何减少HTTP请求的数量？如何优化Web字体的加载？
2024-08-06 10:37:59
23
转载 面试官：如果一个NPM包部分功能不满足需求，如何修改其部分功能~
通过上面这四种方法，我们应该对这个场景有比较熟悉的理解了，选择哪种方法取决于你的具体需求、对第三方包的修改程度以及是否希望将这些修改贡献给社区。通常，提交 PR 和使用 Fork 是首选方法，因为它们可以避免维护自定义修改所带来的长期负担。
2024-08-06 10:37:42
30
转载 仅使用CSS提高页面渲染速度
button {在使用CSS自定义属性时，时常在root（根元素）上注册自定义属性，这种方式注册的自定义属性是个全局的自定义属性（全局变量），可以被所有嵌套的子元素继承。就上例而言，--color属性允许任何button样式将其作为变量使用。熟悉CSS自定义属性的同学都知道，可以使用style.setProperty来重新设置已注册好的自定义属性的值。但在修改根自定义属性时，需要注意，因为它会影响Web的性能。
2024-08-06 10:37:24
55
转载 为个人网站提供 微信扫码登录 能力
极大地简化了通过接入微信开放平台实现扫码登录的复杂流程，使非企业认证资质的个人 PC 网站也可以轻松使用微信扫码登录功能，为个人开发者及其用户带来方便，节约时间。
2024-08-05 09:11:41
104
转载 ECMAScript 2024 全新特性全面解析
2024 年 6 月 26 日，第 127 届 ECMA 大会正式批准了 ECMAScript 2024 语言规范，这意味着它现在正式成为最新 ECMAScript 标准。下面就来看看 ECMAScript 2024 都有哪些新特性吧！
2024-08-05 09:06:49
29
转载 ES13中5个最具变革性的JavaScript特性
在ES13之前，我们只能在构造函数中声明类字段： 与许多其他语言不同，我们不能在类的最外层作用域中声明或定义它们。在ES13之前，创建私有方法是不可能的。ES13包含了许多有价值的特性，彻底改变了我们编写JavaScript的方式。从异步升级到数组语法糖等等，让我们来看看这些特性，看看你是否错过了其中一些。静态字段 — 类本身的属性，而不是任何特定实例的属性。在ES13之前，我们永远不能在全局作用域中使用。随着静态字段的出现，静态块也来了。幸运的是，ES13带来了一个新的。我们可以通过在字段前加上井号（
2024-08-05 09:06:29
21
转载 前端路由的实现原理【hash＆history】
本期文章主要介绍了路由这个概念，以及重点讲前端实现路由的两种模式，哈希刚好就是浏览器承认他，接了哈希值改变url不会引起页面的刷新，然后通过得知哈希值；history就是有个方法，可以改变url不引起页面刷新的pushState，通过得知url，这个模式下前进回退需要通过popState事件来触发。❝本次学习代码已上传至GitHub学习仓库：(https://github.com/DolphinFeng/CodeSpace)
2024-08-05 09:06:01
59
转载 11 个高级 Web 工程师必备的 Web API
这些对于处理 Web 应用程序中的 I/O 数据特别有用——例如流式上传或下载，以及与以二进制格式发送数据的 API 进行通信。Blob API 用于处理二进制数据，可以很方便地将数据转换为 Blob 对象或从 Blob 对象读取数据。在 Web 应用程序中，可能需要上传或下载二进制文件，这些数据可以使用 Blob API 方便地处理。Proxy API 可用于拦截和自定义对象上的操作，例如属性查找、赋值、枚举、函数调用等。符号可用于向对象添加唯一属性键，这些键不会与任何其他属性冲突，并可用于私有属性。
2024-08-05 09:05:04
29
转载 k8s 弃用docker，传统镜像构建何去何从，kaniko搭配Jenkins 有话说。
而且，Jenkins 在 Kubernetes 上运行时，无论是 Jenkins Master 还是 Jenkins Slave，它们都是以 Pod 的形式存在的，这些 Pod 默认情况下是没有 Docker 命令的。比对并生成镜像层：Kaniko 会将新创建的快照与前一个快照进行比对，如果发现有变化，它会将这些变更生成一个新的镜像层，并添加到基础镜像之上。推送镜像：当 Dockerfile 中的所有命令都执行完毕后，Kaniko 会将最终构建完成的镜像推送到指定的远程镜像仓库。
2024-08-05 09:03:18
163
转载 基于gitlab+linux实现CI/CD
通常情况下项目流水线大部分的内容都是相同的，为了实现模板复用，减少重复代码，我们可以创建一个git仓库用于存放模板，然后创建一个templates目录存放所有pipeline的模板，创建一个jobs目录存放job模板。这样我们可以将一些maven、golang、npm工具通过一个job模板和不同的构建命令实现。templates的好处是我们在其中定义了模板流水线，这些流水线可以直接让项目使用。当遇到个性化项目的时候就可以在当前项目创建.gitlab-ci.yml文件来引用模板文件，再进一步实现个性化需要。
2024-08-05 09:01:59
35
转载 基于jenkins+k8s(container)实现CI/CD
利用 Jenkins、SonarQube、Harbor、Container、Kubernetes技术，搭建一个完整的 CI/CD 管道，模拟实际生产环境项目开发部署流程，实现持续集成、持续交付和持续部署。通过自动化构建、测试、代码质量检查和容器化部署，将开发人员从繁琐的手动操作中解放出来，提高团队的开发效率、软件质量和安全性，实现持续更新迭代和持续部署交付。不同项目可能使用不同的编程语言、框架或库，这导致了每个Slave的配置环境各不相同。
2024-08-05 09:01:38
98
转载 基于jenkins+docker实现CI/CD实践
利用 Jenkins、Docker、SonarQube 和 Harbor 技术，搭建一个完整的 CI/CD 管道，实现持续集成、持续交付和持续部署的流程。通过自动化构建、测试、代码质量检查和容器化部署，将开发人员从繁琐的手动操作中解放出来，提高团队的开发效率、软件质量和安全性，实现持续更新迭代和持续部署交付。
2024-08-05 09:01:17
36
转载 基于gitlab+docker实现CI/CD
利用Docker、Gitlab、Gitlab Runner、SonarQube、Harbor、Jmeter、Maven、Java技术，搭建一个完整的 CI/CD 管道，实现当开发人员完成代码提交后，开始流水线工作，完成编译打包、单元测试、源码扫描、上传制品、部署服务到Docker容器、自动化测试工作。通过自动化构建、测试、代码质量检查和容器化部署，将开发人员从繁琐的手动操作中解放出来，提高团队的开发效率、软件质量和安全性，实现持续更新迭代和持续部署交付。
2024-08-05 09:00:03
61
转载 centos7搭建CICD流水线，k8s集群部署应用实操
三、准备k8s和docker环境，k8s环境运行服务，docker负责将项目源码打包成镜像，安装文档有空再补充。链接: https://pan.baidu.com/s/14WiJaqVWYScQ-QiMX-1pOg。链接: https://pan.baidu.com/s/171_qvMNGdRwu_Z92DP6OxA。六、验证部署，访问主机30080端口，返回hello world！5. 登录gitlab，在页面上做一些语言切换，禁止注册，修改密码等设置。二、安装jenkins。一、安装gitlab。
2024-08-05 08:58:17
46
转载 基于gitlab+k8s(container)实现CI/CD
利用Container、Gitlab、Gitlab Runner(k8s)、SonarQube、Harbor、Jmeter、Maven、Java技术，搭建一个完整的 CI/CD 管道，实现当开发人员完成代码提交后，开始流水线工作，完成编译打包、单元测试、源码扫描、上传制品、部署服务到Docker容器、自动化测试工作。通过自动化构建、测试、代码质量检查和容器化部署，将开发人员从繁琐的手动操作中解放出来，提高团队的开发效率、软件质量和安全性，实现持续更新迭代和持续部署交付。
2024-08-05 08:57:59
47
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人