refactor: move to lazy load some scripts

Author: [email protected]

.config/webpack.config.dev.js

@@ -34,7 +34,7 @@ module.exports = [
 
 	output: {
 		filename: '[name].js',
-		chunkFilename: '[name].[contenthash].json', // Output filename for dynamically imported chunks
+		chunkFilename: 'chunks/[name].[contenthash].js', // Output filename for dynamically imported chunks
     },
 
     // Externals are only WordPress loaded libraries.

.config/webpack.config.prod.js

@@ -34,7 +34,7 @@ module.exports = [
 
 	output: {
 		filename: '[name].js',
-		chunkFilename: '[name].[contenthash].json', // Output filename for dynamically imported chunks
+		chunkFilename: 'chunks/[name].[contenthash].js', // Output filename for dynamically imported chunks
     },
 
     // Externals are only WordPress loaded libraries.

src/components/font-family-control/index.js

@@ -26,7 +26,7 @@ import { select } from '@wordpress/data'
 
 const loadGoogleFonts = async () => {
 	const { default: fonts } =
-		await import( /* webpackChunkName: "data/google-fonts" */ './google-fonts.json' )
+		await import( /* webpackChunkName: "google-fonts" */ './google-fonts.json' )
 	return fonts.map( font => ( { label: font.family, value: font.family } ) )
 }
 

src/components/guided-modal-tour/index.js

@@ -18,7 +18,6 @@ import {
 	guidedTourStates,
 } from 'stackable'
 import classNames from 'classnames'
-import confetti from 'canvas-confetti'
 
 /**
  * WordPress dependencies
@@ -208,7 +207,7 @@ const ModalTour = props => {
 		if ( currentStep === steps.length - 1 ) {
 			steps[ currentStep ]?.postStep?.( currentStep )
 			if ( hasConfetti ) {
-				throwConfetti()
+				throwConfetti() // Fire and forget - don't wait for confetti
 			}
 			onClose()
 			return
@@ -544,33 +543,42 @@ const ModalTour = props => {
 	)
 }
 
-const throwConfetti = () => {
-	confetti( {
-		particleCount: 50,
-		angle: 60,
-		spread: 70,
-		origin: { x: 0 },
-		zIndex: 100000,
-		disableForReducedMotion: true,
-	} )
-	confetti( {
-		particleCount: 50,
-		angle: 120,
-		spread: 70,
-		origin: { x: 1 },
-		zIndex: 100000,
-		disableForReducedMotion: true,
-	} )
-	setTimeout( () => {
-		confetti( {
+const throwConfetti = async () => {
+	try {
+		// Dynamically import canvas-confetti only when needed
+		const confetti = await import( /* webpackChunkName: "canvas-confetti" */ 'canvas-confetti' )
+
+		confetti.default( {
+			particleCount: 50,
+			angle: 60,
+			spread: 70,
+			origin: { x: 0 },
+			zIndex: 100000,
+			disableForReducedMotion: true,
+		} )
+		confetti.default( {
 			particleCount: 50,
-			angle: -90,
-			spread: 90,
-			origin: { y: -0.3 },
+			angle: 120,
+			spread: 70,
+			origin: { x: 1 },
 			zIndex: 100000,
 			disableForReducedMotion: true,
 		} )
-	}, 150 )
+		setTimeout( () => {
+			confetti.default( {
+				particleCount: 50,
+				angle: -90,
+				spread: 90,
+				origin: { y: -0.3 },
+				zIndex: 100000,
+				disableForReducedMotion: true,
+			} )
+		}, 150 )
+	} catch ( err ) {
+		// Silently fail if confetti can't be loaded
+		// eslint-disable-next-line no-console
+		console.warn( 'Failed to load confetti:', err )
+	}
 }
 
 const Steps = props => {

src/components/index.js

@@ -57,7 +57,7 @@ export { default as TaxonomyControl } from './taxonomy-control'
 export { default as Tooltip } from './tooltip'
 export { default as BlockStyles } from './block-styles'
 export { default as GuidedModalTour } from './guided-modal-tour'
-export { default as StyleGuide, StyleGuidePopover } from './style-guide'
+export { default as StyleGuidePopover } from './style-guide-popover'
 
 // V2 only Components, for deprecation
 export { default as BlockContainer } from './block-container'

src/components/style-guide/popover.js …/components/style-guide-popover/index.jssrc/components/style-guide/popover.js renamed to src/components/style-guide-popover/index.js src/components/style-guide/popover.js renamed to src/components/style-guide-popover/index.js

@@ -6,15 +6,13 @@ import { i18n } from 'stackable'
 /**
  * Internal dependencies
  */
-import { StyleGuide } from '~stackable/components'
-import { toPng } from 'html-to-image'
 
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n'
 import {
-	useMemo, useState, useRef,
+	useMemo, useState, useRef, useEffect,
 } from '@wordpress/element'
 import { Popover, Button } from '@wordpress/components'
 import {
@@ -25,6 +23,8 @@ import { useDesignSystem } from '~stackable/hooks'
 const StyleGuidePopover = props => {
 	const { onClose } = props
 	const styleGuideRef = useRef( null )
+	const [ StyleGuide, setStyleGuide ] = useState( null )
+	const [ isLoading, setIsLoading ] = useState( true )
 
 	// On load, look for the .interface-interface-skeleton__content and position over it.
 	const [ editorStylesWrapper, width, height ] = useMemo( () => {
@@ -34,6 +34,28 @@ const StyleGuidePopover = props => {
 
 	const designSystem = useDesignSystem()
 
+	// Lazy load the StyleGuide component
+	useEffect( () => {
+		const loadStyleGuide = async () => {
+			try {
+				// Import the StyleGuide component with explicit chunk naming
+				const { default: StyleGuideComponent } = await import(
+					/* webpackChunkName: "style-guide" */
+					/* webpackMode: "lazy" */
+					'../../lazy-components/style-guide'
+				)
+				setStyleGuide( () => StyleGuideComponent )
+			} catch ( err ) {
+				// eslint-disable-next-line no-console
+				console.error( 'Failed to load StyleGuide component:', err )
+			} finally {
+				setIsLoading( false )
+			}
+		}
+
+		loadStyleGuide()
+	}, [] )
+
 	const style = width && height ? { '--width': `${ width }px`, '--height': `${ height }px` } : {}
 
 	return (
@@ -58,7 +80,17 @@ const StyleGuidePopover = props => {
 					{ __( 'Welcome to your Style Guide! Here you can see a live preview of your design system in action. Any changes you make to your design settings will instantly update here.', i18n ) }
 				</p>
 			</div>
-			<StyleGuide { ...props } designSystem={ designSystem } contentRef={ styleGuideRef } />
+			{ isLoading ? (
+				<div className="ugb-style-guide__loading">
+					{ __( 'Loading style guide…', i18n ) }
+				</div>
+			) : StyleGuide ? (
+				<StyleGuide { ...props } designSystem={ designSystem } contentRef={ styleGuideRef } />
+			) : (
+				<div className="ugb-style-guide__error">
+					{ __( 'Failed to load style guide', i18n ) }
+				</div>
+			) }
 		</Popover>
 	)
 }
@@ -69,20 +101,23 @@ const ExportButton = props => {
 	const { printRef } = props
 	const [ isExporting, setIsExporting ] = useState( false )
 
-	const handlePrint = () => {
+	const handlePrint = async () => {
 		setIsExporting( true )
-		toPng( printRef.current, { cacheBust: true } )
-			.then( dataUrl => {
-				const link = document.createElement( 'a' )
-				link.download = 'style-guide.png'
-				link.href = dataUrl
-				link.click()
-				setIsExporting( false )
-			} )
-			.catch( err => {
-				alert( sprintf( __( 'Error exporting style guide: %s', i18n ), err.message || err ) ) // eslint-disable-line no-alert
-				setIsExporting( false )
-			} )
+		try {
+			// Dynamically import html-to-image only when needed
+			// Webpack will create a separate chunk for this
+			const htmlToImage = await import( /* webpackChunkName: "html-to-image" */ 'html-to-image' )
+
+			const dataUrl = await htmlToImage.toPng( printRef.current, { cacheBust: true } )
+			const link = document.createElement( 'a' )
+			link.download = 'style-guide.png'
+			link.href = dataUrl
+			link.click()
+		} catch ( err ) {
+			alert( sprintf( __( 'Error exporting style guide: %s', i18n ), err.message || err ) ) // eslint-disable-line no-alert
+		} finally {
+			setIsExporting( false )
+		}
 	}
 
 	return (

src/components/style-guide/components.js …azy-components/style-guide/components.jssrc/components/style-guide/components.js renamed to src/lazy-components/style-guide/components.js src/components/style-guide/components.js renamed to src/lazy-components/style-guide/components.js

@@ -7,7 +7,7 @@ import {
 } from './utils'
 import heroBg from './images/hero-bg.webp'
 import mediaText from './images/media-text.webp'
-import { COLOR_SCHEME_PROPERTY_LABELS } from '../color-scheme-preview'
+import { COLOR_SCHEME_PROPERTY_LABELS } from '../../components/color-scheme-preview'
 
 import {
 	i18n, srcUrl, homeUrl,