[Beta] optimize build

.babelrc-optimize.js

@@ -0,0 +1,15 @@
+// See `wiki/consuming.md` for rationale and consumer requirements.
+
+const baseConfig = require('./.babelrc.js');
+// Skip `propType` generation
+baseConfig.plugins.splice(
+  baseConfig.plugins.indexOf(
+    './scripts/babel/proptypes-from-ts-props'
+  ),
+  1
+);
+// Transform runtimes using babel plugin.
+// Requires consuming applications to use `@babel/runtime`.
+baseConfig.plugins.push('@babel/plugin-transform-runtime');
+baseConfig.env = {};
+module.exports = baseConfig;

.gitignore

@@ -14,6 +14,7 @@ tmp/
 dist/
 lib/
 es/
+optimize/
 test-env/
 .idea
 .vscode/

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Updated the outline color in `euiCustomControlFocused` mixin to use 
 `$euiFocusRingColor` instead of `currentColor` ([#5479](https://github.com/elastic/eui/pull/5479))
+- **[Beta]** Added `optimize` build as a lighter weight option more suited to prodcution environments ([#5527](https://github.com/elastic/eui/pull/5527))
 
 ## [`45.0.0`](https://github.com/elastic/eui/tree/v45.0.0)
 

scripts/compile-clean.js

@@ -3,4 +3,5 @@ const rimraf = require('rimraf');
 rimraf.sync('dist');
 rimraf.sync('lib');
 rimraf.sync('es');
+rimraf.sync('optimize');
 rimraf.sync('test-env');

scripts/compile-eui.js

@@ -14,10 +14,11 @@ const IGNORE_PACKAGES = ['**/react-datepicker/test/**/*.js']
 function compileLib() {
   shell.mkdir('-p', 'lib/services', 'lib/test');
 
-  console.log('Compiling src/ to es/, lib/, and test-env/');
+  console.log('Compiling src/ to es/, lib/, optimize/, and test-env/');
 
   // Run all code (com|trans)pilation through babel (ESNext JS & TypeScript)
 
+  // Default build
   execSync(
     `babel --quiet --out-dir=es --extensions .js,.ts,.tsx --ignore "${[...IGNORE_BUILD, ...IGNORE_TESTS, ...IGNORE_TESTENV, ...IGNORE_PACKAGES].join(',')}" src`,
     {
@@ -28,7 +29,6 @@ function compileLib() {
       },
     }
   );
-
   execSync(
     `babel --quiet --out-dir=lib --extensions .js,.ts,.tsx --ignore "${[...IGNORE_BUILD, ...IGNORE_TESTS, ...IGNORE_TESTENV, ...IGNORE_PACKAGES].join(',')}" src`,
     {
@@ -39,6 +39,28 @@ function compileLib() {
     }
   );
 
+  // `optimize` build (Beta)
+  execSync(
+    `babel --quiet --out-dir=optimize/es --extensions .js,.ts,.tsx --config-file="./.babelrc-optimize.js" --ignore "${[...IGNORE_BUILD, ...IGNORE_TESTS, ...IGNORE_TESTENV, ...IGNORE_PACKAGES].join(',')}" src`,
+    {
+      env: {
+        ...process.env,
+        BABEL_MODULES: false,
+        NO_COREJS_POLYFILL: true,
+      },
+    }
+  );
+  execSync(
+    `babel --quiet --out-dir=optimize/lib --extensions .js,.ts,.tsx --config-file="./.babelrc-optimize.js" --ignore "${[...IGNORE_BUILD, ...IGNORE_TESTS, ...IGNORE_TESTENV, ...IGNORE_PACKAGES].join(',')}" src`,
+    {
+      env: {
+        ...process.env,
+        NO_COREJS_POLYFILL: true,
+      },
+    }
+  );
+
+  // `test-env` build
   execSync(
     `babel --quiet --out-dir=test-env --extensions .js,.ts,.tsx --config-file="./.babelrc-test-env.js" --ignore "${[...IGNORE_BUILD, ...IGNORE_TESTS, ...IGNORE_PACKAGES].join(',')}" src`,
     {

wiki/consuming.md

@@ -107,3 +107,28 @@ This eliminates the need to polyfill or transform the EUI build for an environme
 ### Mocked component files
 
 Besides babel transforms, the test environment build consumes mocked component files of the type `src/**/[name].testenv.*`. During the build, files of the type `src/**/[name].*` will be replaced by those with the `testenv` namespace. The purpose of this mocking is to further mitigate the impacts of time- and import-dependent rendering, and simplify environment output such as test snapshots. Information on creating mock component files can be found with [testing documentation](testing.md).
+
+## Using the `optimize` build (Beta)
+
+The `optimize` output directory is an opt-in intermediate step as we work towards dedicated, formal build output for development and production environments.
+
+When compiling with webpack, use the `resolve.alias` configuration to target the desired directory:
+
+```json
+resolve: {
+  alias: {
+    '@elastic/eui$': '@elastic/eui/optimize/lib'
+  }
+}
+```
+
+Designated "Beta" as included babel plugins may change and the output directory is likely to be renamed.
+
+### Notable differences
+
+* Absence of `propTypes`
+  * Significant bundle size decrease
+  * Likely not suitable for development environments
+* Runtime transforms
+  * Slight bundle size decrease
+  * Requires `@babel/runtime` be a consumer dependency