关于前端的性能及体验问题，图片的加载绝对是重中之重，尤其是在一些有着许多大图的页面，在网络不稳定或稍慢的时候，我们经常能够看到页面中图片的位置是一片空白，等图片加载完成才开始慢慢渲染，在这段时间对用户的体验其实是非常不友好的。

在Taro项目开发中，难免会遇到需要混合编译的场景，一般来讲Taro可以使用原生模块、原生项目也可以使用Taro的模块内容。官方也确实说了Taro 支持使用小程序原生的页面、组件和插件。

并且它一般用于给函数返回值声明类型 ，虽然也可以把一个变量的类型声明为void，但我们一般不会这么干，因为没有意义，为什么这么说呢？在下面的例子中来解答这个问题

前言早在Taro3.5的版本发布时，Taro团队就表示将会在接下来的3.6版本落地对Vite的支持。但在3.6的版本中根本就没看到Vite的身影，随着社区对Vite的呼声越来越高，终于在Taro4.0beta版本中支持了这一功能！目前 Taro 在 Vite 编译系统适配方面，优先支持了小程序、H5 和鸿蒙三端。但仔细一想🤔，H5支持使用Vite编译可以理...

接上篇文章，我们了解到vite的本地构建原理主要是：启动一个 connect 服务器拦截由浏览器请求 ESM的请求。通过请求的路径找到目录下对应的文件做一下编译最终以 ESM的格式返回给浏览器。

对于webpack打包的核心流程是通过分析JS文件中引用关系，通过递归得到整个项目的依赖关系，并且对于非JS类型的资源，通过调用对应的loader将其打包编译生成JS 代码，最后再启动开发服务器。

作为前端人员肯定经常遇到这样的场景：需求刚上线，产品拿着手机来找你，为什么页面打开这么慢呀，心想自己开发的时候也有注意性能问题呀，不可能会这么夸张。那没办法只能排查下是哪一块影响了页面的整体性能，打开浏览器控制台一看，页面上的这些配图每张都非常大，心想这些配图都这么大，页面怎么快，那么我们有没有...

自从苹果推出了惊艳的iPhone X，智能手机界就正式步入了全面屏的新纪元。然而，这一革新也带来了一个特别的问题——那就是屏幕顶部的“刘海”和底部的“黑条”区域。这些区域犹如手机的“神秘面纱”，遮挡了一部分屏幕，给开发者带来了新的挑战。

写过移动端的同学或多或少都遇到过软键盘带来的各种各样的问题，最典型的就是输入框被软键盘遮挡、fixed元素失效等问题，并且这些问题在iOS上的表现让人难以接受。

在小程序的日常迭代中，有一些场景我们可能需要在小程序发布后，用户能够马上感知并更新，比如上线新活动、修复高危漏洞等，如果用户因为各种原因未能及时更新小程序，这就可能导致一些功能无法正常使用或者存在安全隐患，因此，实现小程序的强制更新功能就显得尤为重要。本文将探讨小程序如何做到强制更新，以确保用户...

随着 Web 技术的日新月异，JavaScript 也在不断地吸收新的特性和技术，以满足日益复杂和多样化的开发需求。在 2024 年，JavaScript 迎来了一系列令人瞩目的新功能，这些功能不仅提升了开发者的效率，也极大地丰富了 Web 应用的表现力和交互性。

对于前端来讲，我们在操作cookie时往往都是基于document.cookie，但它有一个缺点就是操作复杂，它并没有像localStorage那样提供一些get或set等方法供我们使用。对与cookie的操作一切都是基于字符串来进行的。为了让cookie的操作更简便， Chrome87率先引入了cookieStore方法。

想必大家在工作过程中都遇到过node版本带来的各种各样的问题，对于团队协作项目，你不能保证所有人的本地node版本都相同，所以在项目文档中往往会写上以下内容：

前言一个看似简单实则有坑的问题：空白网页的背景色是什么？大家是不是都会认为是白色，但事实并非如此，有时候我们眼睛看到的也不一定是真的🧐页面根元素背景色比如下面这段代码： {代码...} 这样我们能够看到整个页面都变成蓝色看到这里可能有人会觉得是body填充了整个视图，但稍微有经验的同学知道，body的高度在没定...

从字面意思上理解：该框架可以用来同时管理多个小程序，并且可以抽离公用组件或业务逻辑供各个小程序使用。当你工作中面临这种同时维护多个小程序的业务场景时，可以考虑使用这种模式。灵感来自webpack的多项目打包构建

前言国庆节马上要到了，今天就教你如何从0到1使用canvas生成国庆风微信头像。本文包含以下内容：vue3项目搭建，需求分析canvas合成图片原理github自动化部署开发过程遇到的问题及解决方案文末附源码及在线体验地址~搭建项目，分析需求项目的话就直接使用脚手架生成一个 Vue3 + TS项目 {代码...} 为了方便，使用了Element...

周末逛github的时候，发现我们只需要在github域名上加上1s他就能够打开一个vscode窗口来阅读代码，比起在github仓库中查看更加方便

TypeORM 是一个ORM框架，它可以运行在 NodeJS、Browser、Cordova、PhoneGap、Ionic、React Native、Expo 和 Electron 平台上，可以与 TypeScript 和 JavaScript一起使用。 它的目标是始终支持最新的 JavaScript 特性并提供额外的特性以帮助你开发任何使用数据库的（不管是只有几张表的小型应用还是拥有多数据库的大型企...

前言用过express与koa的同学，对中间件这个概念应该非常熟悉了，中间件可以拿到Request、Response对象和next函数.一般来讲中间件有以下作用：执行任何代码对请求与响应拦截并改造结束request-response周期通过next()调用下一个中间件如果当前中间件没有结束当前request-response周期，必须调用next()函数，否则请求会处...

模块指的是使用@Module装饰器修饰的类，每个应用程序至少有一个模块，即根模块。根模块是Nest用于构建应用程序的起点，理论上Nest程序可能只有根模块，但在大多数情况下是存在多个模块的，每个模块各自封装一组相关的功能。

上篇文章的最后我们使用Docker部署了一个纯前端项目，但还有一个很重要的问题就是容器中产生的数据（比如log文件），容器一旦被删除，容器内的所有数据也就没有了，为了避免这个问题我们可以将数据存储到容器之外（比如宿主机），这样即使删除容器也不会丢失数据。一旦容器故障，我们可以重新创建一个容器，将数据挂载到...

Docker是一个开源的应用容器引擎，它是基于Go语言并遵从Apache2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的linux机器上，也可以实现虚拟化。通过容器可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运...

上篇文章我们了解了package.json，一般与它同时出现的还有一个package-lock.json，这两者又有什么关系呢？下面一起来了解吧。

随着前端的不断发展，package.json可谓是在前端项目中无处不在，它不仅在项目根目录会有，而且在 node_modules 中也存在。那么这个文件到底是干嘛的，又有什么作用？很多人对它的认识是不是只停留在dependencies、devDependencies项目依赖列表，或者是script项目的各种脚本指令等，实际上它能做的事情远不止这些。

上周突然发现自己的自己站点的图片全都403了，之前还是好好的，图片咋就全都访问不了呢？由于我每次发文章都是先发了掘金，然后再从掘金拷贝到我自己的站点，这样我就不用在自己的站点去上传图片了，非常方便。

Providers是Nest中的一个基本概念，许多Nest中定义的类都可以被视为一个Provider，比如：service、repository、factory、helper等，它们都可以通过constructor注入依赖关系，这就意味着类与类之间可以创建各种依赖关系，并且维护各个类之间依赖关系的工作将委托给Nest运行时系统。

前言之前看到过一个有趣的CSS效果，今天我们也来实现一遍，将动图GIF通过clip-path绘制成一个个跳动的字母。效果如下：GIF随便找的，嗯？这不是重点，重点是下面的实现过程，别被GIF吸引了。如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～绘制字母这是该效...

前言控制器主要是用来处理客户端传入的请求并向客户端返回响应。它一般是用来做路由导航的，内部路由机制控制哪个控制器接收哪些请求。路由为了创建基本控制器，我们需要使用@Controller装饰器，装饰器将类与所需元数据关联起来，并使Nest能够创建路由映射。我们使用nest-cli快速创建一个REST API风格的完整CURD代码。 {...

上篇文章我们学习了如何使用nest-cli来快速生成一个NestJS后端项目，当我们打开编辑器查看代码时，会发现整个代码风格有点类似JAVA的spring框架，并且你会发现一些service类在controller控制器的constructor中注入后，可以不需要手动new就可以直接使用该类对应的实例方法。

Nest 是一个渐进的 Node.js 框架，它可以在 TypeScript 和 JavaScript (ES6、ES7、ES8)之上构建高效、可伸缩的企业级服务器端应用程序。