Improve rollup perf

Author: captbaritone

packages/webamp/.gitignore

@@ -5,3 +5,4 @@
 /coverage
 /examples/webpack/bundle.js
 **/__diff_output__/
+.rollup.cache

packages/webamp/CHANGELOG.md

@@ -6,8 +6,6 @@
 
 ### Improvements
 
-- New `webamp/butterchurn` entry point which is a single bundle which includes the Butterchurn Milkdrop visualizer by default. This grows the module size by a few hundred kilobytes, but allows you to use Butterchurn without having to install it separately.
-- Switched id3/metadata parsing from using a very old version of `music-metadata-browser` to the latest version of `music-metadata`. `music-metadata-browser` is still supported for users of `webamp/lazy` for backwards compatibility, but it is no longer the default.
 - Added new `Webamp` instance methods:
   - `webamp.toggleShuffle`
   - `webamp.toggleRepeat`
@@ -17,12 +15,9 @@
 
 ### Bug Fixes
 
-- Fixed broken ID3 tag and bitrate parsing.
 - Fix bug where scrolling the main window or playlist window would change the volume but also (incorrectly) scroll the page.
 - Fix bug where resizing the window such that the current layout cannot fit on the page, while also scrolled down the page, would cause the layout to be recentered out of view.
 - Avoid a console log from Redux Dev Tools.
-- Don't show Milkdrop window option in context menu if Milkdrop is not enabled.
-- Fix bug on iPhone where Milkdrop window would resize incorrectly if you attempted to enter fullscreen mode, which is not supported on iPhones.
 
 ## 2.1.2 [CURRENT]
 

packages/webamp/scripts/rollup.mjs

@@ -91,15 +91,28 @@ const BUNDLES = [
 build();
 
 async function build() {
-  for (const bundleDesc of BUNDLES) {
-    console.log(`=======[ Building ${bundleDesc.name} ]=======`);
+  console.log(`🚀 Building ${BUNDLES.length} bundles in parallel...`);
+  
+  const buildPromises = BUNDLES.map(async (bundleDesc) => {
+    console.log(`📦 Building ${bundleDesc.name}...`);
     const plugins = getPlugins({
       outputFile: bundleDesc.output.file,
       minify: bundleDesc.minify,
     });
     const bundle = await rollup({
       input: bundleDesc.input,
       plugins,
+      // Enable tree shaking optimizations
+      treeshake: {
+        moduleSideEffects: false,
+        propertyReadSideEffects: false,
+        tryCatchDeoptimization: false,
+      },
+      // Optimize external dependencies handling
+      external: (id) => {
+        // Don't externalize these - we want them bundled for browser compatibility
+        return false;
+      },
       onwarn: (warning, warn) => {
         // Suppress expected circular dependency warnings from external libraries
         if (warning.code === "CIRCULAR_DEPENDENCY") {
@@ -123,5 +136,9 @@ async function build() {
       sourcemap: true,
       ...bundleDesc.output,
     });
-  }
+    console.log(`✅ Completed ${bundleDesc.name}`);
+  });
+
+  await Promise.all(buildPromises);
+  console.log(`🎉 All ${BUNDLES.length} bundles built successfully!`);
 }

packages/webamp/scripts/rollupPlugins.mjs

@@ -22,7 +22,12 @@ export function getPlugins({ minify, outputFile, vite }) {
     vite ? null : stripInlineSuffix(),
     // https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
     // TODO: We could offer a version which does not inline React/React-DOM
-    nodeResolve(),
+    nodeResolve({
+      browser: true,
+      preferBuiltins: false,
+      // Skip deep resolution for better performance
+      dedupe: ["react", "react-dom"],
+    }),
     // Needed for music-metadata-browser in the Webamp bundle which depends upon
     // being able to use some polyfillable node APIs
     nodePolyfills(),
@@ -51,8 +56,32 @@ export function getPlugins({ minify, outputFile, vite }) {
     // because react-redux import react as if it were an es6 module, but it is not.
     commonjs(),
     // Must come after commonjs
-    babel({ babelHelpers: "bundled", compact: minify }),
-    minify ? terser() : null,
+    babel({
+      babelHelpers: "bundled",
+      compact: minify,
+      // Optimize Babel by excluding node_modules and only processing necessary files
+      exclude: ["node_modules/**"],
+      include: ["js/**/*"],
+    }),
+    minify
+      ? terser({
+          compress: {
+            // eslint-disable-next-line camelcase
+            drop_console: true,
+            // eslint-disable-next-line camelcase
+            drop_debugger: true,
+            // eslint-disable-next-line camelcase
+            pure_funcs: ["console.log", "console.debug"],
+            passes: 2,
+          },
+          mangle: {
+            safari10: true,
+          },
+          format: {
+            comments: false,
+          },
+        })
+      : null,
     // Generate a report so we can see how our bundle size is spent
     visualizer({ filename: `./${outputFile}.html` }),
   ].filter(Boolean);