Vite パッケージングの最適化

指標に関して、ここでは一般的な最適化指標について簡単に紹介します。

• FCP (First Contentful Paint):ホワイトスクリーン時間(最初のテキスト描画時間)
• 速度指数:初回スクリーン時間
• TTI (Time To Interactive): 初めてインタラクティブになった時間
• Lighthouse スコア: Chrome ブラウザ レビュー ツールのパフォーマンス スコア

1. バンドル分析

Vite を使用しているため、プラグインrollup-plugin-visualizer を使用してバンドル分析を実行します。

1.インストール

pnpm i rollup-plugin-visualizer -D

2.はじめに (vite.config.ts ファイルに導入)

import { visualizer } from 'rollup-plugin-visualizer'
const plugins = [vue(), visualizer()]

パッケージ化後、プロジェクトのルート ディレクトリにstats.htmlファイルが生成されるので、それを開きます

ファイルが大きくなり、速度に影響が出ていると分析できます。

 2. 最適化を開始する

1.GZIP設定

ちなみにここではviteのGZIP設定を紹介します。

vite-plugin-compressionをインストールする

npm i vite-plugin-compression -D

vite.config.js 設定を変更する 

import viteCompression from 'vite-plugin-compression'
 
 plugins: [vue(), viteCompression()]

 パッケージ化後、gzip ファイルが生成されますが、有効にするためにサーバー nginx を構成する必要があります。

http {
    gzip_static on;
    gzip_proxied any;
}

 2.echarts を個別に分割

vite.config.js 設定を変更する

build: {
    rollupOptions: {
        output: {
            manualChunks: {
                echarts: ['echarts']
            }
        }
    }
}

パッケージ化後（圧縮前）の Index.js の容量変化

変更前：4.49MB

変更後：1.34MB

3. 画像圧縮

vite-plugin-imageminをインストールする

npm i vite-plugin-imagemin -D

vite.config.js 設定を変更する

import viteImagemin from "vite-plugin-imagemin"
plugins: [vue(), viteImagemin()]

圧縮されたイメージはパッケージ化後に生成されますが、パッケージ化されるたびに再圧縮されるため、時間の無駄になります。それでもよければ、このソリューションを使用するのは非常に簡単です。