Svelte入門：Sapperからの移行 -Vol.6-

今日は、SvelteKitにおいてSapperからの移行について解説しています。

背景

SvelteKitにおいてSapperからの移行について調査する機会がありましたので、その時の内容を備忘として記事に残しました。

Sapperからの移行について

SvelteKitはSapperの後継であり、その設計の多くの要素を共有しています。
既存のSapperアプリケーションをSvelteKitに移行する予定がある場合、いくつかの変更を加える必要があります。移行時に下記の例を参照すると役立つかもしれません。

• Sapperからの移行
• package.json
• プロジェクトファイル
• ページとレイアウト
• エンドポイント
• 統合

統合

統合に関する詳細な情報については、integrations（統合）を参照してください。

HTMLミニファイア

SapperはデフォルトでHTML最小化ツールhtml-minifierを含んでいました。SvelteKitはこれを含んでいませんが、本番環境の依存関係として追加し、フックを通じて使用することができます：

import { minify } from 'html-minifier';
import { building } from '$app/environment';

const minification_options = {
    collapseBooleanAttributes: true,
    collapseWhitespace: true,
    conservativeCollapse: true,
    decodeEntities: true,
    html5: true,
    ignoreCustomComments: [/^#/],
    minifyCSS: true,
    minifyJS: false,
    removeAttributeQuotes: true,
    removeComments: false, // いくつかのハイドレーションコードにコメントが必要なため、残しておきます
    removeOptionalTags: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    sortAttributes: true,
    sortClassName: true
};

/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
    let page = '';

    return resolve(event, {
        transformPageChunk: ({ html, done }) => {
            page += html;
            if (done) {
                return building ? minify(page, minification_options) : page;
            }
        }
    });
}

vite previewを使用して本番ビルドのサイトをテストする際はprerenderingがfalseになることに注意してください。そのため、最小化の結果を確認するには、ビルドされたHTMLファイルを直接確認する必要があります。

解説

このセクションは、SvelteKitにおけるHTML最小化の実装方法について説明しています。

主なポイントは：

1. 機能の変更点：

• Sapperでは組み込みだった機能をSvelteKitでは外部化
• より柔軟なカスタマイズが可能に
• 開発者による明示的な制御が必要に

1. 設定オプション：

• 広範な最小化オプションの提供
• ブール属性の圧縮
• ホワイトスペースの最適化
• CSSの最小化
• 属性の最適化
  など、様々な最適化オプションが利用可能

1. 実装方法：

• フックを使用した実装
• ビルド時の条件付き処理
• チャンク単位の変換処理

1. 注意点：

• プレビュー環境での動作の違い
• 検証方法の指定
• ハイドレーションコードへの配慮

この変更は、より柔軟なHTML最適化の実装を可能にする一方で、開発者がより明示的に最適化の制御を行う必要があることを示しています。これにより、プロジェクトの要件に応じてカスタマイズされた最適化戦略を実装できるようになっています。

おわりに

今日は、 SvelteKitにおいてSapperからの移行について解説しました。