Chore: Add Webpack bundle visualizer (#188)

Visualizer runs on production build and outputs to reports/ folder
box · Jun 28, 2017 · 8fa744e · 8fa744e
1 parent 5f82f15
commit 8fa744e
Show file tree

Hide file tree

Showing 4 changed files with 245 additions and 52 deletions.
diff --git a/build/webpack.config.js b/build/webpack.config.js
@@ -9,6 +9,8 @@ const RsyncPlugin = require('./RsyncPlugin');
 const UglifyJsPlugin = require('webpack').optimize.UglifyJsPlugin;
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const BannerPlugin = require('webpack').BannerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+    .BundleAnalyzerPlugin;
 const version = isRelease ? require('../package.json').version : 'dev';
 const fs = require('fs');
 
@@ -24,38 +26,40 @@ const lib = path.resolve('src/lib');
 const thirdParty = path.resolve('src/third-party');
 const staticFolder = path.resolve('dist');
 
-const languages = isRelease ? [
-    'en-AU',
-    'en-CA',
-    'en-GB',
-    'en-US',
-    'da-DK',
-    'de-DE',
-    'es-ES',
-    'fi-FI',
-    'fr-CA',
-    'fr-FR',
-    'it-IT',
-    'ja-JP',
-    'ko-KR',
-    'nb-NO',
-    'nl-NL',
-    'pl-PL',
-    'pt-BR',
-    'ru-RU',
-    'sv-SE',
-    'tr-TR',
-    'zh-CN',
-    'zh-TW'
-] : ['en-US']; // Only 1 language needed for dev
+const languages = isRelease
+    ? [
+        'en-AU',
+        'en-CA',
+        'en-GB',
+        'en-US',
+        'da-DK',
+        'de-DE',
+        'es-ES',
+        'fi-FI',
+        'fr-CA',
+        'fr-FR',
+        'it-IT',
+        'ja-JP',
+        'ko-KR',
+        'nb-NO',
+        'nl-NL',
+        'pl-PL',
+        'pt-BR',
+        'ru-RU',
+        'sv-SE',
+        'tr-TR',
+        'zh-CN',
+        'zh-TW'
+    ]
+    : ['en-US']; // Only 1 language needed for dev
 
-/* eslint-disable key-spacing */
+/* eslint-disable key-spacing, require-jsdoc */
 function updateConfig(conf, language, index) {
     const config = Object.assign(conf, {
         entry: {
-            preview:        [`${lib}/Preview.js`],
-            csv:            [`${lib}/viewers/text/BoxCSV.js`],
-            annotations:    [`${lib}/annotations/BoxAnnotations.js`]
+            preview: [`${lib}/Preview.js`],
+            csv: [`${lib}/viewers/text/BoxCSV.js`],
+            annotations: [`${lib}/annotations/BoxAnnotations.js`]
         },
         output: {
             path: path.resolve('dist', version, language),
@@ -66,6 +70,18 @@ function updateConfig(conf, language, index) {
     // Copy over image and 3rd party
     if (index === 0) {
         config.plugins.push(new RsyncPlugin(thirdParty, staticFolder));
+
+        if (isRelease) {
+            config.plugins.push(
+                new BundleAnalyzerPlugin({
+                    analyzerMode: 'static',
+                    openAnalyzer: false,
+                    reportFilename: '../../../reports/webpack-stats.html',
+                    generateStatsFile: true,
+                    statsFilename: '../../../reports/webpack-stats.json'
+                })
+            );
+        }
     }
 
     if (isDev) {
@@ -80,28 +96,40 @@ function updateConfig(conf, language, index) {
 
     if (isRelease) {
         // http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
-        config.plugins.push(new UglifyJsPlugin({
-            compress: {
-                warnings: false, // Don't output warnings
-                drop_console: true // Drop console statements
-            },
-            comments: false, // Remove comments
-            sourceMap: false
-        }));
+        config.plugins.push(
+            new UglifyJsPlugin({
+                compress: {
+                    warnings: false, // Don't output warnings
+                    drop_console: true // Drop console statements
+                },
+                comments: false, // Remove comments
+                sourceMap: false
+            })
+        );
 
         // Optimize CSS - minimize, remove comments and duplicate rules
-        config.plugins.push(new OptimizeCssAssetsPlugin({
-            cssProcessorOptions: {
-                safe: true
-            }
-        }));
+        config.plugins.push(
+            new OptimizeCssAssetsPlugin({
+                cssProcessorOptions: {
+                    safe: true
+                }
+            })
+        );
 
         // Add license message to top of code
-        config.plugins.push(new BannerPlugin('Box Content Preview UI Kit | Copyright 2016-2017 Box | Licenses: https://cloud.box.com/v/preview-licenses-v1'));
+        config.plugins.push(
+            new BannerPlugin(
+                'Box Content Preview UI Kit | Copyright 2016-2017 Box | Licenses: https://cloud.box.com/v/preview-licenses-v1'
+            )
+        );
     }
 
     return config;
 }
 
-const localizedConfigs = languages.map((language, index) => updateConfig(commonConfig(language), language, index));
-module.exports = localizedConfigs.length > 1 ? localizedConfigs : localizedConfigs[0];
+const localizedConfigs = languages.map((language, index) =>
+    updateConfig(commonConfig(language), language, index)
+);
+module.exports = localizedConfigs.length > 1
+    ? localizedConfigs
+    : localizedConfigs[0];
diff --git a/package.json b/package.json
@@ -91,6 +91,7 @@
     "stylelint-config-standard": "^16.0.0",
     "stylelint-order": "^0.4.1",
     "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.8.2",
     "whatwg-fetch": "^2.0.3"
   },
   "scripts": {

diff --git a/src/lib/Preview.js b/src/lib/Preview.js
@@ -641,7 +641,7 @@ const PREVIEW_LOCATION = findScriptLocation(PREVIEW_SCRIPT_NAME, document.curren
      *
      * @private
      * @param {Object} previewOptions - Options specified by show()
-     * @param {Object} token - Map of file ID to access token
+     * @param {Object} tokenMap - Map of file ID to access token
      * @return {void}
      */
     parseOptions(previewOptions, tokenMap) {
@@ -1073,7 +1073,7 @@ const PREVIEW_LOCATION = findScriptLocation(PREVIEW_SCRIPT_NAME, document.curren
      * message.
      *
      * @private
-     * @param {Error} reason - Error
+     * @param {Error} err - Error
      * @return {void}
      */
     triggerError(err) {