我切换到Astro的投资组合网站,真是太棒了!
#javascript #文件夹 #网络开发人员 #astro
正如他们所说,

Astro 是为速度设计的多合一Web框架。您可以从任何地方提取内容,并在各处部署它,全部由您喜欢的UI组件和库提供动力。我有点同意;就像我们正在编写纯HTML,CSS和JS代码一样,让人联想到以前将纯HTML运送到浏览器的时代。这允许网站在短短几秒钟内变得互动,也意味着从运送JS并与其他内容肿的前端框架移开,这会减慢网页的初始负载。

好吧,为什么我尝试了Astro?老实说,这是YouTube和博客炒作“闪耀快速”的网站。是的,我也想要一个也很快网站!

Why Astro

它确实是闪闪的快速

要记住的笔记:这不是水疗中心;这是MPA。您在pages/目录中创建的页数将内置在不同的HTML页面中。

就像React或任何前端框架一样,我们在组件方面认为的情况也一样。

Components structure

这意味着更少的代码重复,并且一切都可以按顺序进行,而不是我们用来创建的静态HTML站点。

另外,这并不意味着我们不能添加任何交互性。我们绝对可以,这对Astro来说非常整洁,因为我们可以选择自己的框架,并将其混合并匹配它们。

参考:https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

我必须说,开发人员的体验很棒。来自React.js背景,我很快就熟悉了语法和结构。我通过实验和谷歌搜索了一些事情。这是其中一些:

  • 服务器构建的时间块包含顶级await,因此您可以直接获取博客或数据。
  • 它具有非常相似的JSX模板结构(地图,条件等)。唯一的区别是,对于互动性,您需要使用像过去这样的<script>标签(getElementById,:p)。但这很有趣,因为我只是在构建我的投资组合,并且不想要任何巨大的使用效果或互动(动态行为)。
  • set-html属性很棒!对于我创建的每个页面,我都写下了一些恒定数组,其中值是包含HTML元素的字符串。例如,如果我需要在体验的描述下添加到某个页面的链接,则我使用字符串构建了内容,现在我可以直接将其作为HTML渲染而无需使用任何第三方库。
  • 集成?请查看他们拥有的integrations数量,这是巨大的。这意味着已经为您完成了所有好工作,只需插电即可。我使用了尾风CSS集成,它就像魅力一样。虽然,在不久的将来,我计划研究一些有关网站SEO的信息,并集成了其他一些插件,以使我的网站变得更酷。

如果您想查看Astro提供的最终输出,这是一个偷看:服务器构建整个HTML页面。我们在Astro组件内定义的客户端<script>将附加到相应页面的<head>元素HTML。

Build Output

另外,SSR功能在Astro中看起来很有希望,但我尚未探索它。

灯塔报告:

Lighthouse report

绩效见解(来自Builder.io):这告诉您您的网站对JS/Images/css的肿胀以及如何优化它们。

Performance Insights

最后,绩效真的很重要吗? :)

链接:https://sidharthmohanty.com

github链接:https://github.com/sidmohanty11/sidmohanty11.github.io

请让我知道您在网站上的反馈。我很想做出一些改进。如果您探索了Astro并想分享一些知识,那就太神奇了!我绝不是这个主题的专家,只是与Astro分享了我的经验,因为我喜欢开发人员的体验,以及您可以构建网站的速度以及网站的速度(没有双关语)。欢呼!

感谢您的调整!下次见!