enhance(dev): improve Frontend Bundle Report

.github/scripts/frontend-js-size.mjs

@@ -530,6 +530,13 @@ function renderFrontendBundleReport(before, after) {
 	return lines.join('\n');
 }
 
+function renderVisualizerArtifactLink() {
+	const artifactUrl = process.env.FRONTEND_BUNDLE_REPORT_ARTIFACT_URL;
+	const artifactName = process.env.FRONTEND_BUNDLE_REPORT_ARTIFACT_NAME || 'frontend-bundle-report';
+	const htmlFile = process.env.FRONTEND_BUNDLE_REPORT_HTML_FILE || 'frontend-bundle-visualizer.html';
+	return `> [Bundle visualizer HTML](${artifactUrl}) is included in the ${code(artifactName)} artifact as ${code(htmlFile)}.`;
+}
+
 const args = process.argv.slice(2);
 const [beforeDir, afterDir, beforeStatsFile, afterStatsFile, outFile] = args;
 const before = await collectReport(beforeDir);
@@ -547,6 +554,8 @@ const body = [
 	'## Bundle Stats',
 	'',
 	renderFrontendBundleReport(collectVisualizerReport(beforeStats), collectVisualizerReport(afterStats)),
+	'',
+	renderVisualizerArtifactLink(),
 ].join('\n');
 
 await fs.writeFile(outFile, body);

.github/workflows/frontend-bundle-report.yml

@@ -101,7 +101,6 @@ jobs:
         working-directory: before
         env:
           FRONTEND_BUNDLE_VISUALIZER: 'true'
-          FRONTEND_BUNDLE_VISUALIZER_TEMPLATE: raw-data
           FRONTEND_BUNDLE_VISUALIZER_FILE: ${{ runner.temp }}/frontend-bundle-report/before-stats.json
         run: pnpm --filter frontend run build
 
@@ -120,10 +119,20 @@ jobs:
         working-directory: after
         env:
           FRONTEND_BUNDLE_VISUALIZER: 'true'
-          FRONTEND_BUNDLE_VISUALIZER_TEMPLATE: raw-data
           FRONTEND_BUNDLE_VISUALIZER_FILE: ${{ runner.temp }}/frontend-bundle-report/after-stats.json
+          FRONTEND_BUNDLE_VISUALIZER_HTML_FILE: ${{ runner.temp }}/frontend-bundle-report/frontend-bundle-visualizer.html
         run: pnpm --filter frontend run build
 
+      - name: Upload bundle visualizer
+        if: steps.check-base-visualizer.outputs.supported == 'true'
+        id: upload-bundle-visualizer
+        uses: actions/upload-artifact@v7
+        with:
+          name: frontend-bundle-visualizer
+          path: ${{ runner.temp }}/frontend-bundle-report/frontend-bundle-visualizer.html
+          if-no-files-found: error
+          retention-days: 7
+
       - name: Generate report markdown
         if: steps.check-base-visualizer.outputs.supported == 'true'
         shell: bash
@@ -131,6 +140,9 @@ jobs:
           BASE_SHA: ${{ github.event.pull_request.base.sha }}
           HEAD_SHA: ${{ github.event.pull_request.head.sha }}
           PR_NUMBER: ${{ github.event.pull_request.number }}
+          FRONTEND_BUNDLE_REPORT_ARTIFACT_URL: ${{ steps.upload-bundle-visualizer.outputs.artifact-url }}
+          FRONTEND_BUNDLE_REPORT_ARTIFACT_NAME: frontend-bundle-visualizer
+          FRONTEND_BUNDLE_REPORT_HTML_FILE: frontend-bundle-visualizer.html
         run: |
           REPORT_DIR="$RUNNER_TEMP/frontend-bundle-report"
           node after/.github/scripts/frontend-js-size.mjs before after "$REPORT_DIR/before-stats.json" "$REPORT_DIR/after-stats.json" "$REPORT_DIR/frontend-js-size-report.md"
@@ -145,6 +157,7 @@ jobs:
           REPORT_DIR="$RUNNER_TEMP/frontend-bundle-report"
           test -s "$REPORT_DIR/before-stats.json"
           test -s "$REPORT_DIR/after-stats.json"
+          test -s "$REPORT_DIR/frontend-bundle-visualizer.html"
           test -s "$REPORT_DIR/frontend-js-size-report.md"
           cat "$REPORT_DIR/frontend-js-size-report.md" >> "$GITHUB_STEP_SUMMARY"
 

packages/frontend/vite.config.ts

@@ -27,27 +27,29 @@ const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.s
 function getBundleVisualizerPlugin(): PluginOption[] {
 	if (process.env.FRONTEND_BUNDLE_VISUALIZER !== 'true') return [];
 
-	const template = process.env.FRONTEND_BUNDLE_VISUALIZER_TEMPLATE === 'markdown'
-		? 'markdown'
-		: process.env.FRONTEND_BUNDLE_VISUALIZER_TEMPLATE === 'raw-data'
-			? 'raw-data'
-			: 'treemap';
-	const defaultFilename = template === 'markdown'
-		? path.resolve(__dirname, '../../built/_frontend_bundle_visualizer_/report.md')
-		: template === 'raw-data'
-			? path.resolve(__dirname, '../../built/_frontend_bundle_visualizer_/stats.json')
-			: path.resolve(__dirname, '../../built/_frontend_bundle_visualizer_/stats.html');
-
-	return [
+	const visualizerOptions = {
+		title: 'Misskey frontend bundle visualizer',
+		gzipSize: true,
+		brotliSize: true,
+		projectRoot: path.resolve(__dirname, '../..'),
+	};
+	const plugins = [
 		visualizer({
-			filename: process.env.FRONTEND_BUNDLE_VISUALIZER_FILE ?? defaultFilename,
-			title: 'Misskey frontend bundle visualizer',
-			template,
-			gzipSize: true,
-			brotliSize: true,
-			projectRoot: path.resolve(__dirname, '../..'),
+			...visualizerOptions,
+			filename: process.env.FRONTEND_BUNDLE_VISUALIZER_FILE,
+			template: 'raw-data',
 		}) as PluginOption,
 	];
+
+	if (process.env.FRONTEND_BUNDLE_VISUALIZER_HTML_FILE != null) {
+		plugins.push(visualizer({
+			...visualizerOptions,
+			filename: process.env.FRONTEND_BUNDLE_VISUALIZER_HTML_FILE,
+			template: 'treemap',
+		}) as PluginOption);
+	}
+
+	return plugins;
 }
 
 /**