저희가 Astro에 대한 체험.

10181 단어 webdevastrojavascript
우리는 divRIOTS.com으로 Astro을 지었다.
"우리가 시작했어. 다른 틀이 나왔어. 다른 녀석이 웹 사이트를 만들고 블로그를 쓰고 있어."
재미있게 만들 수 있는지 봅시다.😉

Astro란?


만약 당신이 이미 Astro을 알고 있다면, 당신은 skip to the next chapter을 선택할 수 있습니다.

Astro is a Static Site Generator (SSG). Build your pages in .astro files (very close to HTML/JSX) and sparkle them with React/Vue/Preact/Svelte components. It deals with file-based routing and templates neutrally. Bring your component framework. In my words


더 많아요.Astro's introduction blog post 만나요.
만약 당신이 시간이 있다면, 여기에 90min video and Transcript이 있습니다.

저희가 왜 Astro를 선택했는지.


Not because it's the new/latest shiny framework 😀


나는 4월에 처음으로 Astro을 보았을 때 나의 생각을 나눴다.

조지

나는 오늘 아침에 만난 적이 있다.팀에서 곧 내놓을'메타 웹 프레임워크'(meta 웹 프레임워크)에는 제가 모르는 게 있을 수도 있어요.😅)나는 그것이 우리에게 몇 가지 중요한 것을 보여 주었다고 생각한다.다음은 그것과 신흥원 틀에 대한 저의 졸견(1/11)입니다.
2021년 4월 10일 오전 8:36
새로운 divRIOTS.com 사이트를 개발할 때, 우리는 최선의 선택을 찾았다.
우리의 요구는 다음과 같다.

  • 간단하다. 그것은 방대한 사이트가 될 수 없다.

  • JavaScript에서 작동하는 친숙한 생태계

  • 100% 정적 HTML 생성 - 좋은 성능, 좋은 검색엔진 최적화.

  • 파일 기반 라우팅 - 매우 편리한

  • 구성 요소 구동을 위한 개발을 허용합니다. 이것이 바로 우리가
    • 을 구축하고자 하는 방식입니다.

  • 할인 지원 - 블로그 게시물
    • 104만5천679만1천510명이다.
    그러나 믿든 안 믿든 네가 결정해라. 우리의 요구에 부합되는 옵션은 별로 없다.
    대부분의 어셈블리 제어 옵션에는 상대적으로 무거운 JavaScript가 포함됩니다.
    내용이 100% 정적이더라도 many static site generators의 유효 하중.
    한편, JavaScript가 없는 SSG는 hydration 또는 Nunjucks과 같은 템플릿 엔진을 사용합니다.그것들은 놀라운 선택이지만, 이것은 다른 언어와 다른 모델이다.어셈블리 제어가 아닙니다.

    We just wanted a good Static Site Generator with a JavaScript Developper Experience and 100% HTML output by default. And Astro is precisely that.


    액체의 순천문


    은 100% divRIOTS.com에 지어졌다.
    Astro, React, VueSvelte의 partial hydration 또는 islands 기능이 없습니다.
    서류는 .astro개뿐이다.

    You don't need to use the cutting-edge hydration capabilities of Astro to already benefit from it.


    Astro은 우아한 구성 요소 모델과 튼튼한 CSS 파이프를 제공하고 범위가 명확한 CSS, CSS 모듈과Sass 지원을 갖추고 있다.
    즉시 사용할 수 있습니다.

    애기나무 과소평가된 특징


    Astro's CSS Bundling is probably its most underrated feature. It never makes it to the headline but it's by far my favorite!


    에서 astro 구성 요소에 필요한 위치에 <style> 표시를 하고 <link ref="stylesheet">에 <head>의 목록을 추가하면 된다.
    예를 들어 Astro은 <head>의 2개 전역 css를 가장 일반적인 방식으로 사용한다.
    <link href="/css/reset.css" rel="stylesheet" />
<link href="/css/global.css" rel="stylesheet" />
    이 .css 파일들은 모두 축소되지 않았기 때문에 단독으로 호출하면 최상의 성능 결과를 제공할 수 없다.
    그러나 astro build 생산을 위해 구축될 때 <style> 라벨과 <link ref="stylesheet">은 자동으로 축소되고 묶인다.
  • 한 스타일이 하나의 파이프라인에만 나타나는 경우 해당 파이프라인에만 해당 스타일이 로드됩니다.( /_astro/[page]-[hash].css )
  • 한 스타일이 여러 파이프라인에 나타나면 데이터 중복 제거(\_astro/common-[hash].css)
    • 제작 중인 페이지는 다음과 같습니다.
    <link href="/_astro/common-[hash].css" rel="stylesheet" />
<link href="/_astro/mypage-[hash].css" rel="stylesheet" />
    /_astro/common-[hash].css은 페이지마다 똑같습니다.그것은 캐시되어 있어 사이트 내비게이션 기간에 다시 다운로드하지 않는다.더 좋은 결과가 나오기는 어렵다.
    이것은 내가 가독성과 유지보수의 방식에 따라 양식을 작성하고 astro build을 최상의 성능을 얻을 수 있다는 것을 의미한다.

    I don't know any static site generator capable of doing [pure] CSS Bundling and minification so seamlessly.


    자세한 내용은 divRIOTS.com을 참조하십시오.

    Astro의 스타일 가이드 #번들 성과 결과


    출력은 100% 최적화된 HTML/CSS입니다.천천히 하기 어렵다😀


    Astro는 뭐가 부족해요.


    나의 졸견으로는 많지 않다. 이 증명이다.
    하지만 다음은 제 버킷리스트입니다.

    소란일반 도메인 이름 형식 JavaScript 처리


    의 CSS 귀속과 같이 제 <script> 라벨이 가장 좋은 방식으로 전송, 귀속, 블록과 축소되기를 바랍니다.
  • Transpiled: ES202X 코드를 작성하여 더 호환되는 출력을 얻을 수 있습니다.
  • 번들: node_modules에서 원시 모듈을 가져올 수 있습니다.
  • Chuncked: 모듈이 여러 페이지에 사용되는 경우 common-chunk.js으로 이동합니다.
  • 소형화: 모든 사람들이 소형 자바스크립트를 원한다. 영원히 그렇다.
    • 이 기능을 사용하면 Astro에 webpack 또는 gulp을 구성할 필요가 없습니다.
    Astro

    GitHub 질문 #370 화상 처리


    JavaScript와 마찬가지로 이미지 최적화도 정적 사이트 생성기에 추가해야 하는 상당히 복잡한 구축 과정이다.즉시 사용할 수 있는 지원은 최소한의 노력으로 최대의 성능을 얻는 데 도움이 될 것이다.

    GitHub 질문 #492 특정 페이지에 대한 영구 링크


    오늘 모든 페이지는 /slug/index.html으로 생성되었지만 일부 페이지는 /slug.html으로 생성되어야 한다.예컨대 /404.html.

    GitHub 질문 #465 결어


    Astro is more than a SSG


    에서 말한 바와 같이 의 또 다른 눈에 띄는 특징은 틀에 대한 중립성이다.
    Astro은 라우팅, 레이아웃, 데이터 관리 및 SSR 인프라를 담당하며 다른 프레임(현재 Astro, React, Vue3, Preact)에서 구성 요소를 가져올 수 있지만 필요할 경우 출력에서 제로 자바스크립트가 실행됩니다.
    구성 요소 프레임워크가 나타나고 사라짐에 따라 웹 사이트를 더 오래 유지할 수 있습니다.구성 요소의 사용 수명을 연장할 수 있습니다. 구성 요소를 한 프레임에서 다른 프레임으로 옮길 필요가 없기 때문입니다.네가 쓰고 싶은 만큼 써라.
    나는 Svelte을 '불가지론원 틀' 이라고 부른다.나는 원 프레임워크와 렌더링 라이브러리를 분리하는 것이 매우 의미가 있기 때문에 다른 해결 방안이 이 분야에 나타나는 것을 볼 수 있을 것이라고 생각한다.

    애기나무 또 다른 Astro 웹 사이트 출시 예정


    , 저희가 곧 내놓을 제품은 코드단에서 디자인 시스템을 구축하고 관리하는 데 사용되며 곧 발표될 것입니다.
    전착륙도 Backlight.dev년에 완성되었지만, 이것은 그것을 새로운 수준으로 이끌었다🚀

    Stay tuned!

    kintone 계산 플러그인 체크 상자 처리 방법
    2015-10-16 Invoke 함수 InvokeRepeating 함수Cancel Invoke Invoke 함수 취소

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage