feat: add --analyze flag (#1853)

* feat: add --analyze flag * fix: conlicts * tests: updates * chore: suggesion * fix: ci
webpack · Oct 6, 2020 · e6d210a · e6d210a
1 parent 2b8415a
commit e6d210a
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -131,6 +131,7 @@
     "ts-jest": "^25.5.1",
     "typescript": "^3.9.7",
     "webpack": "^4.44.2",
+    "webpack-bundle-analyzer": "^3.9.0",
     "yeoman-test": "^2.7.0"
   }
 }
diff --git a/packages/webpack-cli/README.md b/packages/webpack-cli/README.md
@@ -36,6 +36,7 @@ yarn add webpack-cli --dev
 ### webpack 4
 
 ```
+  --analyze                     It invokes webpack-bundle-analyzer plugin to get bundle information
   --entry string[]              The entry point(s) of your application.
   -c, --config string[]         Provide path to webpack configuration file(s)
   --config-name string[]        Name of the configuration to use

diff --git a/packages/webpack-cli/__tests__/resolveAdvanced.test.js b/packages/webpack-cli/__tests__/resolveAdvanced.test.js
@@ -3,24 +3,31 @@ const resolveAdvanced = require('../lib/groups/resolveAdvanced');
 const targetValues = ['web', 'webworker', 'node', 'async-node', 'node-webkit', 'electron-main', 'electron-renderer', 'electron-preload'];
 
 describe('advanced options', function () {
-    it('should load the HMR plugin', () => {
-        const result = resolveAdvanced({
+    it('should load the HMR plugin', async () => {
+        const result = await resolveAdvanced({
             hot: true,
         });
         expect(result.options.plugins[0].constructor.name).toEqual('HotModuleReplacementPlugin');
     });
 
-    it('should load the prefetch plugin', () => {
-        const result = resolveAdvanced({
+    it('should load the prefetch plugin', async () => {
+        const result = await resolveAdvanced({
             prefetch: 'url',
         });
         expect(result.options.plugins[0].constructor.name).toEqual('PrefetchPlugin');
     });
 
+    it('should load the webpack-bundle-analyzer plugin', async () => {
+        const result = await resolveAdvanced({
+            analyze: true,
+        });
+        expect(result.options.plugins[0].constructor.name).toEqual('BundleAnalyzerPlugin');
+    });
+
     {
         targetValues.map((option) => {
-            it(`should handle ${option} option`, () => {
-                const result = resolveAdvanced({
+            it(`should handle ${option} option`, async () => {
+                const result = await resolveAdvanced({
                     target: option,
                 });
                 expect(result.options.target).toEqual(option);

diff --git a/packages/webpack-cli/lib/groups/resolveAdvanced.js b/packages/webpack-cli/lib/groups/resolveAdvanced.js
@@ -1,9 +1,13 @@
+const { packageExists, promptInstallation } = require('@webpack-cli/package-utils');
+const { yellow } = require('colorette');
+const { error, info } = require('../utils/logger');
+
 /**
  * Resolve advanced flags
  * @param {args} args - Parsed args passed to CLI
  */
-const resolveAdvanced = (args) => {
-    const { target, prefetch, hot } = args;
+const resolveAdvanced = async (args) => {
+    const { target, prefetch, hot, analyze } = args;
 
     const finalOptions = {
         options: {},
@@ -28,6 +32,27 @@ const resolveAdvanced = (args) => {
             finalOptions.options.plugins = [prefetchVal];
         }
     }
+    if (analyze) {
+        if (packageExists('webpack-bundle-analyzer')) {
+            // eslint-disable-next-line node/no-extraneous-require
+            const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+            const bundleAnalyzerVal = new BundleAnalyzerPlugin();
+            if (finalOptions.options && finalOptions.options.plugins) {
+                finalOptions.options.plugins.unshift(bundleAnalyzerVal);
+            } else {
+                finalOptions.options.plugins = [bundleAnalyzerVal];
+            }
+        } else {
+            await promptInstallation('webpack-bundle-analyzer', () => {
+                error(`It looks like ${yellow('webpack-bundle-analyzer')} is not installed.`);
+            })
+                .then(() => info(`${yellow('webpack-bundle-analyzer')} was installed sucessfully.`))
+                .catch(() => {
+                    error(`Action Interrupted, Please try once again or install ${yellow('webpack-bundle-analyzer')} manually.`);
+                    process.exit(2);
+                });
+        }
+    }
     if (target) {
         finalOptions.options.target = args.target;
     }

diff --git a/packages/webpack-cli/lib/utils/cli-flags.js b/packages/webpack-cli/lib/utils/cli-flags.js
@@ -222,12 +222,13 @@ const core = [
         multiple: true,
         description: 'Name of the configuration to use',
     },
-    /* 		{
-        name: "analyze",
+    {
+        name: 'analyze',
+        usage: '--analyze',
         type: Boolean,
-        group: BASIC_GROUP,
-        description: "analyze build for performance improvements"
-    }, */
+        multiple: false,
+        description: 'It invokes webpack-bundle-analyzer plugin to get bundle information',
+    },
     /* 		{
         name: "interactive",
         type: Boolean,

diff --git a/packages/webpack-cli/package.json b/packages/webpack-cli/package.json
@@ -23,9 +23,9 @@
     "web"
   ],
   "dependencies": {
-    "@webpack-cli/package-utils": "^1.0.1-rc.0",
     "@webpack-cli/info": "^1.0.1-rc.0",
     "@webpack-cli/init": "^1.0.1-rc.0",
+    "@webpack-cli/package-utils": "^1.0.1-rc.0",
     "@webpack-cli/serve": "^1.0.1-rc.0",
     "ansi-escapes": "^4.3.1",
     "colorette": "^1.2.1",
@@ -42,5 +42,10 @@
   "peerDependencies": {
     "webpack": "4.x.x || 5.x.x"
   },
+  "peerDependenciesMeta": {
+    "webpack-bundle-analyzer": {
+      "optional": true
+    }
+  },
   "gitHead": "fb50f766851f500ca12867a2aa9de81fa6e368f9"
 }
diff --git a/test/analyze/analyze-flag.test.js b/test/analyze/analyze-flag.test.js
@@ -0,0 +1,25 @@
+'use strict';
+
+const { runWatch, isWindows } = require('../utils/test-utils');
+
+describe('--analyze flag', () => {
+    // TODO: fix timeout for windows CI
+    if (isWindows) {
+        it('TODO: Fix on windows', () => {
+            expect(true).toBe(true);
+        });
+        return;
+    }
+    it('should load webpack-bundle-analyzer plugin with --analyze flag', async () => {
+        const { stderr, stdout } = await runWatch({
+            testCase: __dirname,
+            args: ['--analyze'],
+            setOutput: true,
+            outputKillStr: 'main',
+        });
+
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain('BundleAnalyzerPlugin');
+        expect(stdout).toContain('Webpack Bundle Analyzer is started at http://127.0.0.1:8888');
+    });
+});
diff --git a/test/analyze/main.js b/test/analyze/main.js
@@ -0,0 +1 @@
+console.log('webpack-bundle-analyzer is installed');
diff --git a/test/analyze/webpack.config.js b/test/analyze/webpack.config.js
@@ -0,0 +1,7 @@
+const WebpackCLITestPlugin = require('../utils/webpack-cli-test-plugin');
+
+module.exports = {
+    mode: 'development',
+    entry: './main.js',
+    plugins: [new WebpackCLITestPlugin(['plugins'], false)],
+};
diff --git a/test/utils/test-utils.js b/test/utils/test-utils.js
@@ -244,6 +244,8 @@ const hyphenToUpperCase = (name) => {
     });
 };
 
+const isWindows = process.platform === 'win32';
+
 module.exports = {
     run,
     runWatch,
@@ -256,4 +258,5 @@ module.exports = {
     runInfo,
     hyphenToUpperCase,
     isWebpack5,
+    isWindows,
 };
diff --git a/yarn.lock b/yarn.lock
@@ -2907,6 +2907,11 @@ acorn-walk@^6.0.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
   integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
 
+acorn-walk@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
 acorn@^6.0.1, acorn@^6.4.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
@@ -3437,6 +3442,16 @@ before-after-hook@^2.0.0:
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.1.0.tgz#b6c03487f44e24200dd30ca5e6a1979c5d2fb635"
   integrity sha512-IWIbu7pMqyw3EAJHzzHbWa85b6oud/yfKYg5rqB5hNE8CeMi3nX+2C2sj0HswfblST86hpVEOAb9x34NZd6P7A==
 
+bfj@^6.1.1:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/bfj/-/bfj-6.1.2.tgz#325c861a822bcb358a41c78a33b8e6e2086dde7f"
+  integrity sha512-BmBJa4Lip6BPRINSZ0BPEIfB1wUY/9rwbwvIHQA1KjX9om29B6id0wnWXq7m3bn5JrUVjeOTnVuhPT1FiHwPGw==
+  dependencies:
+    bluebird "^3.5.5"
+    check-types "^8.0.3"
+    hoopy "^0.1.4"
+    tryer "^1.0.1"
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -3914,6 +3929,11 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+check-types@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
+  integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
+
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -4216,7 +4236,7 @@ command-line-usage@^6.1.0:
     table-layout "^1.0.0"
     typical "^5.2.0"
 
-commander@^2.20.0, commander@~2.20.3:
+commander@^2.18.0, commander@^2.20.0, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -5735,7 +5755,7 @@ expect@^25.5.0:
     jest-message-util "^25.5.0"
     jest-regex-util "^25.2.6"
 
-express@^4.17.1:
+express@^4.16.3, express@^4.17.1:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
   integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
@@ -5942,6 +5962,11 @@ filelist@^1.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+filesize@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+  integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
+
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
@@ -6600,6 +6625,14 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
+gzip-size@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
+  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
+  dependencies:
+    duplexer "^0.1.1"
+    pify "^4.0.1"
+
 handle-thing@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
@@ -6756,6 +6789,11 @@ homedir-polyfill@^1.0.1:
   dependencies:
     parse-passwd "^1.0.0"
 
+hoopy@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
+  integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
+
 hosted-git-info@^2.1.4, hosted-git-info@^2.7.1:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
@@ -9633,6 +9671,11 @@ opencollective-postinstall@^2.0.2:
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
   integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
 
+opener@^1.5.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
+
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
@@ -12146,6 +12189,11 @@ trim-off-newlines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
   integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM=
 
+tryer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
+  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
+
 ts-jest@^25.5.1:
   version "25.5.1"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-25.5.1.tgz#2913afd08f28385d54f2f4e828be4d261f4337c7"
@@ -12610,6 +12658,25 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webpack-bundle-analyzer@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.9.0.tgz#f6f94db108fb574e415ad313de41a2707d33ef3c"
+  integrity sha512-Ob8amZfCm3rMB1ScjQVlbYYUEJyEjdEtQ92jqiFUYt5VkEeO2v5UMbv49P/gnmCZm3A6yaFQzCBvpZqN4MUsdA==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
+    bfj "^6.1.1"
+    chalk "^2.4.1"
+    commander "^2.18.0"
+    ejs "^2.6.1"
+    express "^4.16.3"
+    filesize "^3.6.1"
+    gzip-size "^5.0.0"
+    lodash "^4.17.19"
+    mkdirp "^0.5.1"
+    opener "^1.5.1"
+    ws "^6.0.0"
+
 webpack-dev-middleware@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
@@ -12921,7 +12988,7 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^6.2.1:
+ws@^6.0.0, ws@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
   integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		console.log('webpack-bundle-analyzer is installed');