Add option to mesure webpack speed

Signed-off-by: soupette <cyril@strapi.io>

examples/getstarted/package.json

@@ -1,7 +1,11 @@
 {
   "name": "getstarted",
   "private": true,
+<<<<<<< HEAD
   "version": "4.1.7",
+=======
+  "version": "4.1.4",
+>>>>>>> Add option to mesure webpack speed
   "description": "A Strapi application.",
   "scripts": {
     "develop": "strapi develop",

packages/core/admin/package.json

@@ -27,7 +27,8 @@
     "develop": "yarn create:plugin-file && yarn develop:webpack",
     "develop:webpack": "cross-env NODE_ENV=development webpack serve --config webpack.config.dev.js --progress profile",
     "prepublishOnly": "yarn build",
-    "builde": "rimraf build && node ./scripts/build.js",
+    "build": "rimraf build && node ./scripts/build.js",
+    "mesure:webpack-build": "rimraf build && cross-env MESURE_BUILD_SPEED=true node ./scripts/build.js",
     "test": "echo \"no tests yet\"",
     "test:unit": "jest --verbose",
     "test:front": "cross-env IS_EE=true jest --config ./jest.config.front.js",

packages/core/admin/scripts/build.js

@@ -3,7 +3,11 @@
 const path = require('path');
 const webpack = require('webpack');
 const { isObject } = require('lodash');
+// eslint-disable-next-line node/no-extraneous-require
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+
 const webpackConfig = require('../webpack.config');
+const getPluginsPath = require('../utils/get-plugins-path');
 const {
   getCorePluginsPath,
   getPluginToInstallPath,
@@ -12,20 +16,24 @@ const {
 
 const PLUGINS_TO_INSTALL = ['i18n', 'users-permissions'];
 
+// Wrapper that outputs the webpack speed
+const smp = new SpeedMeasurePlugin();
+
 const buildAdmin = async () => {
   const entry = path.join(__dirname, '..', 'admin', 'src');
   const dest = path.join(__dirname, '..', 'build');
   const corePlugins = getCorePluginsPath();
   const plugins = getPluginToInstallPath(PLUGINS_TO_INSTALL);
   const allPlugins = { ...corePlugins, ...plugins };
+  const pluginsPath = getPluginsPath();
 
   await createPluginsFile(allPlugins);
 
   const args = {
     entry,
     dest,
-    cacheDir: __dirname,
-    pluginsPath: [path.resolve(__dirname, '../../../../packages')],
+    cacheDir: path.join(__dirname, '..'),
+    pluginsPath,
     env: 'production',
     optimize: true,
     options: {
@@ -34,7 +42,10 @@ const buildAdmin = async () => {
     },
   };
 
-  const compiler = webpack(webpackConfig(args));
+  const config =
+    process.env.MESURE_BUILD_SPEED === 'true' ? smp.wrap(webpackConfig(args)) : webpackConfig(args);
+
+  const compiler = webpack(config);
 
   console.log('Building the admin panel');
 

packages/core/admin/utils/get-plugins-path.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const { join, resolve } = require('path');
+const fs = require('fs-extra');
+// eslint-disable-next-line node/no-extraneous-require
+const glob = require('glob');
+
+const getPluginsPath = () => {
+  const rootPath = join('..', '..', '..', 'packages');
+  const corePath = join(rootPath, 'core', '*');
+  const pluginsPath = join(rootPath, 'plugins', '*');
+  const corePackageDirs = glob.sync(corePath);
+  const pluginsPackageDirs = glob.sync(pluginsPath);
+  const packageDirs = [...corePackageDirs, ...pluginsPackageDirs].filter(dir => {
+    const isCoreAdmin = dir.includes('packages/core/admin/');
+    const pathToEntryPoint = join(dir, 'admin', 'src', 'index.js');
+    const doesAdminFolderExist = fs.pathExistsSync(pathToEntryPoint);
+
+    return !isCoreAdmin && doesAdminFolderExist;
+  });
+
+  return packageDirs.map(dir => resolve(__dirname, '..', join(dir, 'admin', 'src')));
+};
+
+module.exports = getPluginsPath;

packages/core/admin/webpack.config.dev.js

@@ -1,40 +1,15 @@
 'use strict';
 
 const path = require('path');
-const fs = require('fs-extra');
-
-// eslint-disable-next-line node/no-extraneous-require
-const glob = require('glob');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const { DuplicateReporterPlugin } = require('duplicate-dependencies-webpack-plugin');
-
+const getPluginsPath = require('./utils/get-plugins-path');
 const webpackConfig = require('./webpack.config');
 
-const getPluginsPath = () => {
-  const rootPath = path.join('..', '..', '..', 'packages');
-  const corePath = path.join(rootPath, 'core', '*');
-  const pluginsPath = path.join(rootPath, 'plugins', '*');
-  const corePackageDirs = glob.sync(corePath);
-  const pluginsPackageDirs = glob.sync(pluginsPath);
-  const packageDirs = [...corePackageDirs, ...pluginsPackageDirs].filter(dir => {
-    const isCoreAdmin = dir.includes('packages/core/admin/');
-    const pathToEntryPoint = path.join(dir, 'admin', 'src', 'index.js');
-    const doesAdminFolderExist = fs.pathExistsSync(pathToEntryPoint);
-
-    return !isCoreAdmin && doesAdminFolderExist;
-  });
-
-  return packageDirs.map(dir => path.resolve(__dirname, path.join(dir, 'admin', 'src')));
-};
-
 module.exports = () => {
   const analyzeBundle = process.env.ANALYZE_BUNDLE;
   const analyzeDuplicateDependencies = process.env.ANALYZE_DEPS;
-  // Directly inject a polyfill in the webpack entry point before the entry point
-  // FIXME: I have noticed a bug regarding the helper-plugin and esbuild-loader
-  // The only I could fix it was to inject the babel polyfill
-  const babelPolyfill = '@babel/polyfill/dist/polyfill.min.js';
-  const entry = [babelPolyfill, path.join(__dirname, 'admin', 'src')];
+  const entry = path.join(__dirname, 'admin', 'src');
   const dest = path.join(__dirname, 'build');
 
   // When running the analyze:bundle command, it needs a production build
@@ -44,11 +19,12 @@ module.exports = () => {
     backend: 'http://localhost:1337',
     adminPath: '/admin/',
   };
+  const pluginsPath = getPluginsPath();
 
   const args = {
     entry,
     cacheDir: __dirname,
-    pluginsPath: getPluginsPath(),
+    pluginsPath,
     dest,
     env,
     options,