Skip to content

Instantly share code, notes, and snippets.

@pipopotamasu

pipopotamasu/viteでreactのボイラープレートを作ってみた.md

Last active March 4, 2022 08:03
Show Gist options
  • Save pipopotamasu/fd8a9aa4b38fc975c1f7abacbea8f637 to your computer and use it in GitHub Desktop.
Save pipopotamasu/fd8a9aa4b38fc975c1f7abacbea8f637 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
viteでreactのボイラープレートを作ってみた.md

viteでreactのボイラープレートを作ってみた

https://github.com/pipopotamasu/react-vite

これ作った。

viteとは

https://ja.vitejs.dev/

フロントエンドのビルドツール及び開発用サーバー。webpackとwebpack-dev-serverを一緒にした感じのようなもの。 Vue.jsの作者であるEvan Youによって作られた。

以下ざっくりとした特徴

  • 開発用のビルドと開発用サーバーの立ち上げがめちゃくちゃ早い
    • 裏側でesbuild(Go製)を使っているため
      • Go製なので、Node.js製のwebpackやrollup、parcelなどと比べ格段にパフォーマンスが良い
    • デフォルトでブラウザのESMを使う前提でビルドされるので、ブラウザのESMを使わないものと比べビルド量が少ないため
  • 本番用のビルドでは裏側でrollupを使っている
    • つまり開発と本番のビルドで使っているビルドツールが違う
  • デフォルトでレガシーブラウザ(IE11とか)はサポート対象外

viteでどんなものを作ったか

https://github.com/pipopotamasu/react-vite

viteでボイラープレート作ってみての感想

pros

  • 宣伝通り開発用のビルドが非常に早くて最高
  • vite previewというプロダクションビルドしたものをプレビューできるビルトインサーバーが入っていて、プロダクションビルドの確認が楽

cons

  • プロダクションビルドはrollupなので、そこそこ時間がかかる
  • 設定ファイルが面倒。。。
    • 開発用(esbuild)と本番用(rollup)で別のビルドツール使っているので、 とある設定をするのにesbuildとrollupで別々の設定書かなきゃいけない場合がある
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment