feat(build): webpack visualizer (#29875)

This commit is contained in:
Evan Rusackas 2024-08-07 10:21:22 -06:00 committed by GitHub
parent c220245414
commit 9b95accf6b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 858 additions and 283 deletions

1
.gitignore vendored
View File

@ -121,3 +121,4 @@ docker/*local*
# Jest test report # Jest test report
test-report.html test-report.html
superset/static/stats/statistics.html

File diff suppressed because it is too large Load Diff

View File

@ -38,11 +38,12 @@
], ],
"scripts": { "scripts": {
"_prettier": "prettier './({src,spec,cypress-base,plugins,packages,.storybook}/**/*{.js,.jsx,.ts,.tsx,.css,.less,.scss,.sass}|package.json)'", "_prettier": "prettier './({src,spec,cypress-base,plugins,packages,.storybook}/**/*{.js,.jsx,.ts,.tsx,.css,.less,.scss,.sass}|package.json)'",
"build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production BABEL_ENV=\"${BABEL_ENV:=production}\" webpack --mode=production --color", "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production BABEL_ENV=\"${BABEL_ENV:=production}\" webpack --color --mode production",
"build-dev": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=development webpack --mode=development --color", "build-dev": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=development webpack --mode=development --color",
"build-instrumented": "cross-env NODE_ENV=production BABEL_ENV=instrumented webpack --mode=production --color", "build-instrumented": "cross-env NODE_ENV=production BABEL_ENV=instrumented webpack --mode=production --color",
"build-storybook": "storybook build", "build-storybook": "storybook build",
"build-translation": "scripts/po2json.sh", "build-translation": "scripts/po2json.sh",
"bundle-stats": "cross-env BUNDLE_ANALYZER=true npm run build && npx open-cli ../superset/static/stats/statistics.html",
"core:cover": "cross-env NODE_ENV=test jest --coverage --coverageThreshold='{\"global\":{\"statements\":100,\"branches\":100,\"functions\":100,\"lines\":100}}' --collectCoverageFrom='[\"packages/**/src/**/*.{js,ts}\", \"!packages/superset-ui-demo/**/*\"]' packages", "core:cover": "cross-env NODE_ENV=test jest --coverage --coverageThreshold='{\"global\":{\"statements\":100,\"branches\":100,\"functions\":100,\"lines\":100}}' --collectCoverageFrom='[\"packages/**/src/**/*.{js,ts}\", \"!packages/superset-ui-demo/**/*\"]' packages",
"cover": "cross-env NODE_ENV=test jest --coverage", "cover": "cross-env NODE_ENV=test jest --coverage",
"dev": "webpack --mode=development --color --watch", "dev": "webpack --mode=development --color --watch",
@ -329,6 +330,7 @@
"mock-socket": "^9.3.1", "mock-socket": "^9.3.1",
"moment-locales-webpack-plugin": "^1.2.0", "moment-locales-webpack-plugin": "^1.2.0",
"node-fetch": "^2.6.7", "node-fetch": "^2.6.7",
"open-cli": "^8.0.0",
"po2json": "^0.4.5", "po2json": "^0.4.5",
"prettier": "3.3.3", "prettier": "3.3.3",
"prettier-plugin-packagejson": "^2.4.10", "prettier-plugin-packagejson": "^2.4.10",
@ -352,6 +354,7 @@
"webpack-dev-server": "^4.15.1", "webpack-dev-server": "^4.15.1",
"webpack-manifest-plugin": "^4.1.1", "webpack-manifest-plugin": "^4.1.1",
"webpack-sources": "^3.2.3", "webpack-sources": "^3.2.3",
"webpack-visualizer-plugin2": "^1.1.0",
"xdm": "^3.4.0" "xdm": "^3.4.0"
}, },
"engines": { "engines": {

View File

@ -33,6 +33,7 @@ const {
} = require('webpack-manifest-plugin'); } = require('webpack-manifest-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const parsedArgs = require('yargs').argv; const parsedArgs = require('yargs').argv;
const Visualizer = require('webpack-visualizer-plugin2');
const getProxyConfig = require('./webpack.proxy-config'); const getProxyConfig = require('./webpack.proxy-config');
const packageConfig = require('./package'); const packageConfig = require('./package');
@ -66,8 +67,6 @@ const {
mode = 'development', mode = 'development',
devserverPort = 9000, devserverPort = 9000,
measure = false, measure = false,
analyzeBundle = false,
analyzerPort = 8888,
nameChunks = false, nameChunks = false,
} = parsedArgs; } = parsedArgs;
const isDevMode = mode !== 'production'; const isDevMode = mode !== 'production';
@ -586,11 +585,19 @@ if (isDevMode) {
}; };
} }
// Bundle analyzer is disabled by default // To
// Pass flag --analyzeBundle=true to enable // e.g. npm run package-stats
// e.g. npm run build -- --analyzeBundle=true if (process.env.BUNDLE_ANALYZER) {
if (analyzeBundle) { config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
config.plugins.push(new BundleAnalyzerPlugin({ analyzerPort })); config.plugins.push(
// this creates an HTML page with a sunburst diagram of dependencies.
// you'll find it at superset/static/stats/statistics.html
// note that the file is >100MB so it's in .gitignore
new Visualizer({
filename: path.join('..', 'stats', 'statistics.html'),
throwOnError: true,
}),
);
} }
// Speed measurement is disabled by default // Speed measurement is disabled by default