test-treeshake: Add rollup-plugin-visualizer (#21657)

Author: marcofugaro

.gitignore

@@ -20,6 +20,8 @@ test/*.cmd
 test/unit/build
 test/treeshake/index.bundle.js
 test/treeshake/index.bundle.min.js
+test/treeshake/index-src.bundle.min.js
+test/treeshake/stats.html
 
 
 **/node_modules

package-lock.json

@@ -96,6 +96,7 @@
     "@babel/preset-env": "^7.13.12",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
+    "chalk": "^4.1.0",
     "concurrently": "^6.0.0",
     "eslint": "^7.23.0",
     "eslint-config-mdcs": "^5.0.0",
@@ -104,6 +105,7 @@
     "rollup": "^2.44.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.3.6",
     "servez": "^1.11.0"
   },
   "jspm": {

package.json

@@ -1,6 +1,27 @@
+import path from 'path';
 import resolve from '@rollup/plugin-node-resolve';
 import filesize from 'rollup-plugin-filesize';
 import { terser } from 'rollup-plugin-terser';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { glconstants, glsl } from '../utils/build/rollup.config';
+import chalk from 'chalk';
+
+const statsFile = path.resolve( __dirname, './treeshake/stats.html' );
+
+function logStatsFile() {
+
+	return {
+		writeBundle() {
+
+			console.log();
+			console.log( 'Open the following url in a browser to analyze the tree-shaken bundle.' );
+			console.log( chalk.blue.bold.underline( statsFile ) );
+			console.log();
+
+		}
+	};
+
+}
 
 export default [
 	{
@@ -30,5 +51,23 @@ export default [
 				file: 'test/treeshake/index.bundle.min.js'
 			}
 		]
-	}
+	},
+	{
+		input: 'test/treeshake/index-src.js',
+		plugins: [
+			glconstants(),
+			glsl(),
+			terser(),
+			visualizer( {
+				filename: statsFile,
+			} ),
+			logStatsFile(),
+		],
+		output: [
+			{
+				format: 'esm',
+				file: 'test/treeshake/index-src.bundle.min.js'
+			}
+		]
+	},
 ];

test/rollup.treeshake.config.js

@@ -0,0 +1,24 @@
+import * as THREE from '../../src/Three.js';
+
+let camera, scene, renderer;
+
+init();
+
+function init() {
+
+	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
+
+	scene = new THREE.Scene();
+
+	renderer = new THREE.WebGLRenderer( { antialias: true } );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.setAnimationLoop( animation );
+	document.body.appendChild( renderer.domElement );
+
+}
+
+function animation( ) {
+
+	renderer.render( scene, camera );
+
+}

test/treeshake/index-src.js

@@ -2,7 +2,7 @@ import babel from '@rollup/plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 import babelrc from './.babelrc.json';
 
-function glconstants() {
+export function glconstants() {
 
 	var constants = {
 		POINTS: 0, ZERO: 0, NONE: 0,
@@ -200,7 +200,7 @@ function addons() {
 
 }
 
-function glsl() {
+export function glsl() {
 
 	return {