Skip to content

Commit 87fb27a

Browse files
Add and configure the webpack-bundle-analyzer plugin
Configured the `webpack-bundle-analyzer` (1) plugin to generate a "static" report with a JSON stats file stored in a newly created build directory within the project root. References: (1) https://github.com/webpack-contrib/webpack-bundle-analyzer GH-31
1 parent 187237a commit 87fb27a

File tree

1 file changed

+28
-2
lines changed

1 file changed

+28
-2
lines changed

.gatsby/onCreateWebpackConfig.js

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,37 @@
1717
*/
1818

1919
const { resolve: resolvePath } = require("path");
20+
/* eslint-disable import/no-extraneous-dependencies */
21+
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
22+
/* eslint-enable import/no-extraneous-dependencies */
2023

2124
const r = m => resolvePath(__dirname, m);
2225

26+
/**
27+
* Configuration for the `webpack-bundle-analyzer` plugin.
28+
*
29+
* @type {object}
30+
* @since 0.1.0
31+
*/
32+
const bundleAnalyzerPluginConfig = {
33+
analyzerMode: "static",
34+
generateStatsFile: true,
35+
openAnalyzer: false,
36+
reportFilename: r("../build/reports/webpack-bundle-analyzer/index.html"),
37+
statsFilename: r("../build/reports/webpack-bundle-analyzer/stats.json")
38+
};
39+
2340
/**
2441
* Implementation of the Gatsby Node `onCreateWebpackConfig` API.
2542
*
2643
* @method onCreateWebpackConfig
2744
* @param {object} actions Collection of functions provided by Gatsby used to manipulate the state of the build
28-
* process.
45+
* @param {string} stage The name of the current Gatsby build process stage.
2946
* @see https://gatsbyjs.org/docs/node-apis/#onCreateWebpackConfig
3047
* @see https://gatsbyjs.org/docs/actions/#setWebpackConfig
3148
* @since 0.1.0
3249
*/
33-
const onCreateWebpackConfig = ({ actions }) => {
50+
const onCreateWebpackConfig = ({ actions, stage }) => {
3451
actions.setWebpackConfig({
3552
resolve: {
3653
alias: {
@@ -50,6 +67,15 @@ const onCreateWebpackConfig = ({ actions }) => {
5067
}
5168
}
5269
});
70+
71+
switch (stage) {
72+
case "build-html":
73+
case "build-javascript":
74+
actions.setWebpackConfig({
75+
plugins: [new BundleAnalyzerPlugin(bundleAnalyzerPluginConfig)]
76+
});
77+
break;
78+
}
5379
};
5480

5581
module.exports = onCreateWebpackConfig;

0 commit comments

Comments
 (0)