カテゴリー
【Svelte Framework入門】Svelteアプリのビルド出力をindex.htmlのみにするViteプラグインを導入してみる
※ 当ページには【広告/PR】を含む場合があります。
2023/01/07
前回では、軽量なJSフレームワーク・
このViteの良いところは、爆速の次世代バンドラ・
これによって、面倒な実装を自前でやらなくても、ほとんどの場合、誰かが提供しているプラグインを利用させてもらうだけでサッと欲しい機能が追加することができます。
今回のお題は、「ビルド後の出力ファイルを可能な限り減らす」ことに着目して、究極的な話、
index.htmlvite-plugin-singlefileプラグインでリソースを一つにまとめる
通常、ViteでSvelteのプロジェクトをビルドしてみると、デフォルトではdistフォルダの中にビルド済みのリソースが固められて出力されています。
$ tree dist/
dist/
├── assets
│ ├── ...
│ └── hoge.jpg
├── lib
│ ├── ...
│ └── piyo.js
├── ...
├── favicon.png
└── index.html
これはSvelte標準のrollupよりはまだスッキリとはしているものの、特に静的なアセットファイルは分離されています。
もちろん、リモートのサーバーから必要になったときだけアセットファイルを読み込む方式は、クライアント側の処理のオーバーヘッド時間を短縮させ、遅延読み込みなどにもメリットが大きいのは確かです。
しかし、例えば下のリンク記事で紹介したようにローカルで使用するバイナリSPAだと、最初に一気にリソースを全部プリロードしておいたほうがパフォーマンスは向上すると考えられます。
つまりは、適宜プログラムに合わせた読み込み方式の使い分けが重要ということになります。
全てのリソースをビルド時にインライン化(コード埋め込み)してくれるViteのプラグインに
プラグインの使い方はいつものように、まずインストールします。
$ yarn add vite-plugin-singlefile -D
インストールしたら、プロジェクトの
vite.config.ts import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
//...中略
//👇追加
import { viteSingleFile } from 'vite-plugin-singlefile';
//...中略
export default defineConfig({
plugins: [
svelte(),
//👇追加
viteSingleFile(),
//...以下略
これでViteビルドすると、可能な限り
index.htmlSVGをインライン化する「Vite SVG loader」を使う
先程の「vite-plugin-singlefile」はcssファイルや一部の画像バイナリファイルをインライン化してくれはしましたが、SVG画像などの通常ではインライン化してくれないリソースファイルには、それぞれが対応したローダープラグインを使って、htmlに埋め込めるかどうか検討しないといけません。
SVG画像は
「vite-svg-loader」は元々Vue系のプラグインですが、Rawで呼び出すことで通常のローダーとしてSvelteでも利用することが可能です。
こちらもまずまずプラグインをインストールします。
$ yarn add vite-svg-loader -D
インストールしたら、プロジェクトの
vite.config.ts import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
//...中略
//👇追加
import svgLoader from 'vite-svg-loader';
//...中略
export default defineConfig({
plugins: [
svelte(),
viteSingleFile(),
//👇追加
svgLoader({
defaultImport: 'raw'
})
//...以下略
ポイントとしてはVue以外のフレームワークでは、デフォルトで
rawローダーは単にローダーであって、このままだと生のSVGをビルド時に読み込んでくれるだけです。
SVGをindex.htmlにインライン化するには、
URLエンコード自体は難しいことはないので、別のnpmパッケージのライブラリユーティリティを使っても良いですし、画像のエラーチェックなどなしに手前味噌でよいならば、以下のように、SVG画像をコンポーネントファイルで呼び出して利用します。
<script lang="ts">
//👇SVG画像の生ロード
import hoge from '../../assets/hoge.svg';
//👇(若干やっつけ仕事な)URLエンコード
const enc = tacoPlayer
.replace(/\r?\n|<!--.*-->/g, '')
.match(/<svg.+<\/svg>/)[0]
.replace(/"/g, "'").
replace(/</g, '%3C')
.replace(/>/g, '%3E')
.replace(/#/g, '%23');
</script>
<object title="hoge" data="data:image/svg+xml,{enc}" type="image/svg+xml"></object>
<style lang="scss">
object {
display: block;
width: 32px;
height: 32px;
position: absolute;
}
</style>
という感じに呼び出すことが出来ます。
こうすることで、Viteのビルド後に、svg画像も
index.htmlまとめ
今回はSvelte＆Viteの開発時に知っておきたい、ビルド生成物の一本化・静的なアセットファイルのインライン化をまとめて紹介しました。
あくまでもインライン化するかしないかは、開発者の考え方によりますが、使い分けの方法を覚えておかれると後々便利に使えるかも知れません。
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー