Enables tree shaking in production for plugins

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

package.json

@@ -502,6 +502,10 @@
     "xmlbuilder": "13.0.2",
     "zlib": "^1.0.5"
   },
+  "sideEffects": [
+    "./webpackShims/*.js",
+    "./src/plugins/console/public/application/models/legacy_core_editor/mode/*.{js,ts}"
+  ],
   "engines": {
     "node": "10.19.0",
     "yarn": "^1.21.1"

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",

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'),
         {

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'],

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",

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
     }]

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",

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', () => {

packages/kbn-optimizer/src/__fixtures__/mock_repo/plugins/foo/public/index.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export * from './lib';
+export { fooLibFn } from './lib';
 export * from './ext';
 
 export async function getFoo() {

packages/kbn-optimizer/src/__fixtures__/mock_repo/plugins/foo/public/lib.ts

@@ -20,3 +20,7 @@
 export function fooLibFn() {
   return 'foo';
 }
+
+export function unused() {
+  return 'UNUSED_FUNCTION';
+}

packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts

@@ -52,7 +52,7 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
     repoRoot: MOCK_REPO_DIR,
     pluginScanDirs: [Path.resolve(MOCK_REPO_DIR, 'plugins')],
     maxWorkerCount: 1,
-    dist: true,
+    dist: false,
   });
 
   expect(config).toMatchSnapshot('OptimizerConfig');
@@ -125,12 +125,7 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
   );
   assert('produce zero unexpected states', otherStates.length === 0, otherStates);
 
-  expectFileMatchesSnapshotWithCompression('plugins/foo/target/public/foo.plugin.js', 'foo bundle');
-  expectFileMatchesSnapshotWithCompression(
-    'plugins/foo/target/public/1.plugin.js',
-    '1 async bundle'
-  );
-  expectFileMatchesSnapshotWithCompression('plugins/bar/target/public/bar.plugin.js', 'bar bundle');
+  expectFile('plugins/foo/target/public/foo.plugin.js').toContain('UNUSED_FUNCTION');
 
   const foo = config.bundles.find(b => b.id === 'foo')!;
   expect(foo).toBeTruthy();
@@ -195,11 +190,86 @@ it('uses cache on second run and exist cleanly', async () => {
       "initializing",
       "initializing",
       "initialized",
+      "initialized",
+      "running",
+      "running",
+      "running",
       "success",
     ]
   `);
 });
 
+it('prepares assets for distribution', async () => {
+  const config = OptimizerConfig.create({
+    repoRoot: MOCK_REPO_DIR,
+    pluginScanDirs: [Path.resolve(MOCK_REPO_DIR, 'plugins')],
+    maxWorkerCount: 1,
+    dist: true,
+  });
+
+  expect(config).toMatchSnapshot('OptimizerConfig');
+
+  const log = new ToolingLog({
+    level: 'error',
+    writeTo: {
+      write(chunk) {
+        if (chunk.endsWith('\n')) {
+          chunk = chunk.slice(0, -1);
+        }
+        // eslint-disable-next-line no-console
+        console.error(chunk);
+      },
+    },
+  });
+
+  await runOptimizer(config)
+    .pipe(logOptimizerState(log, config), toArray())
+    .toPromise();
+
+  expectFileMatchesSnapshotWithCompression('plugins/foo/target/public/foo.plugin.js', 'foo bundle');
+  expectFileMatchesSnapshotWithCompression(
+    'plugins/foo/target/public/1.plugin.js',
+    '1 async bundle'
+  );
+  expectFileMatchesSnapshotWithCompression('plugins/bar/target/public/bar.plugin.js', 'bar bundle');
+
+  // removed during tree shaking
+  expectFile('plugins/foo/target/public/foo.plugin.js').not.toContain('UNUSED_FUNCTION');
+
+  const foo = config.bundles.find(b => b.id === 'foo')!;
+  expect(foo).toBeTruthy();
+  foo.cache.refresh();
+  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,
+    ]
+  `);
+
+  const bar = config.bundles.find(b => b.id === 'bar')!;
+  expect(bar).toBeTruthy();
+  bar.cache.refresh();
+  expect(bar.cache.getModuleCount()).toBe(10);
+
+  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/legacy/styles.scss,
+      <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/src/legacy/ui/public/icon.svg,
+    ]
+  `);
+});
+
+/**
+ * Helper to provide expect for a file content
+ */
+const expectFile = (filePath: string) => {
+  const raw = Fs.readFileSync(Path.resolve(MOCK_REPO_DIR, filePath), 'utf8');
+  return expect(raw);
+};
+
 /**
  * Verifies that the file matches the expected output and has matching compressed variants.
  */

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -149,6 +149,7 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
           options: {
             key: bundle.id,
           },
+          sideEffects: true,
         },
         {
           test: /\.css$/,
@@ -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)(\?|$)/,
@@ -320,6 +323,16 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
           IS_KIBANA_DISTRIBUTABLE: `"true"`,
         },
       }),
+      new TerserPlugin({
+        cache: false,
+        sourceMap: false,
+        extractComments: false,
+        parallel: false,
+        terserOptions: {
+          compress: true,
+          mangle: false,
+        },
+      }),
       new CompressionPlugin({
         algorithm: 'brotliCompress',
         filename: '[path].br',
@@ -331,20 +344,12 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
         test: /\.(js|css)$/,
       }),
     ],
-
     optimization: {
-      minimizer: [
-        new TerserPlugin({
-          cache: false,
-          sourceMap: false,
-          extractComments: false,
-          parallel: false,
-          terserOptions: {
-            compress: false,
-            mangle: false,
-          },
-        }),
-      ],
+      usedExports: true,
+
+      // NODE: this is the default with `mode: production` and results in
+      // less than ideal module name reporting
+      concatenateModules: true,
     },
   };
 

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];
   }
 }

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`,
   };
-}
+};

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),

tsconfig.browser.json

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

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",