Optimize bundle size

bin/webpack.blocks.js

@@ -19,12 +19,14 @@ module.exports = [
 			path: paths.gutenbergBuildPath,
 		},
 		externals: Object.assign( {}, wpPackages.externals, {
-			'@wordpress/components': 'wp.components',
-			'@wordpress/blocks': 'wp.blocks',
-			'@wordpress/editor': 'wp.editor',
-			'@wordpress/i18n': 'wp.i18n',
+			'react': [ 'cf', 'vendor', 'react' ],
+			'react-dom': [ 'cf', 'vendor', 'react-dom' ],
+			'@wordpress/components': [ 'wp', 'components' ],
+			'@wordpress/blocks': [ 'wp', 'blocks' ],
+			'@wordpress/editor': [ 'wp', 'editor' ],
+			'@wordpress/i18n': [ 'wp', 'i18n' ],
 			'@carbon-fields/core': 'cf.core',
-			'lodash': 'lodash'
-		 } )
+			'lodash': [ 'lodash' ]
+		} )
 	} )
 ];

bin/webpack.core.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies.
  */
+const webpack = require( 'webpack' );
 const merge = require( 'webpack-merge' );
 
 /**
@@ -29,7 +30,7 @@ module.exports = [
 			path: paths.gutenbergBuildPath
 		},
 		externals: Object.assign( {}, wpPackages.externals, {
-			'lodash': 'lodash'
+			'lodash': [ 'lodash' ]
 		} )
 	} ),
 	merge( base, config, {
@@ -38,6 +39,11 @@ module.exports = [
 		},
 		externals: Object.assign( {}, wpPackages.proxyExternals, {
 			'lodash': [ 'cf', 'vendor', 'lodash' ]
-		} )
+		} ),
+		plugins: [
+			new webpack.ProvidePlugin( {
+				'wp.element': '@wordpress/element'
+			} )
+		]
 	} )
 ];

bin/webpack.metaboxes.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies.
  */
+const webpack = require( 'webpack' );
 const merge = require( 'webpack-merge' );
 
 /**
@@ -15,8 +16,10 @@ const config = {
 		metaboxes: './packages/metaboxes/index.js'
 	},
 	externals: {
-		'@carbon-fields/core': 'cf.core',
-		'classnames': [ 'cf', 'vendor', 'classnames' ]
+		'react': [ 'cf', 'vendor', 'react' ],
+		'react-dom': [ 'cf', 'vendor', 'react-dom' ],
+		'classnames': [ 'cf', 'vendor', 'classnames' ],
+		'@carbon-fields/core': [ 'cf', 'core' ]
 	}
 };
 
@@ -26,7 +29,7 @@ module.exports = [
 			path: paths.gutenbergBuildPath
 		},
 		externals: Object.assign( {}, wpPackages.externals, {
-			'lodash': 'lodash'
+			'lodash': [ 'lodash' ]
 		} )
 	} ),
 	merge( base, config, {
@@ -35,6 +38,11 @@ module.exports = [
 		},
 		externals: Object.assign( {}, wpPackages.proxyExternals, {
 			'lodash': [ 'cf', 'vendor', 'lodash' ]
-		} )
+		} ),
+		plugins: [
+			new webpack.ProvidePlugin( {
+				'wp.element': '@wordpress/element'
+			} )
+		]
 	} )
 ];

bin/webpack.vendor.js

@@ -23,7 +23,9 @@ module.exports = [
 			path: paths.gutenbergBuildPath
 		},
 		externals: Object.assign( {}, wpPackages.externals, {
-			'lodash': 'lodash'
+			'lodash': 'lodash',
+			'react': 'React',
+			'react-dom': 'ReactDOM'
 		} )
 	} ),
 	merge( base, config, {

packages/vendor/index.js

@@ -1,10 +1,12 @@
 /**
  * External dependencies.
  */
+import React from 'react';
+import ReactDOM from 'react-dom';
 import * as compose from '@wordpress/compose';
 import * as element from '@wordpress/element';
 import * as hooks from '@wordpress/hooks';
-import * as i18n from '@wordpress/i18n';
+import * as data from '@wordpress/data';
 import * as classnames from 'classnames';
 import * as _ from 'lodash';
 
@@ -20,10 +22,12 @@ if ( ! window.lodash ) {
  */
 window.cf = window.cf || {};
 window.cf.vendor = [
+	[ 'react', React ],
+	[ 'react-dom', ReactDOM ],
 	[ '@wordpress/compose', compose ],
 	[ '@wordpress/element', element ],
 	[ '@wordpress/hooks', hooks ],
-	[ '@wordpress/i18n', i18n ],
+	[ '@wordpress/data', data ],
 	[ 'classnames', classnames ],
 	[ 'lodash', _ ]
 ].reduce( ( vendors, [ key, implementation ] ) => {

packages/vendor/package.json

@@ -4,10 +4,9 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@wordpress/compose": "^2.0.2",
-    "@wordpress/data": "^2.1.2",
+    "@wordpress/data": "^3.0.0",
     "@wordpress/element": "^2.1.1",
     "@wordpress/hooks": "^2.0.2",
-    "@wordpress/i18n": "^3.0.1",
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
     "react": "^16.5.2",

yarn.lock

@@ -1216,6 +1216,21 @@
     lodash "^4.17.10"
     redux "^4.0.0"
 
+"@wordpress/data@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/data/-/data-3.0.0.tgz#2e33ec8dc7baad7f030963f38774d7daf4b06d37"
+  integrity sha512-aOEZJHW9K+6ZjxkK7Hzq5jOU1l4ph4yhj9s2l3cHMgHQg8fh2sIdxNqKpADd0+qXxFInIWOgNcgH7A0+BUsbog==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    "@wordpress/compose" "^2.1.0"
+    "@wordpress/element" "^2.1.5"
+    "@wordpress/is-shallow-equal" "^1.1.4"
+    "@wordpress/redux-routine" "^3.0.3"
+    equivalent-key-map "^0.2.2"
+    is-promise "^2.1.0"
+    lodash "^4.17.10"
+    redux "^4.0.0"
+
 "@wordpress/date@^2.0.3":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@wordpress/date/-/date-2.0.3.tgz#1ca46d26af2cc953db0cf2e85286954473483f69"
@@ -1443,6 +1458,15 @@
     is-promise "^2.1.0"
     rungen "^0.3.2"
 
+"@wordpress/redux-routine@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@wordpress/redux-routine/-/redux-routine-3.0.3.tgz#882c8a8f350ea50a2ca027a103375a46f1bee5a0"
+  integrity sha512-wT8GoG0qtwxq8J5g0uYxZYoNcnhQloFvMTkDQsaWWAvaO1wsTaamYbusHc6q7PS+EsS2TioQkZsxTtei6YwBBg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    is-promise "^2.1.0"
+    rungen "^0.3.2"
+
 "@wordpress/shortcode@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@wordpress/shortcode/-/shortcode-2.0.2.tgz#a297758ae624bf11e82194cfce4ca3a62f6d4da7"
@@ -3011,7 +3035,7 @@ enhanced-resolve@^4.1.0:
     memory-fs "^0.4.0"
     tapable "^1.0.0"
 
-equivalent-key-map@^0.2.0, equivalent-key-map@^0.2.1:
+equivalent-key-map@^0.2.0, equivalent-key-map@^0.2.1, equivalent-key-map@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/equivalent-key-map/-/equivalent-key-map-0.2.2.tgz#be4d57049bb8d46a81d6e256c1628465620c2a13"
   integrity sha512-xvHeyCDbZzkpN4VHQj/n+j2lOwL0VWszG30X4cOrc9Y7Tuo2qCdZK/0AMod23Z5dCtNUbaju6p0rwOhHUk05ew==