vue3+ts+vite2 プロジェクトでパッケージング分析プラグインを導入して使用する

Webpack パッケージと比較して、webpack-bundle-analyzerパッケージ サイズを分析するためにプラグインが使用されますが、vite パッケージでは実際にロールアップ パッケージが使用されるため、この記事ではrollup-plugin-visualizerプロジェクト内のプラグインにアクセスする方法を紹介します。

1. プラグインをインストールする

npm install rollup-plugin-visualizer --save-dev

インストールが完了すると、package.json次のように、対応するバージョンが に表示されます。

2. vite.confg.tsにプラグインを導入して使用します

// 引入
import {
    
     visualizer } from 'rollup-plugin-visualizer';

// 使用
plugins: [visualizer()],

以下に示すように:

3. 結果を表示する

npm run buildコマンドを実行すると、プロジェクトstats.htmlによってファイルが生成されます。このファイルをブラウザで開くと、以下に示すように、プロジェクトの各モジュールのパッケージ サイズが表示されます

。