perf: optimized assets handling, copying and cleaning

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)
 
 

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",

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,
     });

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"'},
       }),

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,15 +36,14 @@ const output = merge([
   assets,
   scss,
   css,
-  clean,
   copy,
   {
     mode: 'production',
     devtool: false,
     optimization: optimization,
     plugins: [
       new MiniCssExtractPlugin({
-        filename: '[name].css',
+        filename: 'assets/[name].css',
       }),
 
       new webpack.DefinePlugin({

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,
         },
       },
     ],

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')}`,
         },
       ],
     }),

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]',
         },
       },
       {

src/webpack/parts/css.js

@@ -24,7 +24,10 @@ const cssLoader = {
   // styles using a <link> tag instead of <style> tag. This causes
   // a FOUC content, which can cause issues with JS that is reading
   // the DOM for styles (width, height, visibility) on page load.
-  options: {sourceMap: !isDev},
+  options: {
+    sourceMap: !isDev,
+    url: !isDev,
+  },
 };
 
 const postcssLoader = {

src/webpack/parts/liquid-styles.js

@@ -10,13 +10,7 @@ const liquidStyles = {
         test: /(css|scss|sass)\.liquid$/,
         exclude: config.get('commonExcludes'),
         type: 'asset/resource',
-        generator: {
-          filename: (pathData) => {
-            return `${pathData.runtime.split('.')[0]}.${
-              path.basename(pathData.filename).split('.')[0]
-            }.styleLiquid.css.liquid`;
-          },
-        },
+        generator: {},
       },
     ],
   },
@@ -25,7 +19,7 @@ const liquidStyles = {
 if (!isDev) {
   liquidStyles.module.rules[0].generator = {
     filename: (pathData) => {
-      return `${pathData.runtime.split('.')[0]}.${
+      return `assets/${pathData.runtime.split('.')[0]}.${
         path.basename(pathData.filename).split('.')[0]
       }.styleLiquid.css.liquid`;
     },

yarn.lock

@@ -582,11 +582,6 @@
     remark "^13.0.0"
     unist-util-find-all-after "^3.0.2"
 
-"@types/anymatch@*":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
-  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
-
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.14"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.14.tgz#faaeefc4185ec71c389f4501ee5ec84b170cc402"
@@ -727,54 +722,16 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.3.tgz#ef65165aea2924c9359205bf748865b8881753c0"
   integrity sha512-PijRCG/K3s3w1We6ynUKdxEc5AcuuH3NBmMDP8uvKVp6X43UY7NQlTzczakXP3DJR0F4dfNQIGjU2cUeRYs2AA==
 
-"@types/source-list-map@*":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
-  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
-
 "@types/stack-utils@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
-"@types/tapable@*":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
-  integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
-
-"@types/uglify-js@*":
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.0.tgz#1cad8df1fb0b143c5aba08de5712ea9d1ff71124"
-  integrity sha512-EGkrJD5Uy+Pg0NUR8uA4bJ5WMfljyad0G+784vLCNUkD+QwOJXUbBYExXfVGf7YtyzdQp3L/XMYcliB987kL5Q==
-  dependencies:
-    source-map "^0.6.1"
-
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
-"@types/webpack-sources@*":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
-  integrity sha512-LXn/oYIpBeucgP1EIJbKQ2/4ZmpvRl+dlrFdX7+94SKRUV3Evy3FsfMZY318vGhkWUS5MPhtOM3w1/hCOAOXcg==
-  dependencies:
-    "@types/node" "*"
-    "@types/source-list-map" "*"
-    source-map "^0.7.3"
-
-"@types/webpack@^4.4.31":
-  version "4.41.26"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.26.tgz#27a30d7d531e16489f9c7607c747be6bc1a459ef"
-  integrity sha512-7ZyTfxjCRwexh+EJFwRUM+CDB2XvgHl4vfuqf1ZKrgGvcS5BrNvPQqJh3tsZ0P6h6Aa1qClVHaJZszLPzpqHeA==
-  dependencies:
-    "@types/anymatch" "*"
-    "@types/node" "*"
-    "@types/tapable" "*"
-    "@types/uglify-js" "*"
-    "@types/webpack-sources" "*"
-    source-map "^0.6.0"
-
 "@types/yargs-parser@*":
   version "20.2.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.0.tgz#dd3e6699ba3237f0348cd085e4698780204842f9"
@@ -2111,14 +2068,6 @@ clean-stack@^2.0.0:
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
   integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
-clean-webpack-plugin@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz#a99d8ec34c1c628a4541567aa7b457446460c62b"
-  integrity sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==
-  dependencies:
-    "@types/webpack" "^4.4.31"
-    del "^4.1.1"
-
 cli-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"