v2.8.2

Migration

このページに minista v1 と v2 の相違点をまとめています。

CAUTION

開発途中でのメジャーアップデートはおすすめしません。v1 は webpack ベースでしたが v2 は Vite に変わっています。Vite の処理は webpack よりも厳格でエラーを解決できない場合があります。

Performance

develop: v1-latest

9.1715s

develop: v2.0.0

0.6006s (-93.45%)

develop: v1-latest

10.7899s

develop: v2.0.0

5.9628s (-44.73%)

Example: { js: 319KB, css: 101KB, components: 38, pages: 15 }

minista v1 と v2 の最も大きな違いはパフォーマンスです。v1 はページやコンポーネントが増えるほどに開発サーバーの起動が遅くなっていました。v2 は規模に関係なく 0.6 秒ほどで立ち上がります。本番ビルドの時間も半分近く縮められるでしょう。

Config

webpack.config.js で設定していた内容は、専用のコンフィグファイルに移りました。JavaScript ファイルのエントリーや書き出し先の設定などは似ていますが、ローダーや webpack プラグインは使用できません。拡張は ViteRollup のエコシステムを使用することになります。Config 詳細 →

// minista.config.ts
export default {
  assets: {
    entry: ["src/assets/script.ts", "src/assets/style.css"],
  },
}

Extension

webpack はテンプレートの拡張子を .js にできましたが、Vite は .jsx でなければエラーとなります。拡張子を一括で変更する場合は以下のようなライブラリを使用した変換が簡単です。

$ npm install --save-dev renamer
$ npx renamer -f .js -r .jsx "src/pages/**"
$ npx renamer -f .js -r .jsx "src/components/**"

Pages

render() を書く必要がなくなりました!また、非同期関数 getStaticData で CMS のデータを取得してダイナミックルーティングを行えるなど開発の幅が広がっています。Pages 詳細 →

const PageHome = () => {
  return <h1>Home</h1>
}

export default PageHome

Componnets

コンポーネントが自身の CSS ファイルを読み込めるようになりました!ファイルの置き場がバラけないので管理が容易です。Componnets 詳細 →

import "./app-header.css"

const AppHeader = () => {
  return <header className="app-header">minista</header>
}

export default AppHeader

<Head> が組み込みコンポーネントになりました。依存ライブラリである react-helmet をプロジェクト側で呼ぶのは違和感があったため、ラッパーとして実装されています。

import { Head } from "minista"

export default () => {
  return (
    <Head>
      <title>タイトル</title>
      <meta name="description" content="ディスクリプション" />
    </Head>
  )
}