feat(analyze): apply analyzer to all targets & add webpack stats output

shuvijs · Mar 24, 2023 · e757a84 · e757a84
1 parent 8eefa7b
commit e757a84
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 26 deletions.
diff --git a/packages/service/src/bundler/config.ts b/packages/service/src/bundler/config.ts
@@ -35,15 +35,14 @@ export function createWebpackConfig(
     : paths.buildDir;
   const cacheDir = paths.cacheDir;
   const publicPath = assetPublicPath;
-  const env = config.env;
   const include = [
     paths.srcDir,
     paths.appDir,
     AppSourceRegexp,
     ...(opts.include || [])
   ];
-  const lightningCss = !!config.experimental.lightningCss;
-  const experimental = config.experimental;
+  const { env, analyze, experimental } = config;
+  const lightningCss = !!experimental.lightningCss;
   const jsConfig = getJavaScriptInfo();
   const compiler: CompilerOptions = {
     ...config.compiler,
@@ -69,7 +68,8 @@ export function createWebpackConfig(
       compiler,
       jsConfig,
       include,
-      env
+      env,
+      analyze
     });
   } else {
     chain = createBrowserWebpackChain({
@@ -84,7 +84,7 @@ export function createWebpackConfig(
       jsConfig,
       include,
       env,
-      analyze: config.analyze
+      analyze
     });
   }
 

diff --git a/packages/toolpack/src/webpack/config/base.ts b/packages/toolpack/src/webpack/config/base.ts
@@ -1,4 +1,5 @@
 import WebpackChain from 'webpack-chain';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import TerserPlugin from 'terser-webpack-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import webpack from 'webpack';
@@ -37,6 +38,7 @@ export interface BaseOptions {
   };
   lightningCss?: boolean;
   compiler?: CompilerOptions;
+  analyze?: boolean;
 }
 
 const terserOptions = {
@@ -84,6 +86,10 @@ export function getDefineEnv(env: { [x: string]: string | undefined }) {
   };
 }
 
+/** remove 'shuvi/' of the target name */
+const getSimplifiedTargetName = (targetName: string) =>
+  targetName.replace(/^shuvi\//, '');
+
 export function baseWebpackChain({
   dev,
   outputDir,
@@ -95,7 +101,8 @@ export function baseWebpackChain({
   name,
   publicPath = '/',
   env = {},
-  cacheDir
+  cacheDir,
+  analyze
 }: BaseOptions): WebpackChain {
   const config = new WebpackChain();
   config.mode(dev ? 'development' : 'production');
@@ -150,6 +157,22 @@ export function baseWebpackChain({
           : CssMinimizerPlugin.cssnanoMinify
       }
     ]);
+
+    if (analyze) {
+      const targetName = getSimplifiedTargetName(name);
+      config
+        .plugin('private/bundle-analyzer-plugin')
+        .use(BundleAnalyzerPlugin, [
+          {
+            logLevel: 'info',
+            openAnalyzer: false,
+            analyzerMode: 'static',
+            reportFilename: `../analyze/${targetName}.html`,
+            generateStatsFile: true,
+            statsFilename: `../analyze/${targetName}-stats.json`
+          }
+        ]);
+    }
   }
 
   // Support for NODE_PATH

diff --git a/packages/toolpack/src/webpack/config/browser.ts b/packages/toolpack/src/webpack/config/browser.ts
@@ -1,7 +1,6 @@
 import * as crypto from 'crypto';
 import webpack from 'webpack';
 import * as path from 'path';
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { resolve } from '@shuvi/utils/resolve';
 import { WebpackChain, baseWebpackChain, BaseOptions } from './base';
 import { withStyle } from './parts/style';
@@ -25,14 +24,8 @@ const FRAMEWORK_REACT_MODULES: {
   }
 ];
 
-export interface BrowserOptions extends BaseOptions {
-  analyze?: boolean;
-}
-
-export function createBrowserWebpackChain(
-  options: BrowserOptions
-): WebpackChain {
-  const { projectRoot, cacheDir, jsConfig, dev, publicPath, analyze } = options;
+export function createBrowserWebpackChain(options: BaseOptions): WebpackChain {
+  const { projectRoot, cacheDir, jsConfig, dev, publicPath } = options;
   const chain = baseWebpackChain(options);
   const useTypeScript = !!jsConfig?.useTypeScript;
 
@@ -172,18 +165,7 @@ export function createBrowserWebpackChain(
       maxInitialRequests: 25,
       minSize: 20000
     });
-    if (analyze) {
-      chain.plugin('private/bundle-analyzer-plugin').use(BundleAnalyzerPlugin, [
-        {
-          logLevel: 'warn',
-          openAnalyzer: false,
-          analyzerMode: 'static',
-          reportFilename: '../analyze/client.html'
-        }
-      ]);
-    }
   }
-
   // node polyfills
   chain.resolve.set('fallback', {
     buffer: resolve('buffer', {

diff --git a/test/e2e/shuvi-cli.test.ts b/test/e2e/shuvi-cli.test.ts
@@ -73,7 +73,10 @@ describe('shuvi/build', () => {
     project.clear('build');
     const { message } = await project.run('build', ['--analyze']);
     expect(project.exist('build/client/static')).toBeTruthy();
+    expect(project.exist('build/analyze/server.html')).toBeTruthy();
     expect(project.exist('build/analyze/client.html')).toBeTruthy();
+    expect(message).toMatch('Webpack Bundle Analyzer saved report');
+    expect(message).toMatch('Webpack Bundle Analyzer saved stats file');
     expect(message).toMatch('Build successfully!');
   });