Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Albert Juhé Lluveras 2019-07-22 11:39:00 +02:00
parent ecc306b3cf
commit 0c0fc8be3b
2 changed files with 55 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
plugins/woocommerce-blocks/src/Assets.php
View File

@ -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 );
}
/**

66
plugins/woocommerce-blocks/webpack.config.js
View File

@ -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 ];