Build: Split out vendor files into separate, shared JS & CSS files (#314)

* Add splitchunks to webpack config to combine node_modules imports into a vendors script

* Move legacy CSS into legacy folder

* Get components css without needing to use relative path

* Add vendors css file

Author: ryelle

assets/css/products-grid.scss

@@ -1,5 +1,5 @@
 // Import the woocommerce components stylesheet
-@import "../../node_modules/@woocommerce/components/build-style/style.css";
+@import "~@woocommerce/components/build-style/style.css";
 
 // Hack to hide preview overflow.
 .editor-block-preview__content {

assets/js/legacy/products-block.jsx

@@ -5,7 +5,7 @@ const { InspectorControls, BlockControls } = wp.editor;
 const { Toolbar, Button, Dashicon, RangeControl, Tooltip, SelectControl } = wp.components;
 const { apiFetch } = wp;
 
-import '../../css/products-block.scss';
+import './products-block.scss';
 
 import { ProductsSpecificSelect } from './views/specific-select.jsx';
 import { ProductsCategorySelect } from './views/category-select.jsx';

assets/css/products-block.scss assets/js/legacy/products-block.scssassets/css/products-block.scss renamed to assets/js/legacy/products-block.scss

@@ -45,6 +45,17 @@ const GutenbergBlocksConfig = {
 		libraryTarget: 'this',
 	},
 	externals,
+	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				commons: {
+					test: /[\\/]node_modules[\\/]/,
+					name: 'vendors',
+					chunks: 'all',
+				},
+			},
+		},
+	},
 	module: {
 		rules: [
 			{

webpack.config.js

@@ -159,6 +159,7 @@ function wgpb_register_scripts() {
 		'wp-i18n',
 		'wp-url',
 		'lodash',
+		'wc-vendors',
 	);
 
 	// @todo Remove this dependency (as it adds a separate react instance).
@@ -170,6 +171,14 @@ function wgpb_register_scripts() {
 		true
 	);
 
+	wp_register_script(
+		'wc-vendors',
+		plugins_url( 'build/vendors.js', __FILE__ ),
+		array(),
+		wgpb_get_file_version( '/build/vendors.js' ),
+		true
+	);
+
 	wp_register_script(
 		'wc-handpicked-products',
 		plugins_url( 'build/handpicked-products.js', __FILE__ ),
@@ -238,6 +247,13 @@ function wgpb_register_scripts() {
 		wp_set_script_translations( 'woocommerce-blocks', 'woo-gutenberg-products-block' );
 	}
 
+	wp_register_style(
+		'wc-vendors',
+		plugins_url( 'build/vendors.css', __FILE__ ),
+		array(),
+		wgpb_get_file_version( '/build/vendors.css' )
+	);
+
 	wp_register_style(
 		'wc-products-grid',
 		plugins_url( 'build/products-grid.css', __FILE__ ),
@@ -248,56 +264,56 @@ function wgpb_register_scripts() {
 	wp_register_style(
 		'wc-handpicked-products-editor',
 		plugins_url( 'build/handpicked-products.css', __FILE__ ),
-		array( 'wp-edit-blocks', 'wc-products-grid' ),
+		array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
 		wgpb_get_file_version( '/build/handpicked-products.css' )
 	);
 
 	wp_register_style(
 		'wc-product-best-sellers-editor',
 		plugins_url( 'build/product-best-sellers.css', __FILE__ ),
-		array( 'wp-edit-blocks', 'wc-products-grid' ),
+		array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
 		wgpb_get_file_version( '/build/product-best-sellers.css' )
 	);
 
 	wp_register_style(
 		'wc-product-category-editor',
 		plugins_url( 'build/product-category.css', __FILE__ ),
-		array( 'wp-edit-blocks', 'wc-products-grid' ),
+		array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
 		wgpb_get_file_version( '/build/product-category.css' )
 	);
 
 	wp_register_style(
 		'wc-product-new-editor',
 		plugins_url( 'build/product-new.css', __FILE__ ),
-		array( 'wp-edit-blocks', 'wc-products-grid' ),
+		array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
 		wgpb_get_file_version( '/build/product-new.css' )
 	);
 
 	wp_register_style(
 		'wc-product-on-sale-editor',
 		plugins_url( 'build/product-on-sale.css', __FILE__ ),
-		array( 'wp-edit-blocks', 'wc-products-grid' ),
+		array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
 		wgpb_get_file_version( '/build/product-on-sale.css' )
 	);
 
 	wp_register_style(
 		'wc-product-top-rated-editor',
 		plugins_url( 'build/product-top-rated.css', __FILE__ ),
-		array( 'wp-edit-blocks', 'wc-products-grid' ),
+		array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
 		wgpb_get_file_version( '/build/product-top-rated.css' )
 	);
 
 	wp_register_style(
 		'woocommerce-products-block-editor',
 		plugins_url( 'build/products-block.css', __FILE__ ),
-		array( 'wp-edit-blocks' ),
+		array( 'wc-vendors', 'wp-edit-blocks' ),
 		wgpb_get_file_version( '/build/products-block.css' )
 	);
 
 	wp_register_style(
 		'wc-featured-product-editor',
 		plugins_url( 'build/featured-product.css', __FILE__ ),
-		array( 'wp-edit-blocks' ),
+		array( 'wc-vendors', 'wp-edit-blocks' ),
 		wgpb_get_file_version( '/build/featured-product.css' )
 	);
 
@@ -312,6 +328,7 @@ function wgpb_register_scripts() {
  */
 function wgpb_get_file_version( $file ) {
 	if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
+		$file = trim( $file, '/' );
 		return filemtime( plugin_dir_path( __FILE__ ) . $file );
 	}
 	return WGPB_VERSION;