Add rw build --perf to measure babel-plugin impact

packages/cli/package.json

@@ -50,7 +50,7 @@
     "@types/node-fetch": "2.5.10"
   },
   "scripts": {
-    "dev": "yarn build:js && RWJS_CWD=../../__fixtures__/example-todo-main node dist/index.js",
+    "dev": "RWJS_CWD=../../__fixtures__/example-todo-main node dist/index.js",
     "build": "yarn build:js",
     "prepublishOnly": "yarn build",
     "build:clean-dist": "rimraf 'dist/**/*/__tests__'",

packages/cli/src/commands/__tests__/build.test.js

@@ -65,18 +65,30 @@ test('The build command runs the correct commands.', async () => {
     `yarn cross-env NODE_ENV=production babel src --out-dir dist --delete-dir-on-start --extensions .ts,.js --ignore '**/*.test.ts,**/*.test.js,**/__tests__' --source-maps`
   )
 
-  expect(execa.mock.results[2].value).toEqual(
-    `yarn cross-env NODE_ENV=production webpack --config ../node_modules/@redwoodjs/core/config/webpack.production.js`
-  )
+  expect(
+    execa.mock.results[2].value.startsWith(
+      'yarn cross-env NODE_ENV=production webpack --config'
+    )
+  ).toEqual(true)
+
+  expect(
+    execa.mock.results[2].value.endsWith('core/config/webpack.production.js')
+  ).toEqual(true)
 })
 
 test('Should run prerender for web, after build', async () => {
   // Prerender is true by default
   await handler({ side: ['web'], prerender: true })
 
-  expect(execa.mock.results[1].value).toEqual(
-    'yarn cross-env NODE_ENV=production webpack --config ../node_modules/@redwoodjs/core/config/webpack.production.js'
-  )
+  expect(
+    execa.mock.results[1].value.startsWith(
+      'yarn cross-env NODE_ENV=production webpack --config'
+    )
+  ).toEqual(true)
+
+  expect(
+    execa.mock.results[1].value.endsWith('core/config/webpack.production.js')
+  ).toEqual(true)
 
   expect(getPrerenderTasks).toHaveBeenCalled()
 })

packages/cli/src/commands/build.js

@@ -70,6 +70,12 @@ export const builder = (yargs) => {
       default: getConfig().experimental.esbuild,
       description: 'Use ESBuild for api side [experimental]',
     })
+    .option('performance', {
+      alias: 'perf',
+      type: 'boolean',
+      default: false,
+      description: 'Measure build performance',
+    })
     .epilogue(
       `Also see the ${terminalLink(
         'Redwood CLI Reference',
@@ -85,7 +91,12 @@ export const handler = async ({
   prisma = true,
   esbuild = false,
   prerender,
+  performance = false,
 }) => {
+  let webpackConfigPath = require.resolve(
+    `@redwoodjs/core/config/webpack.${stats ? 'stats' : 'production'}.js`
+  )
+
   const execCommandsForSides = {
     api: {
       // must use path.join() here, and for 'web' below, to support Windows
@@ -94,12 +105,22 @@ export const handler = async ({
     },
     web: {
       cwd: path.join(getPaths().base, 'web'),
-      cmd: `yarn cross-env NODE_ENV=production webpack --config ../node_modules/@redwoodjs/core/config/webpack.${
-        stats ? 'stats' : 'production'
-      }.js`,
+      cmd: `yarn cross-env NODE_ENV=production webpack --config ${webpackConfigPath}`,
     },
   }
 
+  if (performance) {
+    webpackConfigPath = require.resolve(
+      '@redwoodjs/core/config/webpack.perf.js'
+    )
+    execa.sync(
+      `yarn cross-env NODE_ENV=production webpack --config ${webpackConfigPath}`,
+      { stdio: 'inherit', shell: true }
+    )
+    // We do not want to continue building...
+    return
+  }
+
   if (stats) {
     side = ['web']
     console.log(

packages/core/config/babel-preset.js

@@ -37,7 +37,7 @@ module.exports = () => {
           version: packageJSON.devDependencies['@babel/runtime-corejs3'],
         },
       ],
-      ['babel-plugin-graphql-tag'],
+
       [
         require('../dist/babelPlugins/babel-plugin-redwood-directory-named-import'),
       ],
@@ -96,6 +96,7 @@ module.exports = () => {
               ],
             },
           ],
+          ['babel-plugin-graphql-tag'],
           [require('../dist/babelPlugins/babel-plugin-redwood-import-dir')],
         ],
       },
@@ -164,6 +165,7 @@ module.exports = () => {
               ],
             },
           ],
+          ['babel-plugin-graphql-tag'],
           [
             'inline-react-svg',
             {

packages/core/config/webpack.common.js

@@ -177,10 +177,7 @@ module.exports = (webpackEnv) => {
        */
       app:
         redwoodPaths.web.index ||
-        path.join(
-          redwoodPaths.base,
-          'node_modules/@redwoodjs/web/dist/entry/index.js'
-        ),
+        require.resolve('@redwoodjs/web/dist/entry/index.js'),
     },
     resolve: {
       extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
@@ -211,7 +208,11 @@ module.exports = (webpackEnv) => {
       }),
       new CopyPlugin({
         patterns: [
-          { from: 'public/', to: '', globOptions: { ignore: ['README.md'] } },
+          {
+            from: path.join(redwoodPaths.web.base, 'public'),
+            to: '',
+            globOptions: { ignore: ['README.md'] },
+          },
         ],
       }),
       isEnvProduction &&
@@ -252,6 +253,7 @@ module.exports = (webpackEnv) => {
                 {
                   loader: 'babel-loader',
                   options: {
+                    cwd: redwoodPaths.base,
                     plugins: [
                       shouldIncludeFastRefresh &&
                         require.resolve('react-refresh/babel'),
@@ -273,6 +275,7 @@ module.exports = (webpackEnv) => {
                 {
                   loader: 'babel-loader',
                   options: {
+                    cwd: redwoodPaths.base,
                     plugins: [
                       shouldIncludeFastRefresh &&
                         require.resolve('react-refresh/babel'),
@@ -290,10 +293,7 @@ module.exports = (webpackEnv) => {
             // .module.css (2), .css (3), .module.scss (4), .scss (5)
             ...getStyleLoaders(isEnvProduction),
             isEnvProduction && {
-              test: path.join(
-                redwoodPaths.base,
-                'node_modules/@redwoodjs/router/dist/splash-page'
-              ),
+              test: require.resolve('@redwoodjs/router/dist/splash-page'),
               use: 'null-loader',
             },
             // (6)

packages/core/config/webpack.perf.js

@@ -0,0 +1,33 @@
+const BabelTimingPlugin = require('babel-timing/webpack/plugin')
+
+const webpackConfig = require('./webpack.common')
+
+// https://github.com/toomuchdesign/babel-timing
+/** @type {import('webpack').Configuration}  Configuration with webpack bundler analyzer config */
+
+const config = webpackConfig('production')
+
+config.plugins.push(
+  new BabelTimingPlugin({
+    output: 'console',
+    expandPackages: true,
+    aggregateBy: 'plugins',
+  })
+)
+
+/** Note: Only matches regex */
+const indexOfRulesTest = (regex) => {
+  return config.module.rules[0].oneOf.findIndex((r) => {
+    return r.test.toString() === regex.toString()
+  })
+}
+
+const jsBabel = indexOfRulesTest(/\.(js|mjs|jsx)$/)
+config.module.rules[0].oneOf[jsBabel].use[0].options.customize =
+  require.resolve('babel-timing/webpack/babel-loader-customize')
+
+const tsBabel = indexOfRulesTest(/\.(ts|tsx)$/)
+config.module.rules[0].oneOf[tsBabel].use[0].options.customize =
+  require.resolve('babel-timing/webpack/babel-loader-customize')
+
+module.exports = config

packages/core/package.json

@@ -31,6 +31,7 @@
     "@redwoodjs/internal": "^0.34.1",
     "@redwoodjs/testing": "^0.34.1",
     "babel-loader": "8.2.2",
+    "babel-timing": "0.9.1",
     "babel-plugin-auto-import": "1.1.0",
     "babel-plugin-graphql-tag": "3.3.0",
     "babel-plugin-inline-react-svg": "2.0.1",
@@ -64,8 +65,7 @@
     "webpack-dev-server": "3.10.3",
     "webpack-manifest-plugin": "3.0.0",
     "webpack-merge": "5.1.2",
-    "webpack-retry-chunk-load-plugin": "1.4.0",
-    "x----x----x": "^0 RedwoodJS"
+    "webpack-retry-chunk-load-plugin": "1.4.0"
   },
   "devDependencies": {
     "@types/babel-core": "6.25.6",

packages/testing/package.json

@@ -30,8 +30,7 @@
     "jest-watch-typeahead": "0.6.3",
     "msw": "0.29.0",
     "ts-toolbelt": "9.6.0",
-    "whatwg-fetch": "3.6.2",
-    "x----x----x": "^0 Types"
+    "whatwg-fetch": "3.6.2"
   },
   "scripts": {
     "build": "yarn build:js && yarn build:types",