Use ESBuild loader for compression

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

packages/core/admin/package.json

@@ -37,11 +37,8 @@
   },
   "dependencies": {
     "@babel/core": "7.16.7",
-    "@babel/plugin-proposal-async-generator-functions": "7.16.7",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.16.7",
     "@babel/plugin-transform-runtime": "7.16.7",
+    "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.16.7",
     "@babel/preset-react": "7.16.7",
     "@babel/runtime": "7.16.7",
@@ -68,6 +65,7 @@
     "css-loader": "6.5.1",
     "date-fns": "2.22.1",
     "dotenv": "8.5.1",
+    "esbuild-loader": "2.18.0",
     "execa": "^1.0.0",
     "fast-deep-equal": "3.1.3",
     "font-awesome": "^4.7.0",
@@ -80,7 +78,6 @@
     "html-webpack-plugin": "5.5.0",
     "immer": "9.0.6",
     "invariant": "^2.2.4",
-    "is-wsl": "2.2.0",
     "js-cookie": "2.2.1",
     "jsonwebtoken": "8.5.1",
     "koa-compose": "4.1.0",

packages/core/admin/webpack.config.js

@@ -1,13 +1,13 @@
 'use strict';
 
 const path = require('path');
+const fse = require('fs-extra');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 const WebpackBar = require('webpackbar');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
-const isWsl = require('is-wsl');
 const alias = require('./webpack.alias');
 const getClientEnvironment = require('./env');
 
@@ -47,6 +47,8 @@ module.exports = ({
       ]
     : [];
 
+  const babelPolyfill = '@babel/polyfill/dist/polyfill.min.js';
+
   return {
     mode: isProduction ? 'production' : 'development',
     bail: isProduction ? true : false,
@@ -54,7 +56,7 @@ module.exports = ({
     experiments: {
       topLevelAwait: true,
     },
-    entry,
+    entry: [babelPolyfill, entry],
     output: {
       path: dest,
       publicPath: options.adminPath,
@@ -66,28 +68,9 @@ module.exports = ({
     optimization: {
       minimize: optimize,
       minimizer: [
-        // Copied from react-scripts
+        new ESBuildMinifyPlugin({
-        new TerserPlugin({
+          target: 'es2015',
-          terserOptions: {
+          css: true, // Apply minification to CSS assets
-            parse: {
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              comparisons: false,
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
-            },
-            output: {
-              ecma: 5,
-              comments: false,
-              ascii_only: true,
-            },
-          },
-          parallel: !isWsl,
         }),
       ],
       runtimeChunk: true,
@@ -96,41 +79,79 @@ module.exports = ({
       rules: [
         {
           test: /\.m?js$/,
-          // TODO remove when plugins are built separately
+          include: cacheDir,
-          include: [cacheDir, ...pluginsPath],
+          oneOf: [
-          use: {
+            // Use babel-loader for files that distinct the ee and ce code
-            loader: require.resolve('babel-loader'),
+            // These files have an import Something from 'ee_else_ce/
-            options: {
+            {
-              cacheDirectory: true,
+              test(filePath) {
-              cacheCompression: isProduction,
+                if (!filePath) {
-              compact: isProduction,
+                  return false;
-              presets: [
+                }
-                require.resolve('@babel/preset-env'),
-                require.resolve('@babel/preset-react'),
-              ],
-              plugins: [
-                [
-                  require.resolve('@strapi/babel-plugin-switch-ee-ce'),
-                  {
-                    // Imported this tells the custom plugin where to look for the ee folder
-                    roots,
-                  },
-                ],
-                require.resolve('@babel/plugin-proposal-class-properties'),
-                require.resolve('@babel/plugin-syntax-dynamic-import'),
-                require.resolve('@babel/plugin-transform-modules-commonjs'),
-                require.resolve('@babel/plugin-proposal-async-generator-functions'),
 
-                [
+                try {
-                  require.resolve('@babel/plugin-transform-runtime'),
+                  const fileContent = fse.readFileSync(filePath).toString();
-                  {
+
-                    // absoluteRuntime: true,s
+                  if (fileContent.match(/from.* ['"]ee_else_ce\//)) {
-                    helpers: true,
+                    return true;
-                    regenerator: true,
+                  }
-                  },
+
-                ],
+                  return false;
-                [require.resolve('babel-plugin-styled-components'), { pure: true }],
+                } catch (e) {
-              ],
+                  return false;
+                }
+              },
+              use: {
+                loader: require.resolve('babel-loader'),
+                options: {
+                  cacheDirectory: true,
+                  cacheCompression: isProduction,
+                  compact: isProduction,
+                  presets: [
+                    require.resolve('@babel/preset-env'),
+                    require.resolve('@babel/preset-react'),
+                  ],
+                  plugins: [
+                    [
+                      require.resolve('@strapi/babel-plugin-switch-ee-ce'),
+                      {
+                        // Imported this tells the custom plugin where to look for the ee folder
+                        roots,
+                      },
+                    ],
+
+                    [
+                      require.resolve('@babel/plugin-transform-runtime'),
+                      {
+                        helpers: true,
+                        regenerator: true,
+                      },
+                    ],
+                    [require.resolve('babel-plugin-styled-components'), { pure: true }],
+                  ],
+                },
+              },
+            },
+            // Use esbuild-loader for the other files
+            {
+              use: {
+                loader: require.resolve('esbuild-loader'),
+                options: {
+                  loader: 'jsx',
+                  target: 'es2015',
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.m?js$/,
+          include: pluginsPath,
+          use: {
+            loader: require.resolve('esbuild-loader'),
+            options: {
+              loader: 'jsx',
+              target: 'es2015',
             },
           },
         },