[Canvas] Minify assets in prod, generate stats on demand (#28391) (#28772)

## Summary

### Asset Optimization in Prod
I noticed on a cloud instance that the Webpack-generated JS files were enormous, on the scale of 20+ MB each.  Looking into it, and chatting with @spalger, we found that the Webpack [`mode` flag](https://webpack.js.org/concepts/mode/) for production builds was not being set.

Before: *91 MB*

![screen shot 2019-01-08 at 2 06 47 pm](https://user-images.githubusercontent.com/297604/50917067-4b759d00-1402-11e9-9f68-150bf8226125.png)

After: *29 MB*

![screen shot 2019-01-08 at 2 05 46 pm](https://user-images.githubusercontent.com/297604/50917102-5d574000-1402-11e9-9185-cee14e706cb3.png)


### Webpack Analysis
In addition, this PR adds the ability to generate a stats file, usable with the [Webpack Analyzer](http://webpack.github.io/analyse/), to look at how our assets are being built.

To run, add an environment flag, e.g:

```
CANVAS_GENERATE_STATS=true node scripts/start
```

![screen shot 2019-01-08 at 2 10 41 pm](https://user-images.githubusercontent.com/297604/50917208-95f71980-1402-11e9-9d2d-7d827996ec8c.png)
![screen shot 2019-01-08 at 2 13 18 pm](https://user-images.githubusercontent.com/297604/50917210-95f71980-1402-11e9-8b23-c80ddd118e9b.png)


### Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

- [x] This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility)
- [ ] ~~Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)~~
- [ ] ~~[Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~~
- [ ] ~~[Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios~~
- [ ] ~~This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~~

### For maintainers

- [ ] ~~This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~~
- [ ] ~~This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~~

x-pack/plugins/canvas/.gitignore

@@ -51,4 +51,7 @@ build
 public/style/index.css
 
 # Don't commit built plugin files
-canvas_plugin/*
+canvas_plugin/*
+
+# Don't commit the Webpack statistics
+webpack_stats.json

x-pack/plugins/canvas/tasks/helpers/webpack.plugins.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+const { writeFileSync } = require('fs');
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const {
@@ -13,12 +14,11 @@ const {
 const sourceDir = path.resolve(__dirname, '../../canvas_plugin_src');
 const buildDir = path.resolve(__dirname, '../../canvas_plugin');
 
-export function getWebpackConfig({ devtool, watch } = {}) {
+export function getWebpackConfig({ devtool, watch, production } = {}) {
   return {
     watch,
     devtool,
-
-    mode: 'none',
+    mode: production ? 'production' : 'none',
     entry: {
       'elements/all': path.join(sourceDir, 'elements/register.js'),
       'renderers/all': path.join(sourceDir, 'renderers/register.js'),
@@ -94,6 +94,16 @@ export function getWebpackConfig({ devtool, watch } = {}) {
           ignore: '**/__tests__/**',
         },
       ]),
+      function canvasStatsGenerator() {
+        if (!process.env.CANVAS_GENERATE_STATS) {
+          return;
+        }
+
+        this.hooks.done.tap('canvas_stats', stats => {
+          const content = JSON.stringify(stats.toJson());
+          writeFileSync(path.resolve(__dirname, '../../webpack_stats.json'), content);
+        });
+      },
     ],
 
     module: {

x-pack/plugins/canvas/tasks/plugins.js

@@ -40,6 +40,6 @@ export default function pluginsTasks(gulp, { log, colors }) {
   });
 
   gulp.task('canvas:plugins:build-prod', function(done) {
-    del(buildDir).then(() => webpack(getWebpackConfig(), onComplete(done)));
+    del(buildDir).then(() => webpack(getWebpackConfig({ production: true }), onComplete(done)));
   });
 }