From 8dc64cda9fe834bb3272584c2c4e1eb924c3d6fc Mon Sep 17 00:00:00 2001 From: hayes Date: Tue, 30 Mar 2021 19:59:36 -0500 Subject: [PATCH] perf: optimized assets handling, copying and cleaning --- CHANGELOG.md | 18 +++++++++++ package.json | 3 +- src/server/app.js | 8 +---- src/webpack/config/dev.config.js | 3 -- src/webpack/config/prod.config.js | 4 +-- src/webpack/parts/assets.js | 2 ++ src/webpack/parts/clean.js | 12 ------- src/webpack/parts/copy.js | 12 +++---- src/webpack/parts/core.js | 10 ++++-- src/webpack/parts/css.js | 5 ++- src/webpack/parts/liquid-styles.js | 10 ++---- yarn.lock | 51 ------------------------------ 12 files changed, 42 insertions(+), 96 deletions(-) delete mode 100644 src/webpack/parts/clean.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 373dbe3..796b88c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,21 @@ +# [2.1.0](https://github.com/hayes0724/shopify-packer/compare/2.0.13...2.1.0) (2021-03-31) + + +### :rocket: Performance Improvements + +* optimized assets handling, copying and cleaning ([a75ae4b](https://github.com/hayes0724/shopify-packer/commit/a75ae4badc81ae9c4b52f40c020fc6942d9ddc68)) + + + +## [2.0.13](https://github.com/hayes0724/shopify-packer/compare/2.0.12...2.0.13) (2021-03-30) + + +### :bug: Bug Fixes + +* changed devtool to eval-source-map for hmr ([c8ebe24](https://github.com/hayes0724/shopify-packer/commit/c8ebe240efcb02dd701da76272f891e5bad16355)) + + + ## [2.0.12](https://github.com/hayes0724/shopify-packer/compare/2.0.11...2.0.12) (2021-03-29) diff --git a/package.json b/package.json index cb1591b..a66974e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hayes0724/shopify-packer", - "version": "2.0.13", + "version": "2.1.0", "bin": { "packer": "cli/index.js" }, @@ -39,7 +39,6 @@ "babel-loader": "^8.2.2", "browser-sync": "^2.26.14", "chalk": "latest", - "clean-webpack-plugin": "^3.0.0", "console-control-strings": "^1.1.0", "copy-webpack-plugin": "8.0.0", "cors": "^2.8.5", diff --git a/src/server/app.js b/src/server/app.js index 51b06f5..17c2213 100644 --- a/src/server/app.js +++ b/src/server/app.js @@ -3,17 +3,11 @@ const webpackHotMiddleware = require('webpack-hot-middleware'); const corsMiddleware = require('cors'); const express = require('express'); -const isHotUpdateFile = require('./is-hot-update-file'); - class App { constructor(compiler) { const app = express(); - app.webpackDevMiddleware = webpackDevMiddleware(compiler, { - writeToDisk: (filePath) => { - return !isHotUpdateFile(filePath); - }, - }); + app.webpackDevMiddleware = webpackDevMiddleware(compiler, {}); app.webpackHotMiddleware = webpackHotMiddleware(compiler, { log: false, }); diff --git a/src/webpack/config/dev.config.js b/src/webpack/config/dev.config.js index 941db1a..ddafac1 100644 --- a/src/webpack/config/dev.config.js +++ b/src/webpack/config/dev.config.js @@ -3,7 +3,6 @@ const webpack = require('webpack'); const {merge} = require('webpack-merge'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin'); -const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const PackerConfig = require('../../config'); const config = new PackerConfig(require('../../../packer.schema')); const development = process.env.NODE_ENV !== 'production'; @@ -57,8 +56,6 @@ module.exports = merge([ ], }, plugins: [ - new CleanWebpackPlugin(), - new webpack.DefinePlugin({ 'process.env': {NODE_ENV: '"development"'}, }), diff --git a/src/webpack/config/prod.config.js b/src/webpack/config/prod.config.js index dfd9fc3..988fbd8 100644 --- a/src/webpack/config/prod.config.js +++ b/src/webpack/config/prod.config.js @@ -19,7 +19,6 @@ const core = require('../parts/core'); const css = require('../parts/css'); const scss = require('../parts/scss'); const assets = require('../parts/assets'); -const clean = require('../parts/clean'); const copy = require('../parts/copy'); const optimization = require('../parts/optimization'); const liquidStyles = require('../parts/liquid-styles'); @@ -37,7 +36,6 @@ const output = merge([ assets, scss, css, - clean, copy, { mode: 'production', @@ -45,7 +43,7 @@ const output = merge([ optimization: optimization, plugins: [ new MiniCssExtractPlugin({ - filename: '[name].css', + filename: 'assets/[name].css', }), new webpack.DefinePlugin({ diff --git a/src/webpack/parts/assets.js b/src/webpack/parts/assets.js index 7b01da0..176bffd 100644 --- a/src/webpack/parts/assets.js +++ b/src/webpack/parts/assets.js @@ -10,6 +10,7 @@ const assets = { type: 'asset/resource', generator: { filename: '[name][ext]', + emit: false, }, }, { @@ -18,6 +19,7 @@ const assets = { type: 'asset/resource', generator: { filename: '[name][ext]', + emit: false, }, }, ], diff --git a/src/webpack/parts/clean.js b/src/webpack/parts/clean.js deleted file mode 100644 index 944123f..0000000 --- a/src/webpack/parts/clean.js +++ /dev/null @@ -1,12 +0,0 @@ -const {CleanWebpackPlugin} = require('clean-webpack-plugin'); -const path = require('path'); - -const clean = { - plugins: [ - new CleanWebpackPlugin({ - cleanOnceBeforeBuildPatterns: [path.join(process.cwd(), 'dist/**/*')], - }), - ], -}; - -module.exports = clean; diff --git a/src/webpack/parts/copy.js b/src/webpack/parts/copy.js index 67c71fc..93c2c00 100644 --- a/src/webpack/parts/copy.js +++ b/src/webpack/parts/copy.js @@ -12,27 +12,27 @@ const copy = { }, { from: config.get('theme.src.layout'), - to: `${config.get('theme.dist.layout')}/[name][ext]`, + to: `${config.get('theme.dist.layout')}`, }, { from: config.get('theme.src.config'), - to: `${config.get('theme.dist.config')}/[name][ext]`, + to: `${config.get('theme.dist.config')}`, }, { from: config.get('theme.src.locales'), - to: `${config.get('theme.dist.locales')}/[name][ext]`, + to: `${config.get('theme.dist.locales')}`, }, { from: config.get('theme.src.snippets'), - to: `${config.get('theme.dist.snippets')}/[name][ext]`, + to: `${config.get('theme.dist.snippets')}`, }, { from: config.get('theme.src.templates'), - to: `${config.get('theme.dist.templates')}/[name][ext]`, + to: `${config.get('theme.dist.templates')}`, }, { from: config.get('theme.src.sections'), - to: `${config.get('theme.dist.sections')}/[name][ext]`, + to: `${config.get('theme.dist.sections')}`, }, ], }), diff --git a/src/webpack/parts/core.js b/src/webpack/parts/core.js index 72eee1a..a2e9a79 100644 --- a/src/webpack/parts/core.js +++ b/src/webpack/parts/core.js @@ -1,13 +1,17 @@ const path = require('path'); const PackerConfig = require('../../config'); const config = new PackerConfig(require('../../../packer.schema')); +const isDev = process.env.NODE_ENV !== 'production'; const core = { context: config.get('root'), output: { - filename: '[name].js', - path: config.get('theme.dist.assets'), + filename: isDev ? '[name].js' : 'assets/[name].js', + path: isDev + ? config.get('theme.dist.assets') + : config.get('theme.dist.root'), + clean: true, }, resolveLoader: { modules: [ @@ -24,7 +28,7 @@ const core = { exclude: [/(css|scss|sass)\.liquid$/, ...config.get('commonExcludes')], type: 'asset/resource', generator: { - filename: '[path][name].[ext]', + filename: '[name][ext]', }, }, { diff --git a/src/webpack/parts/css.js b/src/webpack/parts/css.js index a254110..1b23846 100644 --- a/src/webpack/parts/css.js +++ b/src/webpack/parts/css.js @@ -24,7 +24,10 @@ const cssLoader = { // styles using a tag instead of