refactor: require is dog slow

.eslintrc.js

@@ -19,9 +19,9 @@ module.exports = {
     path: true,
     $: true,
     server: true,
-    webpack: true,
     through2: true,
     PluginError: true,
+    NOOP: true,
     BalmJS: true
   },
   plugins: ['@typescript-eslint', 'prettier'],
@@ -35,6 +35,7 @@ module.exports = {
   rules: {
     'prettier/prettier': 'error',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    '@typescript-eslint/no-var-requires': 0,
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/no-empty-function': [2, { allow: ['arrowFunctions'] }],
     '@typescript-eslint/ban-types': 0,

package.json

@@ -34,16 +34,16 @@
     "@types/mocha": "^8.2.0",
     "@types/node": "^14.14.0",
     "@types/rimraf": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.21.0",
-    "@typescript-eslint/parser": "^4.21.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.0.0",
     "chai": "^4.3.0",
     "coveralls": "^3.1.0",
     "cross-env": "^7.0.3",
     "del": "^6.0.0",
     "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-prettier": "^3.3.1",
     "esm": "^3.2.25",
     "gulp": "^4.0.2",

packages/balm-core/package.json

@@ -46,8 +46,8 @@
     "babel-loader": "^8.2.2",
     "browser-sync": "^2.26.14",
     "connect-history-api-fallback": "^1.6.0",
-    "css-loader": "^5.2.0",
-    "cssnano": "^4.1.11",
+    "css-loader": "^5.2.1",
+    "cssnano": "^5.0.1",
     "del": "^6.0.0",
     "esbuild": "^0.11.0",
     "fancy-log": "^1.3.3",
@@ -71,7 +71,7 @@
     "imagemin": "^7.0.1",
     "istextorbinary": "^5.12.0",
     "mini-css-extract-plugin": "^1.4.1",
-    "modernizr": "^3.11.6",
+    "modernizr": "^3.11.7",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "parents": "^1.0.1",
     "plugin-error": "^1.0.1",
@@ -83,7 +83,7 @@
     "pretty-bytes": "^5.6.0",
     "readable-stream": "^3.6.0",
     "require-dir": "^1.2.0",
-    "rollup": "^2.45.1",
+    "rollup": "^2.45.2",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.32.8",
     "ssh2": "^0.8.9",
@@ -95,11 +95,11 @@
     "tslib": "^2.2.0",
     "url-loader": "^4.1.1",
     "webpack": "4",
-    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-bundle-analyzer": "^4.4.1",
     "webpack-dev-middleware": "3",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^5.7.3",
-    "workbox-build": "^6.1.2"
+    "workbox-build": "^6.1.5"
   },
   "devDependencies": {
     "@types/express": "^4.17.11",

packages/balm-core/src/balm.ts

@@ -30,7 +30,7 @@ class Balm {
     BalmJS.afterTask = setTask(name);
   }
 
-  go(recipe: Function = BalmJS.noop): void {
+  go(recipe: Function = NOOP): void {
     if (BalmJS.utils.isFunction(recipe)) {
       registerTasks(recipe);
     } else {

packages/balm-core/src/bundler/esbuild/build.ts

@@ -1,4 +1,3 @@
-import { build } from 'esbuild';
 import { minifyOptions } from './options';
 import { BuildOptions, BalmError } from '@balm-core/index';
 
@@ -39,7 +38,8 @@ const esBuild = (
     pre: true
   });
 
-  build(options)
+  require('esbuild')
+    .build(options)
     .catch((error: BalmError) => {
       BalmJS.logger.error('esbuild', error.message);
     })

packages/balm-core/src/bundler/esbuild/transform.ts

@@ -1,5 +1,4 @@
 import fs from 'fs';
-import { transform } from 'esbuild';
 import { minifyOptions } from './options';
 import { TransformOptions } from '@balm-core/index';
 
@@ -45,7 +44,7 @@ const esTransform = (
         const filename = entryPoint.split('/').pop();
         if (filename && fs.existsSync(build.input)) {
           const inputCode = fs.readFileSync(build.input, 'utf8');
-          const result = await transform(inputCode, options);
+          const result = await require('esbuild').transform(inputCode, options);
 
           fs.mkdirSync(build.output, { recursive: true });
           fs.writeFileSync(path.join(build.output, filename), result.code);

packages/balm-core/src/bundler/rollup/index.ts

@@ -1,4 +1,3 @@
-import { rollup, watch } from 'rollup';
 import getEntry from './entry';
 import getOutput from './output';
 import build from './build';
@@ -8,18 +7,20 @@ const buildLibrary = async (
   inputOptions: InputOptions,
   outputOptions: OutputOptions | OutputOptions[]
 ): Promise<void> => {
+  const rollup = require('rollup');
+
   inputOptions = getEntry(inputOptions);
   outputOptions = getOutput(outputOptions);
   const rollupOptions = Object.assign({}, inputOptions, {
     output: outputOptions
   });
 
-  const bundle = await rollup(rollupOptions);
+  const bundle = await rollup.rollup(rollupOptions);
 
-  const watcher = watch(
+  const watcher = rollup.watch(
     Object.assign({}, rollupOptions, BalmJS.config.scripts.watchOptions)
   );
-  watcher.on('event', (event) => {
+  watcher.on('event', (event: any) => {
     // event.code can be one of:
     //   START        — the watcher is (re)starting
     //   BUNDLE_START — building an individual bundle

packages/balm-core/src/bundler/rollup/plugins.ts

@@ -1,4 +1,3 @@
-import { terser } from 'rollup-plugin-terser';
 import { InputOptions, OutputOptions, RollupPlugin } from '@balm-core/index';
 
 function getInputPlugins(customInputOptions: InputOptions): RollupPlugin[] {
@@ -27,7 +26,11 @@ function getOutputPlugins(customOutputOptions: OutputOptions): RollupPlugin[] {
   }
 
   if (BalmJS.config.env.isProd) {
-    outputPlugins.push(terser(BalmJS.config.scripts.minifyOptions));
+    outputPlugins.push(
+      require('rollup-plugin-terser').terser(
+        BalmJS.config.scripts.minifyOptions
+      )
+    );
   }
 
   if (customOutputOptions.plugins) {

packages/balm-core/src/bundler/webpack/config/common.ts

@@ -51,7 +51,7 @@ function getSplitChunks(): SplitChunksOptions {
   return cacheGroups ? { cacheGroups } : false;
 }
 
-function getCommonConfig(scripts: BalmScripts): Configuration {
+function getCommonConfig(webpack: any, scripts: BalmScripts): Configuration {
   const splitChunks = getSplitChunks();
   const optimization = splitChunks
     ? (BalmJS.utils.deepMerge(

packages/balm-core/src/bundler/webpack/config/dev.ts

@@ -2,8 +2,8 @@ import merge from 'webpack-merge';
 import getCommonConfig from './common';
 import { Configuration, BalmScripts } from '@balm-core/index';
 
-function getDevConfig(scripts: BalmScripts): Configuration {
-  return merge(getCommonConfig(scripts), {
+function getDevConfig(webpack: any, scripts: BalmScripts): Configuration {
+  return merge(getCommonConfig(webpack, scripts), {
     mode: 'development',
     plugins: [
       // This is necessary to emit hot updates

packages/balm-core/src/bundler/webpack/config/index.ts

@@ -2,10 +2,10 @@ import getDevConfig from './dev';
 import getProdConfig from './prod';
 import { Configuration, BalmScripts } from '@balm-core/index';
 
-function getDefaultConfig(scripts: BalmScripts): Configuration {
+function getDefaultConfig(webpack: any, scripts: BalmScripts): Configuration {
   return BalmJS.config.env.isProd || scripts.minify || scripts.ie8
-    ? getProdConfig(scripts)
-    : getDevConfig(scripts);
+    ? getProdConfig(webpack, scripts)
+    : getDevConfig(webpack, scripts);
 }
 
 export default getDefaultConfig;

packages/balm-core/src/bundler/webpack/config/prod.ts

@@ -1,9 +1,4 @@
 import merge from 'webpack-merge';
-import TerserPlugin from 'terser-webpack-plugin';
-import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
-import safePostCssParser from 'postcss-safe-parser';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import getCommonConfig from './common';
 import { Configuration, MinifyOptions, BalmScripts } from '@balm-core/index';
 
@@ -13,15 +8,21 @@ import { Configuration, MinifyOptions, BalmScripts } from '@balm-core/index';
 // Set to `true` or `false` to always turn it on or off
 const bundleAnalyzerReport = process.env.npm_config_report || false;
 
-function getProdConfig(scripts: BalmScripts): Configuration {
+function getProdConfig(webpack: any, scripts: BalmScripts): Configuration {
+  const TerserPlugin = require('terser-webpack-plugin');
+  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+  const safePostCssParser = require('postcss-safe-parser');
+  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+  const webpackBundleAnalyzer = require('webpack-bundle-analyzer');
+
   const shouldUseSourceMap = scripts.sourceMap as boolean;
   const terserOptions: MinifyOptions = scripts.minifyOptions;
 
   if (scripts.ie8) {
     terserOptions.ie8 = true;
   }
 
-  return merge(getCommonConfig(scripts), {
+  return merge(getCommonConfig(webpack, scripts), {
     mode: 'production',
     optimization: {
       minimizer: [
@@ -63,7 +64,9 @@ function getProdConfig(scripts: BalmScripts): Configuration {
           ]
         : []),
       // View the bundle analyzer report
-      ...(bundleAnalyzerReport ? [new BundleAnalyzerPlugin()] : [])
+      ...(bundleAnalyzerReport
+        ? [new webpackBundleAnalyzer.BundleAnalyzerPlugin()]
+        : [])
     ],
     devtool: shouldUseSourceMap ? 'source-map' : false
   });

packages/balm-core/src/bundler/webpack/index.ts

@@ -4,6 +4,10 @@ import getOutput from './output';
 import getDefaultConfig from './config';
 import { BalmEntry, Configuration } from '@balm-core/index';
 
+const webpackModule = process.env.WEBPACK || require.resolve('webpack');
+
+const webpack = require(webpackModule);
+
 function webpackConfig(
   input: BalmEntry,
   output: string,
@@ -33,7 +37,7 @@ function webpackConfig(
     baseConfig.externals = scripts.externals;
   }
 
-  const defaultConfig = getDefaultConfig(scripts);
+  const defaultConfig = getDefaultConfig(webpack, scripts);
 
   const configuration: Configuration = merge(
     baseConfig,
@@ -49,4 +53,5 @@ function webpackConfig(
   return configuration;
 }
 
-export default webpackConfig;
+// export default webpackConfig;
+export { webpack, webpackConfig };

packages/balm-core/src/bundler/webpack/rules/css.ts

@@ -1,4 +1,3 @@
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { cssRegex, cssModuleRegex } from '../config/regex';
 import { RuleSetRule } from '@balm-core/index';
 
@@ -40,7 +39,7 @@ function cssLoader(): RuleSetRule {
     use: [
       BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss.enabled
         ? {
-            loader: MiniCssExtractPlugin.loader,
+            loader: require('mini-css-extract-plugin').loader,
             options: {
               esModule: BalmJS.config.scripts.useEsModule
             }

packages/balm-core/src/config/globals.ts

@@ -1,17 +1,12 @@
-import path from 'path';
-import gulpLoadPlugins from 'gulp-load-plugins';
-import browserSync from 'browser-sync';
-import through2 from 'through2';
-import PluginError from 'plugin-error';
 import fs from 'fs';
+import path from 'path';
 import colors from 'ansi-colors';
 
 // Set env var for ORIGINAL cwd before anything touches it
 process.env.BALM_CWD = process.env.INIT_CWD || process.cwd();
 const gulpModule = `${
   process.env.BALM || process.env.BALM_CWD
 }/node_modules/gulp/index.js`;
-const webpackModule = process.env.WEBPACK || require.resolve('webpack');
 
 if (!fs.existsSync(gulpModule)) {
   console.error(
@@ -27,10 +22,10 @@ if (process.cwd() !== process.env.BALM_CWD) {
   process.chdir(process.env.BALM_CWD);
 }
 
-global.gulp = require(gulpModule);
 global.path = path;
-global.$ = gulpLoadPlugins();
-global.server = browserSync.create();
-global.webpack = require(webpackModule);
-global.through2 = through2;
-global.PluginError = PluginError;
+global.gulp = require(gulpModule);
+global.$ = require('gulp-load-plugins')();
+global.server = require('browser-sync').create();
+global.through2 = require('through2');
+global.PluginError = require('plugin-error');
+global.NOOP = () => {};

packages/balm-core/src/config/index.ts

@@ -28,7 +28,6 @@ enum Bundler {
   esbuild = 'esbuild'
 }
 
-const noop: Function = () => {};
 const vendors: BalmVendor[] = [];
 
 const workspace = process.env.BALM_CWD as string;
@@ -61,7 +60,6 @@ const config: Omit<BalmConfig, 'src' | 'dest' | 'inDesktopApp'> = {
 };
 
 BalmJS.config = config as BalmConfig;
-BalmJS.noop = noop;
 BalmJS.LogLevel = LogLevel;
 BalmJS.Bundler = Bundler;
 BalmJS.vendors = vendors;

packages/balm-core/src/config/server.ts

@@ -17,7 +17,7 @@ const serveStatic: string[] = [
  * @reference https://browsersync.io/docs/options
  */
 const options: object = {};
-const next: Function = () => {};
+const next: Function = NOOP;
 // Middleware
 /**
  * A development middleware for webpack

packages/balm-core/src/middlewares/history.ts

@@ -1,6 +1,6 @@
-import history from 'connect-history-api-fallback';
-
 function historyMiddleware(): object[] {
+  const history = require('connect-history-api-fallback');
+
   const historyOptions = BalmJS.config.server.historyOptions;
 
   return historyOptions

packages/balm-core/src/middlewares/proxy.ts

@@ -1,4 +1,3 @@
-import { createProxyMiddleware } from 'http-proxy-middleware';
 import { BalmProxyConfig } from '@balm-core/index';
 
 function handleProxyConfigError(): void {
@@ -11,6 +10,8 @@ function handleProxyConfigError(): void {
 }
 
 function httpProxyMiddleware(): object[] {
+  const httpProxy = require('http-proxy-middleware');
+
   const middleware: object[] = [];
   const proxyConfig = BalmJS.config.server.proxyConfig;
 
@@ -21,7 +22,7 @@ function httpProxyMiddleware(): object[] {
         const config = proxyConfig as BalmProxyConfig;
         if (config.context && config.options) {
           middleware.push(
-            createProxyMiddleware(config.context, config.options)
+            httpProxy.createProxyMiddleware(config.context, config.options)
           );
         } else {
           handleProxyConfigError();
@@ -31,7 +32,7 @@ function httpProxyMiddleware(): object[] {
         for (const config of proxyConfig as BalmProxyConfig[]) {
           if (config.context && config.options) {
             middleware.push(
-              createProxyMiddleware(config.context, config.options)
+              httpProxy.createProxyMiddleware(config.context, config.options)
             );
           } else {
             handleProxyConfigError();