Vite、新しいウェブパックキラー?😮

12437 ワード
vue react vite webpack テキストリンク
このブログを取り扱った後、私は新しい世代のバンドルに関する記事の新しいシリーズを始めました.我々は現在、Webツールの新しい時代に入っているようです.
導入したesbuild and its interesting features , それは私には“リトルブラザーズ”バンドルに対処するために論理的に思える.VEJSコミュニティからのプロジェクト、VITEから始めましょうEvan You .

同じ出発点


With Vite 我々はと同じ状況にあるesbuild . グローバルなコミュニティは、現在のツールでは、いくつかのパフォーマンスの問題があっても満足している.
私が前の記事で言ったように、今日は大きなJSプロジェクトを持っていることは、しばしば少し遅くなっているdevとprod環境を持つことを意味します.並列化またはメモリ最適化を十分に利用しないツールの選択、またはキャッシュを非常に活用する反復操作の間で、これらのスローネスの原因を識別するのは簡単です.
注意:いくつかの解決策を提案しました.
また、第2世代ツール(webpack、rolulup、小包のような)は最初から処理できませんでしたrecent features of our browsers like ESmodules .

何がアイデアですか？


革命的な考えVite は、ビルドを最適化するために2つの異なるニーズのための2つのツールを組み合わせることです.作り上げる二つの道具Vite are esbuild and Rollup , だから何も新しい.しかし、なぜ2つのバンドルツール?2つの理由から、
  • 依存関係は頻繁に変更されませんので、各ビルドでモジュールツリーを再評価する必要はありません.我々は一度、すべてのために最適化されたツールのような我々のベンダーの束を生成することができますesbuild . このバンドルは非常に高速であり、サーバーのクイックスタートを可能にします.
  • ソースコード内のモジュールは依存関係と異なり、多くの変更を受けます.So 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
    この例の目的のために、私は、反応による例を提案します😉 )
    yarn add react react-dom
    つの通常のコマンドを起動するVite に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日本学術振興会
    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/indexCSS
    h1 {
  color: chartreuse;
}
    それから、我々はちょうどこの新しいファイルに輸入を加える必要があります.src/main日本学術振興会
    import './index.css'
    今、あなたは美しい色を持っているclearly lacks contrast to be accessible !

    あなたが現在動くならばyarn build コマンド、あなたはそれを見ることができますVite あなたを構築するdist フォルダ.任意の設定なしで、これらの異なるリソースを静的サーバーに配備する準備ができています.

    我々は自然にそれを観察できるVite 2つのJavaScriptバンドル(ソースのための1、ベンダー/依存のための1)とあなたのアプリケーションで輸入されたスタイルをエクスポートするCSS束をエクスポートします.そしてこれは明らかにVite 他のツールの競争と比較して(しかし、小包は、同じ論理のいくつかを提供します).ビルドは非常に高速であり、それを設定することなく行うには何を期待します.すみませんが、それは素晴らしいと思います!
    あなたが知っているかどうかわからない react-refresh , あなたが反応アプリケーションの自動更新を最適化することができます公式反応パッケージ.このパッケージでは、それらの状態を失うことなく、オンザフライであなたの反応成分を更新することができます.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に対して別々のチャンクを生成します.
    const Content = React.lazy(() => import('./lazy'))

    VITEの強み


    明らかにVite 多くの良い機能と利点があります.その驚くべき速度の他に、私はこのバンドルが本当によく考え出された自動設定を提供することに注意したいです.
    私が以前あなたに与えたデモでは、私はあなたにそれを示しませんでしたVite ネイティブとネイティブの設定静的ファイル、Webワーカー、ワムバイナリなし.しかし、それは停止しません、我々は、この魔法のツールもネイティブにJSXとTypesScriptをサポートしていることを認めざるを得ない.
    スタイル管理に関してはVite されません.任意のプラグインや設定なしで、それはあなたがCSSを管理することができます@imports , SASSとlessのようなプリプロセッサ、CSSモジュール、postプロセッサpostcssでさえも(設定を定義する場合).
    より逸話Vite 知っている方法を管理する.env 環境変数を管理するファイルdotenv .
    しかし、完全に私を吹き飛ばした機能はSSR .

    サーバー側のレンダリングをネイティブに扱うバンドルについて話したのはこれが初めてです.私は私が開発するさまざまなアプリケーションの生産で他のツールを使用します.残念ながら、このようなアーキテクチャを設定するのは非常に複雑です.
    それで、開発者が主に次のようなターンキー解決に、そして、Nuxtがそれらのためにこれらの問題を管理するようになっているのを見ることができます.これはそれ自体悪いことではない.しかし、いくつかのプロジェクトでは、ビジネスニーズのためにこの機能性を管理することが時々必要であると思います.だから私たちは幸せになることができるようなツールVite 考えたことがある.私はあなたを招待するread this page of the documentation of Vite これを実装する方法を理解するには.

    それで、我々はWebpackを使うのを止めます？


    このツールのこの控えめなプレゼンテーションの後、1つは質問はいを尋ねることができました.しかし、単純なルールを忘れてはいけません.

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


    多くの選択肢Vite 開発者の経験を改善するために少し心配しているようだ.私はこのすべてのデフォルトの設定は、Vite チーム.
    反対にesbuild モットーを持っている“私はいくつかのことが非常によくするツールを提供したい”と、我々はここに多くの約束をするツールがあります.しかし、私たちはVite また、プラグインを使用して、その機能を拡張するには、メインツールにネイティブにせずに定義します.
    また、それを忘れてはならないVite に基づいてRollup , ほとんど互換性があるプラグインの豊かな生態系から利益を得る第2世代バンドル.しかし、ロールラップの設定は非常に編集し、維持するため、複雑なので、あなたがテストするように誘惑されている場合はそれに触れる必要はありません願っていますVite アプリケーションで.
    私はVuePressのようないくつかのツールが今日の選択肢を提供することを指摘したいと思いますVitepress どれがVite バンドルとして.
    ジャンプする前にVite 解決策として、3つ目の世代のバンドルをテストすることをお勧めします.Snowpack

    Stay tuned!

    JSONとReactで履歴書を自作
    Schemeでdefineを使わずに超循環評価器を実装してみた