Reduce bundle size

grahammtbr · Dec 11, 2018 · 03208e9 · 03208e9
1 parent 9de32d5
commit 03208e9
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 269 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -18,7 +18,7 @@ module.exports = {
 		production: {
 			plugins: [
 				[ '@wordpress/babel-plugin-makepot', {
-					'output': 'languages/carbon-fields-ui.pot'
+					output: 'languages/carbon-fields-ui.pot'
 				} ]
 			]
 		}

diff --git a/bin/webpack.blocks.js b/bin/webpack.blocks.js
@@ -22,6 +22,7 @@ module.exports = [
 			'react': [ 'cf', 'vendor', 'react' ],
 			'react-dom': [ 'cf', 'vendor', 'react-dom' ],
 			'nanoid': [ 'cf', 'vendor', 'nanoid' ],
+			'immer': [ 'cf', 'vendor', 'immer' ],
 			'@wordpress/components': [ 'wp', 'components' ],
 			'@wordpress/blocks': [ 'wp', 'blocks' ],
 			'@wordpress/editor': [ 'wp', 'editor' ],

diff --git a/bin/webpack.core.js b/bin/webpack.core.js
@@ -24,7 +24,8 @@ const config = {
 		'react-dom': [ 'cf', 'vendor', 'react-dom' ],
 		'refract-callbag': [ 'cf', 'vendor', 'refract-callbag' ],
 		'callbag-basics': [ 'cf', 'vendor', 'callbag-basics' ],
-		'classnames': [ 'cf', 'vendor', 'classnames' ]
+		'classnames': [ 'cf', 'vendor', 'classnames' ],
+		'immer': [ 'cf', 'vendor', 'immer' ]
 	}
 };
 

diff --git a/bin/webpack.metaboxes.js b/bin/webpack.metaboxes.js
@@ -22,6 +22,7 @@ const config = {
 		'refract-callbag': [ 'cf', 'vendor', 'refract-callbag' ],
 		'callbag-basics': [ 'cf', 'vendor', 'callbag-basics' ],
 		'classnames': [ 'cf', 'vendor', 'classnames' ],
+		'immer': [ 'cf', 'vendor', 'immer' ],
 		'@carbon-fields/core': [ 'cf', 'core' ]
 	}
 };

diff --git a/bin/wp-packages.js b/bin/wp-packages.js
@@ -7,7 +7,8 @@ module.exports.packages = [
 	'@wordpress/compose',
 	'@wordpress/element',
 	'@wordpress/hooks',
-	'@wordpress/data'
+	'@wordpress/data',
+	'@wordpress/i18n'
 ];
 
 /**

diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "@wordpress/babel-plugin-makepot": "^2.1.2",
+    "@wordpress/browserslist-config": "^2.2.2",
     "autoprefixer": "^9.3.1",
     "babel-eslint": "^8.2.6",
     "babel-loader": "^8.0.2",
@@ -55,14 +56,13 @@
     "sass-loader": "^7.1.0",
     "sass-resources-loader": "^2.0.0",
     "terser-webpack-plugin": "^1.1.0",
-    "webpack": "4.19.1",
+    "webpack": "^4.27.1",
     "webpack-cli": "^3.1.1",
     "webpack-merge": "^4.1.4"
   },
   "dependencies": {
     "@babel/runtime": "^7.1.5",
     "@wordpress/blocks": "^6.0.2",
-    "@wordpress/browserslist-config": "^2.2.2",
     "@wordpress/components": "^7.0.3",
     "@wordpress/compose": "^3.0.0",
     "@wordpress/data": "^4.0.1",

diff --git a/packages/core/fields/color/picker.js b/packages/core/fields/color/picker.js
@@ -2,7 +2,7 @@
  * External dependencies.
  */
 import { Component } from '@wordpress/element';
-import { SketchPicker } from 'react-color';
+import SketchPicker from 'react-color/lib/Sketch';
 import onClickOutside from 'react-onclickoutside';
 
 class Picker extends Component {

diff --git a/packages/core/fields/oembed/preview.js b/packages/core/fields/oembed/preview.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies.
  */
-import { renderToStaticMarkup } from 'react-dom/server';
-import { Component } from '@wordpress/element';
+import { Component, renderToString } from '@wordpress/element';
 
 class OembedPreview extends Component {
 	constructor() {
@@ -181,7 +180,7 @@ class OembedPreview extends Component {
 		);
 
 		this.iframe.contentWindow.document.open();
-		this.iframe.contentWindow.document.write( '<!DOCTYPE html>' + renderToStaticMarkup( htmlDoc ) );
+		this.iframe.contentWindow.document.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );
 		this.iframe.contentWindow.document.close();
 	}
 }

diff --git a/packages/vendor/index.js b/packages/vendor/index.js
@@ -4,10 +4,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import nanoid from 'nanoid';
+import immer from 'immer';
 import * as compose from '@wordpress/compose';
 import * as element from '@wordpress/element';
 import * as hooks from '@wordpress/hooks';
 import * as data from '@wordpress/data';
+import * as i18n from '@wordpress/i18n';
 import * as classnames from 'classnames';
 import * as _ from 'lodash';
 import * as refractCallbag from 'refract-callbag';
@@ -28,10 +30,12 @@ window.cf.vendor = [
 	[ 'react', React ],
 	[ 'react-dom', ReactDOM ],
 	[ 'nanoid', nanoid ],
+	[ 'immer', immer ],
 	[ '@wordpress/compose', compose ],
 	[ '@wordpress/element', element ],
 	[ '@wordpress/hooks', hooks ],
 	[ '@wordpress/data', data ],
+	[ '@wordpress/i18n', i18n ],
 	[ 'classnames', classnames ],
 	[ 'lodash', _ ],
 	[ 'refract-callbag', refractCallbag ],