Reduce size of bundled JS, and overall plugin file size. (https://github.com/woocommerce/woocommerce-admin/pull/2933)

* Remove embed-page-specific Webpack entry.

* Stop @woocommerce/components from being bundled with the app code.

plugins/woocommerce-admin/client/embedded.js

@@ -1,32 +0,0 @@
-/** @format */
-/**
- * External dependencies
- */
-import '@wordpress/notices';
-import { render } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import './stylesheets/_embedded.scss';
-import { EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
-import 'wc-api/wp-data-store';
-
-const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
-
-// Render the header.
-render( <EmbedLayout />, embeddedRoot );
-
-embeddedRoot.classList.remove( 'is-embed-loading' );
-
-// Render notices just above the WP content div.
-const wpBody = document.getElementById( 'wpbody-content' );
-const wrap = wpBody.querySelector( '.wrap' );
-const noticeContainer = document.createElement( 'div' );
-
-render(
-	<div className="woocommerce-layout">
-		<NoticeArea />
-	</div>,
-	wpBody.insertBefore( noticeContainer, wrap )
-);

plugins/woocommerce-admin/client/index.js

@@ -9,7 +9,30 @@ import { render } from '@wordpress/element';
  * Internal dependencies
  */
 import './stylesheets/_index.scss';
-import { PageLayout } from './layout';
+import { PageLayout, EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
 import 'wc-api/wp-data-store';
 
-render( <PageLayout />, document.getElementById( 'root' ) );
+const appRoot = document.getElementById( 'root' );
+
+if ( appRoot ) {
+	render( <PageLayout />, appRoot );
+} else {
+	const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
+
+	// Render the header.
+	render( <EmbedLayout />, embeddedRoot );
+
+	embeddedRoot.classList.remove( 'is-embed-loading' );
+
+	// Render notices just above the WP content div.
+	const wpBody = document.getElementById( 'wpbody-content' );
+	const wrap = wpBody.querySelector( '.wrap' );
+	const noticeContainer = document.createElement( 'div' );
+
+	render(
+		<div className="woocommerce-layout">
+			<NoticeArea />
+		</div>,
+		wpBody.insertBefore( noticeContainer, wrap )
+	);
+}

plugins/woocommerce-admin/client/stylesheets/_embedded.scss

@@ -1,13 +0,0 @@
-/** @format */
-
-// Import our wp-admin reset.
-@import './shared/_reset.scss';
-
-// Import any global styles.
-@import './shared/_global.scss';
-
-// Import the embed-specific styles.
-@import './shared/_embed.scss';
-
-// Import gutenberg SCSS so that we can apply our theme colors.
-@import './shared/gutenberg-components.scss';

plugins/woocommerce-admin/client/stylesheets/_index.scss

@@ -27,5 +27,8 @@
 // Import any global styles.
 @import './shared/_global.scss';
 
+// Import the embed-specific styles.
+@import './shared/_embed.scss';
+
 // Import gutenberg SCSS so that we can apply our theme colors.
 @import './shared/gutenberg-components.scss';

plugins/woocommerce-admin/src/Loader.php

@@ -284,16 +284,11 @@ class Loader {
 		);
 		wp_style_add_data( 'wc-components-ie', 'rtl', 'replace' );
 
-		$entry = 'app';
-		if ( self::is_embed_page() ) {
-			$entry = 'embedded';
-		}
-
 		wp_register_script(
 			WC_ADMIN_APP,
-			self::get_url( "{$entry}/index.js" ),
+			self::get_url( 'app/index.js' ),
 			array( 'wc-components', 'wc-navigation', 'wp-date', 'wp-html-entities', 'wp-keycodes', 'wp-i18n' ),
-			self::get_file_version( "{$entry}/index.js" ),
+			self::get_file_version( 'app/index.js' ),
 			true
 		);
 
@@ -301,9 +296,9 @@ class Loader {
 
 		wp_register_style(
 			WC_ADMIN_APP,
-			self::get_url( "{$entry}/style.css" ),
+			self::get_url( 'app/style.css' ),
 			array( 'wc-components' ),
-			self::get_file_version( "{$entry}/style.css" )
+			self::get_file_version('app/style.css' )
 		);
 		wp_style_add_data( WC_ADMIN_APP, 'rtl', 'replace' );
 

plugins/woocommerce-admin/webpack.config.js

@@ -63,7 +63,6 @@ const webpackConfig = {
 	mode: NODE_ENV,
 	entry: {
 		app: './client/index.js',
-		embedded: './client/embedded.js',
 		...entryPoints,
 	},
 	output: {
@@ -144,7 +143,6 @@ const webpackConfig = {
 		extensions: [ '.json', '.js', '.jsx' ],
 		modules: [
 			path.join( __dirname, 'client' ),
-			path.join( __dirname, 'packages' ),
 			'node_modules',
 		],
 		alias: {