From 0c0fc8be3bfbccf9ab0b57521942a20a2fe4d92c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Mon, 22 Jul 2019 11:39:00 +0200 Subject: [PATCH] Remove vendors.js as a frontend dependency (https://github.com/woocommerce/woocommerce-blocks/pull/750) * Load frontend scripts only when required * Typo * Use register_script from Assets * Remove vendors as a frontend dependency * Simplify webpack config --- plugins/woocommerce-blocks/src/Assets.php | 25 ++++---- plugins/woocommerce-blocks/webpack.config.js | 66 +++++++++++++------- 2 files changed, 55 insertions(+), 36 deletions(-) diff --git a/plugins/woocommerce-blocks/src/Assets.php b/plugins/woocommerce-blocks/src/Assets.php index 0035b3a22df..742796e8afb 100644 --- a/plugins/woocommerce-blocks/src/Assets.php +++ b/plugins/woocommerce-blocks/src/Assets.php @@ -35,20 +35,19 @@ class Assets { // Shared libraries and components across all blocks. self::register_script( 'wc-blocks', plugins_url( 'build/blocks.js', __DIR__ ), array(), false ); self::register_script( 'wc-vendors', plugins_url( 'build/vendors.js', __DIR__ ), array(), false ); - self::register_script( 'wc-packages', plugins_url( 'build/packages.js', __DIR__ ), array(), false ); // Individual blocks. - self::register_script( 'wc-handpicked-products', plugins_url( 'build/handpicked-products.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); - self::register_script( 'wc-product-best-sellers', plugins_url( 'build/product-best-sellers.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); - self::register_script( 'wc-product-category', plugins_url( 'build/product-category.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); - self::register_script( 'wc-product-new', plugins_url( 'build/product-new.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); - self::register_script( 'wc-product-on-sale', plugins_url( 'build/product-on-sale.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); - self::register_script( 'wc-product-top-rated', plugins_url( 'build/product-top-rated.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); - self::register_script( 'wc-products-by-attribute', plugins_url( 'build/products-by-attribute.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); - self::register_script( 'wc-featured-product', plugins_url( 'build/featured-product.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); - self::register_script( 'wc-featured-category', plugins_url( 'build/featured-category.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); - self::register_script( 'wc-product-categories', plugins_url( 'build/product-categories.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); - self::register_script( 'wc-product-tag', plugins_url( 'build/product-tag.js', __DIR__ ), array( 'wc-vendors', 'wc-packages', 'wc-blocks' ) ); + self::register_script( 'wc-handpicked-products', plugins_url( 'build/handpicked-products.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); + self::register_script( 'wc-product-best-sellers', plugins_url( 'build/product-best-sellers.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); + self::register_script( 'wc-product-category', plugins_url( 'build/product-category.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); + self::register_script( 'wc-product-new', plugins_url( 'build/product-new.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); + self::register_script( 'wc-product-on-sale', plugins_url( 'build/product-on-sale.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); + self::register_script( 'wc-product-top-rated', plugins_url( 'build/product-top-rated.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); + self::register_script( 'wc-products-by-attribute', plugins_url( 'build/products-by-attribute.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); + self::register_script( 'wc-featured-product', plugins_url( 'build/featured-product.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); + self::register_script( 'wc-featured-category', plugins_url( 'build/featured-category.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); + self::register_script( 'wc-product-categories', plugins_url( 'build/product-categories.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); + self::register_script( 'wc-product-tag', plugins_url( 'build/product-tag.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) ); } /** @@ -201,7 +200,7 @@ class Assets { */ public static function load_script_as_required( $name ) { $filename = 'build/' . $name . '.js'; - self::register_script( 'wc-' . $name, plugins_url( $filename, __DIR__ ), array( 'wc-vendors' ), true, true ); + self::register_script( 'wc-' . $name, plugins_url( $filename, __DIR__ ), array(), true, true ); } /** diff --git a/plugins/woocommerce-blocks/webpack.config.js b/plugins/woocommerce-blocks/webpack.config.js index 7365fce9a03..8b43350120e 100644 --- a/plugins/woocommerce-blocks/webpack.config.js +++ b/plugins/woocommerce-blocks/webpack.config.js @@ -19,15 +19,30 @@ function findModuleMatch( module, match ) { return false; } +const baseConfig = { + mode: NODE_ENV, + performance: { + hints: false, + }, + stats: { + all: false, + assets: true, + builtAt: true, + colors: true, + errors: true, + hash: true, + timings: true, + }, +}; + /** * Config for compiling Gutenberg blocks JS. */ const GutenbergBlocksConfig = { - mode: NODE_ENV, + ...baseConfig, entry: { // Shared blocks code blocks: './assets/js/index.js', - frontend: [ './assets/js/blocks/product-categories/frontend.js' ], // Blocks 'handpicked-products': './assets/js/blocks/handpicked-products/index.js', 'product-best-sellers': './assets/js/blocks/product-best-sellers/index.js', @@ -54,13 +69,6 @@ const GutenbergBlocksConfig = { optimization: { splitChunks: { cacheGroups: { - packages: { - test: /[\\/]node_modules[\\/]@woocommerce/, - name: 'packages', - chunks: 'all', - enforce: true, - priority: 10, // Higher priority to ensure @woocommerce/* packages are caught here. - }, commons: { test: /[\\/]node_modules[\\/]/, name: 'vendors', @@ -118,7 +126,6 @@ const GutenbergBlocksConfig = { ], }, plugins: [ - new CleanWebpackPlugin(), new MiniCssExtractPlugin( { filename: '[name].css', } ), @@ -131,18 +138,31 @@ const GutenbergBlocksConfig = { } ), new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ), ], - performance: { - hints: false, - }, - stats: { - all: false, - assets: true, - builtAt: true, - colors: true, - errors: true, - hash: true, - timings: true, - }, }; -module.exports = [ GutenbergBlocksConfig ]; +const BlocksFrontendConfig = { + ...baseConfig, + entry: './assets/js/blocks/product-categories/frontend.js', + output: { + path: path.resolve( __dirname, './build/' ), + filename: 'frontend.js', + }, + module: { + rules: [ + { + test: /\.jsx?$/, + exclude: /node_modules/, + loader: 'babel-loader?cacheDirectory', + }, + ], + }, + plugins: [ + new CleanWebpackPlugin(), + new ProgressBarPlugin( { + format: chalk.blue( 'Build frontend scripts' ) + ' [:bar] ' + chalk.green( ':percent' ) + ' :msg (:elapsed seconds)', + } ), + new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ), + ], +}; + +module.exports = [ GutenbergBlocksConfig, BlocksFrontendConfig ];