前端

又一个比Nodejs快的运行时,它叫LLRT

又一个比Nodejs快的运行时,它叫LLRT

月盾
前端圈的发展一向让人感觉学不动,前有Deno,后有Bun,这不,最近又出了个比Nodejs快的Runtime,它叫LLRT。 1. 什么是LLRT LLRT是Low Latency Runtime的缩写,是一种轻量级JavaScript运行时,旨在满足对快速高效的无服务器应用程序日益增长的需求。与在AWS Lambda上运行的其他JavaScript运行时相比,LLRT的启动速度提高了10倍以上,总体成本降低了2倍。 2. LLRT是如何做到比Nodejs快的 它内置在Rust中,利用QuickJS作为JavaScript引擎,确保高效的内存使用和快速启动。 3. LLRT的发展 它还处于实验阶段,并不稳定,还不推荐用于生产。

next/image组件导致服务器504超时

月盾
谁能想到,一个前端组件也能把服务搞崩溃。这个组件正是next/image,原本是想利用next/image来优化图片,next.js官方也一直推荐这么做。 突然有一天用户反馈网站出现504超时报错,当时优先重启恢复服务。然后把日志打开观察,果不其然,几分钟后就又出现504超时,伴随出现的日志则是: upstream image response failed for https://example.com/280d59d8-f3b0-11ed-a295-00163e253f9a_00002_VvBbv3zj.jpg?OSSAccessKeyId=LTAI5nodLHeacT1J5SmWh&Expires=317044217325&Signature=Wf5jYWf7vnXOyRoKLVtiTCrt8%3D 404 初步判断是图片404导致服务器超时,深入猜测是使用next.js服务端渲染请求了图片资源,而图片资源不存在导致服务器渲染出错。 但是很不合理,服务端只是把图片资源的地址渲染到html中,并不会在服务端请求图片资源才对,为什么服务器日志会出现上述错误信息呢?于是观察浏览器中图片的请求,发现格式是这样的: http://example.com/_next/image?url=https%3A%2F%2Fexample.com%2Ff6c912da-f0cc0000_0d7GBaLE.jpg%3FOSSAccessKeyId%3DmWh%26Expires%3D317043899846%26Signature%3DYUMro%253D&w=384&q=75 浏览器请求的图片资源并不是图片的真实地址,而是经过了next.js服务处理的,尤其是URL最后两个参数,是图片压缩参数。如果你发现图片变模糊了,也可能是这两个参数捣的鬼。直接拿着这个地址去浏览器请求发现响应很慢,这时再次得出结论:这个图片组件有问题。为了验证把所有使用了next/image组件全部使用原生img标签,发布到线上后就再没出现504超时。 总结:next/image组件包装后的图片资源需要经过node层压缩处理,会消耗CPU资源,对于大量的图片资源会有风险,酌情处理。 本次出现的时候伴随着图片资源404,可能是有bug存在,如果加载不到正确的图片就会触发bug。 另一种解决方案:根据官方文档说明,如果使用next/image,需要添加sharp包来提高性能,但是可能需要注意内存消耗问题。

next.js项目使用pm2 reload出现502

月盾
为了使next.js项目能够不宕机,使用了pm2守护进程,既能保证node出现异常情况能够自动重启,也能保证服务器整机重启时自动恢复服务。多年使用下来的确能够良好运行,不过最近却出现了与原本期望不符的情况。 在已经启动next.js项目的情况下,如果需要重启,我使用了pm2 reload appname,实际上没有完美的零停机重启,反而是直接出现服务不可用,访问网站就502,并且一直无法恢复。在查阅pm2 issue后发现确实有这样的bug。 无奈,只能使用pm2 restart来重启应用。

Sveltekit1.0后的使用感受

月盾
之前提到过关于svelte框架——sapper和sveltekit的发展,已经是1年前的事了,其中提到过svelte的框架sapper和sveltekit,sapper已经明确不再更新了,官方推荐的是sveltekit。然后经过两年的迭代更新,于2022年12月终于推出了1.0版本。可以看看官方博客对1.0的介绍Announcing SvelteKit 1.0。 然后谈谈个人感受。 优点: sveltekit集成的还不错,开发体验可以,使用官方提供的脚手架创建的项目就可以直接使用,不需要做任何配置。热更新,响应速度快,支持typescript等等,该有的都有了。 缺点: 又是一个全新轮子,这也是整个前端的通病,除了js是通用的,其他的都能给你整出花来,sveltekit在1.0版本之内已经有破坏性的更新,一年前创建的新项目,一年后基本不能用了。 至于要不要使用,那就看个人情况了,如果你厌烦了其他框架,倒是可以尝尝鲜,如果你想以此来做长期项目的话,个人就不推荐了,毕竟太新,而且向下兼容又做的不好,隔三差五一个破坏性更新,这种折腾劲恐怕没几个人受得了。而且对自己的技术也不能积累,长此以往并没有好处。 sveltekit官方文档

使用sveltekit开发一个服务端渲染(SSR)项目

月盾
上篇简单介绍了sapper和sveltekit的发展,目前sveltekit还只是Beta版本,有很多不确定因素存在,有可能会有大的变更,所以还不推荐在生产环境中使用,不过在个人项目和小项目中可以大胆尝试。 今天我们就正式使用sveltekit开发一个web项目。 第一步:创建项目 mkdir my-app cd my-app npm init svelte@next npm install npm run dev 这样就可以创建一个简单的项目了,不过和我们真实需求还有些差距,既然是使用sveltekit,那么最重要的原因是其支持服务端渲染了。这就需要从服务端获取数据,接下来就实现这样的需求。 第二步:路由 和sapper一样,sveltekit也是基于文件系统的的路由器,这就需要我们来合理的组织目录结构。路由的核心目录是src/routes,当然,这个也是可配置的,按照自己的需求修改svelte.config.cjs,参考文档:https://kit.svelte.dev/docs#configuration。 我们以一个博客系统为例,在scr/routes下创建blog目录,光有目录还不行,如果想要访问 /blog 路由,还需要创建index.svelte文件,内容如下: <script context="module"> /** * @type {import('@sveltejs/kit').Load} */ export async function load({ page, fetch, session, context }) { return fetch(`blog.json`)// index.json.js = blog.json或blog/blog.json .then((r) => r.json()) .then((posts) => { console.log(posts); return { props: { posts } }; }); } </script> <script> export let posts; </script> <svelte:head> <title>Blog</title> </svelte:head> <h1>Recent posts</h1> <ul> {#each posts as post} <!

关于svelte框架——sapper和sveltekit的发展

月盾
虽然您可能现在还没有听说过svelte,但是其实svelte的发展速度超过了你的想象。 本文主要讲的是关于sapper和sveltekit这两款框架的发展。 svelte作者里奇·哈里斯(Rich Harris)在2020年10月的svelte峰会上表示:sapper永远不会发布1.0版本。 也就是说sapper不会发布正式版,一直处于非稳定版本。也可能放弃更新。 主要原因是sapper多年来代码库变得凌乱,但更主要的原因是最近网络发生了很大变化。 而作者放弃sapper后的另一种选择是开发SvelteKit。 Sapper和SvelteKit都是svelte的开发框架,类似于vue的nuxt框架。 sveltekit包含的功能有: 服务端渲染(SSR) 路由 typescript支持 less, scss支持 serverless vite打包 可以看到,sveltekit几乎包含了所有我们想要的功能,既能高效开发,又有高性能。 创建sveltekit的方法: mkdir my-app cd my-app npm init svelte@next npm install npm run dev 需要注意,您的nodejs版本需要更新到v12以上,否则可能出现以下错误: $ npm run dev -- --open > sveltekit-app@0.0.1 dev D:\workspace\sveltekit-app > svelte-kit dev "--open" D:\workspace\sveltekit-app\node_modules\@sveltejs\kit\svelte-kit.js:2 import './dist/cli.js'; SyntaxError: Unexpected string at Module._compile (internal/modules/cjs/loader.js:723:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.

svelte history路由刷新后404

月盾
npms.io上搜索到svelte的route包其实也不算少,使用比较广泛的svelte-spa-router路由包却不支持history模式。有些支持history模式的使用上也不是很方便,试用过五六个支持history的路由后最终@spaceavocado/svelte-router算是满足了要求。 使用简单 功能丰富 支持history和hash 我也是够难伺候的。 在试用了多个支持history的路由过程中,都遇到了一个问题:切换路由后刷新404。这也算是单页应用的通病了。不过像vue这种是在部署到服务器上刷新404,而svelte却在开发过程中也出现了,又想放弃了… 好在我也是试用过五六七八个路由的人了,中间不知道尝试过多少种方法来实现history路由。最后使用@spaceavocado/svelte-router包实现了history路由的时候我还是满心欢喜。 使用方法: //App.svelte <script> import RouterView from '@spaceavocado/svelte-router/component/view'; import { routes } from './router.js' </script> <RouterView /> //router.js import createRouter from '@spaceavocado/svelte-router'; import index from './index/index.svelte'; import a from './a/a.svelte'; import b from './b/b.svelte'; export const routes = createRouter({ mode: "HISTORY", routes: [ { path: '/', name: 'HOME', component: index, }, { path: '/a', name: 'a', component: a, }, { path: '/b', name: 'b', component: b, }, { path: '*', component: index, }, ], }); // index.
基于sapper开发svelte项目配置本地代理

基于sapper开发svelte项目配置本地代理

月盾
sapper可能被放弃更新,如果您要继续使用svelte,可以考虑使用sveltekit 最近使用svelte开发一个项目,说实在的,开发过程中遇到不少问题。 每次遇到问题的时候都有种想放弃的冲动,这生态也太差了,查个啥啥问题都查不到,找个啥啥插件也没有。 不过,到最后,遇到的问题又都解决了。 这不,今天又遇到了本地代理的设置问题。 在说遇到的问题之前先介绍一些项目架构。该项目是基于sapper框架开发,这是一个使用svelte开发的框架,具备以下特点: 服务端渲染 路由 代码分割 默认支持渐进式web应用(PWA) 预取路由 单独的头标签(meta,link等) 作为静态站点弹出 Cypress测试(免费,简单,端到端的测试) 可以看到,sapper基本是集合了目前前端开发所有需求,双向数据绑定,渐进式开发,SSR,静态化,高性能。 遇到的新问题:对于前端项目,调用接口时容易遇到跨域问题,一般是使用本地代理解决。自然也想这样来做,可是sapper没有vue项目那样的生态,用的打包工具也不是webpack,而是rollup。 那么就使用sapper自带的服务端来做代理好了。sapper的服务端用的是polka,而不是express,不过没关系,其实可以相互替换。 最关键的是增加了http-proxy-middleware中间件,却对中间件位置很敏感,不是想随便在哪添加一下就行。需要添加在第一个中间件位置,否则就会优先使用静态服务中间件,导致接口找不到。 完整代码: import sirv from 'sirv'; import polka from 'polka'; import compression from 'compression'; import * as sapper from '@sapper/server'; import { createProxyMiddleware } from 'http-proxy-middleware'; const { PORT, NODE_ENV } = process.env; const dev = NODE_ENV === 'development'; polka() // 需要放在最前面,否则接口404,secure参数解决调用https问题 .use('/api', createProxyMiddleware({ target: 'https://example.com', pathRewrite: { '^/api': '' }, secure: false, changeOrigin: true, })) .

svelte项目rollup配置px2rem

月盾
使用svelte开发项目时遇到需要将px转换成rem的需求,有试过postcss-px2rem,postcss-pxtorem,等postcss插件,都没成成功,最后找到了postcss-units插件成功实现。 完整rollup配置文件如下: converts px to rem 该配置是sapper项目配置 import path from 'path'; import resolve from '@rollup/plugin-node-resolve'; import replace from '@rollup/plugin-replace'; import commonjs from '@rollup/plugin-commonjs'; import url from '@rollup/plugin-url'; import svelte from 'rollup-plugin-svelte'; import babel from '@rollup/plugin-babel'; import { terser } from 'rollup-plugin-terser'; import config from 'sapper/config/rollup.js'; import pkg from './package.json'; import sveltePreprocess from 'svelte-preprocess'; // import { less } from 'svelte-preprocess'; const postcssUnits = require('postcss-units'); const mode = process.env.NODE_ENV; const dev = mode === 'development'; const legacy = !

svelte函数传参

月盾
svelte给dom对象绑定事件和vue框架类似。 定义函数: function handler(index){ alert("hello", index); } 绑定事件: <button on:click={handler}>点击</button> 但是带参函数的使用就略有不同了,函数handler的参数index需要传入的时候,不能直接这样使用<button on:click={handler(123)}>点击</button>,这样的写法会在页面打开时直接执行,而不是在点击按钮的时候执行。 这是初学svelte的时候比较郁闷的事,官方文档中也没有明显的文档说明如何传参。 正确的传参方式是这样的: <button on:click={() => handler(123)}>点击</button> 将on:click的内容改写为匿名函数,在函数中调用。