Enables tree shaking in production for plugins

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>
elastic · May 5, 2020 · f855331 · f855331
1 parent 23282a2
commit f855331
Show file tree

Hide file tree

Showing 17 changed files with 48 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -502,6 +502,11 @@
     "xmlbuilder": "13.0.2",
     "zlib": "^1.0.5"
   },
+  "sideEffects": [
+    "./webpackShims/*.js",
+    "plugins/*/public/index.{js,ts}",
+    "./src/plugins/console/public/application/models/legacy_core_editor/mode/*.{js,ts}"
+  ],
   "engines": {
     "node": "10.19.0",
     "yarn": "^1.21.1"

diff --git a/packages/kbn-babel-preset/package.json b/packages/kbn-babel-preset/package.json
@@ -7,8 +7,6 @@
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.1",
     "@babel/preset-typescript": "^7.9.0",

diff --git a/packages/kbn-babel-preset/webpack_preset.js b/packages/kbn-babel-preset/webpack_preset.js
@@ -33,8 +33,6 @@ module.exports = () => {
       require('./common_preset'),
     ],
     plugins: [
-      require.resolve('@babel/plugin-transform-modules-commonjs'),
-      require.resolve('@babel/plugin-syntax-dynamic-import'),
       [
         require.resolve('babel-plugin-styled-components'),
         {

diff --git a/packages/kbn-i18n/babel.config.js b/packages/kbn-i18n/babel.config.js
@@ -21,6 +21,7 @@ module.exports = {
   env: {
     web: {
       presets: ['@kbn/babel-preset/webpack_preset'],
+      plugins: [require.resolve('@babel/plugin-transform-modules-commonjs')],
     },
     node: {
       presets: ['@kbn/babel-preset/node_preset'],

diff --git a/packages/kbn-i18n/package.json b/packages/kbn-i18n/package.json
@@ -14,6 +14,7 @@
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.9.0",
     "@kbn/babel-preset": "1.0.0",
     "@kbn/dev-utils": "1.0.0",
     "@types/intl-relativeformat": "^2.1.0",

diff --git a/packages/kbn-interpreter/.babelrc b/packages/kbn-interpreter/.babelrc
@@ -1,6 +1,8 @@
 {
   "presets": ["@kbn/babel-preset/webpack_preset"],
   "plugins": [
+    "@babel/plugin-transform-modules-commonjs",
+    "@babel/plugin-syntax-dynamic-import",
     ["@babel/plugin-transform-runtime", {
       "regenerator": true
     }]

diff --git a/packages/kbn-interpreter/package.json b/packages/kbn-interpreter/package.json
@@ -18,6 +18,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.9.0",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@kbn/babel-preset": "1.0.0",
     "@kbn/dev-utils": "1.0.0",

diff --git a/packages/kbn-interpreter/tasks/build/server_code_transformer.test.js b/packages/kbn-interpreter/tasks/build/server_code_transformer.test.js
@@ -28,15 +28,10 @@ describe('js support', () => {
   it('transpiles js file', () => {
     const transformer = createServerCodeTransformer();
     expect(transformer(JS_FIXTURE, JS_FIXTURE_PATH)).toMatchInlineSnapshot(`
-"\\"use strict\\";
-
-var _util = _interopRequireDefault(require(\\"util\\"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable */
-console.log(_util.default.format('hello world'));"
-`);
+      "/* eslint-disable */
+      import util from 'util';
+      console.log(util.format('hello world'));"
+    `);
   });
 
   it('throws errors for js syntax errors', () => {

diff --git a/packages/kbn-optimizer/package.json b/packages/kbn-optimizer/package.json
@@ -47,5 +47,8 @@
     "watchpack": "^1.6.0",
     "webpack": "^4.41.5",
     "webpack-merge": "^4.2.2"
-  }
+  },
+  "sideEffects": [
+    "src/__fixtures__/mock_repo/plugins/*/public/index.{js,ts}"
+  ]
 }
diff --git a/packages/kbn-optimizer/src/integration_tests/__snapshots__/basic_optimization.test.ts.snap b/packages/kbn-optimizer/src/integration_tests/__snapshots__/basic_optimization.test.ts.snap
diff --git a/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts b/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts
@@ -135,13 +135,10 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
   const foo = config.bundles.find(b => b.id === 'foo')!;
   expect(foo).toBeTruthy();
   foo.cache.refresh();
-  expect(foo.cache.getModuleCount()).toBe(4);
+  expect(foo.cache.getModuleCount()).toBe(1);
   expect(foo.cache.getReferencedFiles()).toMatchInlineSnapshot(`
     Array [
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/async_import.ts,
-      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/ext.ts,
-      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/index.ts,
-      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/lib.ts,
     ]
   `);
 
@@ -150,20 +147,17 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
   bar.cache.refresh();
   expect(bar.cache.getModuleCount()).toBe(
     // code + styles + style/css-loader runtimes
-    15
+    12
   );
 
   expect(bar.cache.getReferencedFiles()).toMatchInlineSnapshot(`
     Array [
       <absolute path>/node_modules/css-loader/package.json,
       <absolute path>/node_modules/style-loader/package.json,
-      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/index.ts,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/legacy/styles.scss,
-      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/lib.ts,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/async_import.ts,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/ext.ts,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/index.ts,
-      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/lib.ts,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/src/legacy/ui/public/icon.svg,
     ]
   `);

diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -116,6 +116,7 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
     },
 
     optimization: {
+      usedExports: true,
       noEmitOnErrors: true,
     },
 
@@ -164,6 +165,7 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
               },
             },
           ],
+          sideEffects: true,
         },
         {
           test: /\.scss$/,
@@ -261,6 +263,7 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
               loader: require.resolve('./theme_loader'),
             },
           ],
+          sideEffects: true,
         },
         {
           test: /\.(woff|woff2|ttf|eot|svg|ico|png|jpg|gif|jpeg)(\?|$)/,
@@ -333,14 +336,14 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
     ],
 
     optimization: {
+      usedExports: true,
       minimizer: [
         new TerserPlugin({
           cache: false,
           sourceMap: false,
           extractComments: false,
           parallel: false,
           terserOptions: {
-            compress: false,
             mangle: false,
           },
         }),

diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
@@ -49,6 +49,13 @@ const STATS_WARNINGS_FILTER = new RegExp(
 );
 const IS_CODE_COVERAGE = !!process.env.CODE_COVERAGE;
 
+const LEGACY_PRESETS = {
+  plugins: [
+    require.resolve('@babel/plugin-transform-modules-commonjs'),
+    require.resolve('@babel/plugin-syntax-dynamic-import'),
+  ],
+};
+
 function recursiveIssuer(m) {
   if (m.issuer) {
     return recursiveIssuer(m.issuer);
@@ -123,7 +130,7 @@ export default class BaseOptimizer {
   }
 
   warmupThreadLoaderPool() {
-    const baseModules = ['babel-loader', BABEL_PRESET_PATH];
+    const baseModules = ['babel-loader', BABEL_PRESET_PATH, LEGACY_PRESETS];
 
     threadLoader.warmup(
       // pool options, like passed to loader options
@@ -522,6 +529,8 @@ export default class BaseOptimizer {
   }
 
   getPresets() {
-    return IS_CODE_COVERAGE ? [ISTANBUL_PRESET_PATH, BABEL_PRESET_PATH] : [BABEL_PRESET_PATH];
+    return IS_CODE_COVERAGE
+      ? [ISTANBUL_PRESET_PATH, BABEL_PRESET_PATH, LEGACY_PRESETS]
+      : [BABEL_PRESET_PATH, LEGACY_PRESETS];
   }
 }
diff --git a/src/optimize/create_ui_exports_module.js b/src/optimize/create_ui_exports_module.js
@@ -22,7 +22,7 @@ function normalizePath(path) {
   return path.replace(/[\\\/]+/g, '/');
 }
 
-export default function() {
+module.exports = function() {
   if (!module.id.includes('?')) {
     throw new Error('create_ui_exports_module loaded without JSON args in module.id');
   }
@@ -37,4 +37,4 @@ export default function() {
   return {
     code: `${comment}\n${requires}\n`,
   };
-}
+};
diff --git a/src/plugins/discover/public/application/angular/context_app.js b/src/plugins/discover/public/application/angular/context_app.js
@@ -35,9 +35,7 @@ import {
 } from './context/query';
 import { callAfterBindingsWorkaround } from './context/helpers/call_after_bindings_workaround';
 
-const module = getAngularModule();
-
-module.directive('contextApp', function ContextApp() {
+getAngularModule().directive('contextApp', function ContextApp() {
   return {
     bindToController: true,
     controller: callAfterBindingsWorkaround(ContextAppController),

diff --git a/tsconfig.browser.json b/tsconfig.browser.json
@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "module": "esnext",
   },
   "include": [

diff --git a/x-pack/package.json b/x-pack/package.json
@@ -184,6 +184,8 @@
   },
   "dependencies": {
     "@babel/core": "^7.9.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.9.0",
     "@babel/register": "^7.9.0",
     "@babel/runtime": "^7.9.2",
     "@elastic/apm-rum-react": "^1.1.1",
@@ -372,6 +374,9 @@
   "engines": {
     "yarn": "^1.21.1"
   },
+  "sideEffects": [
+    "src/__fixtures__/mock_repo/plugins/*/public/index.{js,ts}"
+  ],
   "workspaces": {
     "nohoist": [
       "mochawesome",