웨이트, 새로운 웹 킬러?!😮

12596 단어 vuereactvitewebpack
이 블로그에 글을 발표한 후, 나는 차세대 묶음 제품에 관한 일련의 새로운 글을 시작했다.우리는 지금 새로운 웹 도구 시대에 접어들고 있는 것 같다.
소개esbuild and its interesting features를 한 후에 나는'형제'묶음 판매상과 교제하는 것이 논리에 맞다고 생각한다.Vite에서 시작하겠습니다. VueJS 커뮤니티의 프로젝트입니다Evan You.

같은 출발점

Vite에 대해 우리의 상황은 esbuild와 같다.전 세계적으로 지역사회는 성능 문제가 있어도 현재의 도구에 만족한다.
앞에서 말했듯이 오늘 큰 JS 프로젝트가 하나 있다는 것은 보통 개발과 프로그래밍 환경이 있다는 것을 의미하며 때로는 좀 느리기도 하다.병행화나 메모리 최적화를 충분히 이용하지 않는 도구를 선택하든 캐시를 적게 사용하는 중복 조작을 선택하든 이런 느린 원인을 찾기 쉽다.
주: 해결 방안을 좀 제시했습니다.
또한 2세대 도구(예를 들어 웹팩, Rollup, Parcel)는 처음부터 처리할 수 없다recent features of our browsers like ESmodules.

이 아이디어는 무엇입니까?

Vite의 혁명적인 사상은 두 가지 서로 다른 수요를 결합한 도구로 가능한 한 빨리 구축을 최적화하는 것이다.구성Vite의 두 공구는 esbuild와 Rollup이기 때문에 새로운 것이 없다.그런데 왜 두 개의 묶음 도구를 사용해야 합니까?기본적으로 두 가지 이유가 있다.
  • 우리의 의존 관계는 자주 바뀌지 않기 때문에 구축할 때마다 그들의 모듈 트리를 재평가할 필요가 없다.우리는 esbuild와 같은 최적화 도구를 사용하여 공급업체의 패키지를 한꺼번에 생성할 수 있다.이 패키지는 매우 빨라서 서버를 신속하게 시작할 수 있다.
  • 의존항과 달리 원본 코드의 모듈에 많은 변화가 발생한다.따라서 Vite 가장 가까운 브라우저에서 본 컴퓨터로 실행되는 또 다른 ESM 기반 처리 방법을 사용했다.
    • 자세한 내용은 this doc page를 참조하십시오.

    사실, 그것은 어떻게 일합니까?


    이 도구를 더욱 잘 사용하기 위해서, 나는 예시 항목을 통해 작은 시범을 보였다.예시 프로젝트를 만드는 것부터 시작합시다.이것을 만들고 넣는 방법을 보여 드리겠습니다. the link of the github repository in which I published it
    mkdir "example-vite"
cd "example-vite"

git init
yarn init -y
    설치Vite는 매우 간단합니다. 의존항 하나만 있으면 됩니다.
    yarn add -D vite
    이 예에서, 나는 React를 사용하는 예를 제시했다. (이미 많은 Vue를 사용하는 예가 있다.)😉 )
    yarn add react react-dom
    Vite 파일에 시작할 일반 명령 3개package.json를 추가합니다.
    소포.json
    {
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  }
}
    마지막으로, 우리는 작은 원본 파일을 Vite 사용할 수 있도록 제공해야 한다.
    색인html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Example Application with Vite</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
    src/main.jsx
    import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <React.StrictMode>
    <h1>Hello world dear readers ! </h1>
  </React.StrictMode>,
  document.getElementById('app')
)
    이제 이 명령으로 개발 서버를 시작하기만 하면 됩니다.
    yarn dev
    🎉 보통 몇 밀리초 안에 Vite 서버를 시작합니다. https://localhost:3000 로 돌리면 이 예쁜 프로그램을 볼 수 있습니다.

    우리는 거짓말을 하지 말자. 이것은 좀 슬프다. Vite CSS를 추가하면 어떻게 되는지 보자.이 제목에 아름다운 색깔chartreuse을 더해 봅시다.다음 스타일시트를 추가합니다.
    src/index.css
    h1 {
  color: chartreuse;
}
    그리고 이 새 파일에 가져오기만 추가하면 됩니다.src/main.jsx
    import './index.css'
    이제 너는 아름다운 색깔이 생겼다clearly lacks contrast to be accessible!

    지금 yarn build 명령을 실행하려고 시도하면 Vite 폴더가 dist 만들어지는 것을 볼 수 있습니다.어떠한 설정도 없이 나는 정적 서버에 이러한 서로 다른 자원을 배치할 수 있다.

    본 컴퓨터Vite에서 자바스크립트 패키지 2개(원본 코드 1개, 공급업체/의존 항목 1개)와 CSS 패키지 1개를 내보내고 가져온 프로그램의 스타일을 내보낼 수 있습니다.다른 도구의 경쟁에 비해 (parcel이 같은 논리를 제공했지만) 이것은 분명히 Vite의 큰 우세이다.구축 속도가 매우 빠르고 설정 없이 예상한 작업을 완성할 수 있다.미안하지만, 난 너무 좋아!
    나는 네가 알고 있는지 모르겠다. react-refresh 공식 React 패키지는 네가 React 응용 프로그램의 자동 리셋을 최적화할 수 있도록 한다.이 패키지를 사용하면 React 구성 요소의 상태를 잃지 않고 동적으로 업데이트할 수 있습니다.Vite 비록 이것은 VueJS 커뮤니티에서 탄생했지만 전문적으로 전방 구조를 대상으로 하지 않았다.따라서 기본적으로 react-refresh와 같은 도구는 포함되지 않습니다.그래서 설정에서 그것을 정의해야 합니다.불행히도 Vite는 다른 도구보다 좋지 않다.프로젝트의 루트 디렉터리에 다른 프로필을 정의해야 합니다.
    그러면 플러그인을 설치하겠습니다.
    yarn add -D @vitejs/plugin-react-refresh
    위트.배치하다.js
    import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default defineConfig({
  plugins: [reactRefresh()],
})
    이제 더 높은 수준의 기능을 테스트하고 싶습니다. 이런 기능들은 고품질의 패키지에서 얻을 수 있습니다.그래서, 나는 로드 지연을 사용하는 단일 페이지 프로그램을 설정했다.나는 본문에서 내가 어떻게 이 점을 해냈는지 보여주지 않을 것이다. 비록 편폭이 너무 길지만, 당신은 직접 방문할 수 있다. test it in your browser
    분명히 로드 지연에 대해 사용Vite이 쉬워요. 놀랐어요!이 도구는 동적 가져오기import()를 사용하여 JS와 CSS에 별도의 블록을 생성하는 것을 즉시 감지합니다.
    const Content = React.lazy(() => import('./lazy'))

    Vite의 이점


    뚜렷하다Vite. 좋은 특성과 장점이 많다.믿을 수 없는 속도를 제외하고, 내가 지적하고자 하는 것은, 이 묶음기는 진정으로 심사숙고한 자동 설정을 제공했다.
    내가 전에 너에게 보여준 프레젠테이션에서, 나는 너에게 Vite 본체 처리를 보여주지 않았고, 정적 파일, 웹 워커스, WASM 바이너리 파일을 설정하지 않았다.그러나 이것은 여기에 그치지 않는다. 이 신기한 도구 자체도 JSX와 Typescript를 지원한다는 것을 인정해야 한다.
    스타일 관리Vite도 약함을 보이지 않았다.플러그인이나 설정이 필요 없습니다. CSS @imports, SASS 등 예비 프로세서, CSS 모듈, 심지어 포스트 프로세서 POSTSS (설정을 정의한 경우) 를 관리할 수 있습니다.
    더욱 흥미로운 것은 Vite 파일을 어떻게 관리해야 환경 변수를 관리할 수 있는지 아는 것은 dotenv 덕분이다.
    그러나 SSR의 설치는 매우 간단하다는 점에서 나는 완전히 놀랐다.

    서버 측 렌더링을 네이티브 방식으로 처리하는 번들에 대해 처음 이야기합니다.나는 생산 중에 다른 도구를 사용하여 서로 다른 응용 프로그램을 개발한다.불행하게도 이러한 체계 구조를 구축하는 것은 여전히 매우 복잡하다.
    따라서 개발자들은 주로 넥스트와 넥스트 같은 열쇠 해결 방안으로 방향을 바꾸어 이 문제들을 관리하는 것을 볼 수 있다.그 자체가 나쁜 일은 아니다.그러나 일부 프로젝트에서는 업무 수요를 충족시키기 위해 이 기능을 제어할 필요가 있다고 생각합니다.그래서 우리는 매우 기쁘다.env이런 공구가 이미 고려되었다.나는 네가 read this page of the documentation of Vite 에 가서 이 점을 어떻게 실현하는지 이해하도록 초청한다.

    그래서 저희가 웹 패키지 사용을 멈춘다고요?


    이 도구에 대해 칭찬적인 소개를 한 후에 사람들은 이런 질문을 할 수 있다. 그렇다.그러나 간단한 규칙 하나를 잊어서는 안 된다.

    Everything that a tool tends to do magically for you often becomes much more complicated to customize.


    개발자 체험을 개선하기 위한 많은 선택Vite이 걱정이 되는 것 같다.나는 Vite팀이 이러한 기본 설정을 유지하는 것이 매우 복잡할까 봐 좀 걱정된다.Vite의 좌우명인'적게 하지만 잘하는 도구를 제공하고 싶다'는 것과 반대로 우리는 많은 약속을 할 수 있는 도구가 있다.그러나 esbuild는 플러그인을 사용하여 그 기능을 확장하는 기능을 제공했기 때문에 주요 도구의 원생 기능이 될 필요가 없다는 것을 깨달아야 한다.
    또한 Vite도 Vite를 기반으로 한 2세대 패키지로 풍부한 플러그인 생태계에 혜택을 받았고 이 플러그인들은 대부분 호환된다.그러나 전체 설정의 편집과 유지보수는 매우 복잡하기 때문에, 응용 프로그램에서 테스트하고 싶다면, 나는 네가 그것을 건드리지 않기를 바란다.
    제가 지적하고자 하는 것은 VuePress와 같은 일부 도구는 현재 다른 선택Vitepress을 제공했고 Rollup을 귀속기로 사용합니다.Vite 솔루션을 사용하기 전에 주목받는 3세대 번들을 테스트해 보는 것이 좋습니다Snowpack.

    Stay tuned!

    HDU5155 Harry And Magic Box
    [LintCode] Coins in a line II

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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