Visualize size of webpack output files with an interactive zoomable treemap.
Questions tagged [webpack-bundle-analyzer]
48 questions
35
votes
4 answers
Webpack bundle analyzer "+ n Modules"
I would like to learn how my angular code is bundled and to which chunk files. Therefore I'm using "Webpack bundle analyzer". For some modules it's written in the report as: router.js + "12 Modules".
How can I determine the contents of the 12…
Omtechguy
- 3,321
- 7
- 37
- 71
21
votes
2 answers
webpack-bundle-analyzer is not working
I run below command to create stats.json:
ng build --prod --stats-json
After this I am executing below code:
webpack-bundle-analyzer dist/stats.json
once I execute it I am receiving below error in my terminal:
'webpack-bundle-analyzer' is not…
Ambuj Khanna
- 1,131
- 3
- 12
- 32
11
votes
4 answers
How to configure webpack-bundle-analyzer for react?
I'm trying configure my webpack.config for webpack-bundle-analyzer. Here how it looks.
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
And…
Yerlan Yeszhanov
- 2,149
- 12
- 37
- 67
10
votes
5 answers
Angular 6 build with --stats-json not generating stats.json file
I'm trying to generate the stats.json file for my Angular 6 application. Below things I've already tried, but the file is not getting generated at all. My system requires to have "npm run" before every angular cli command.
I've ran "npm run ng…
Jamshed
- 325
- 1
- 5
- 15
9
votes
3 answers
Webpack including its own dependencies in bundle
I am fairly new to webpack and I have a Vue project using the vue cli. While analyzing the webpack bundle (built in production mode using vue-cli-service build) using webpack-bundle-analyzer, I found that one particular file bn.js is being included…
ravi kumar
- 1,548
- 1
- 13
- 47
7
votes
1 answer
webpack-bundle-analyzer shows webpack -p does not remove development dependency react-dom.development.js
This is my webpack setup
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const SOURCE_DIR = './src';
const…
ey dee ey em
- 7,991
- 14
- 65
- 121
6
votes
2 answers
next.js bundle analyzer isn't creating pages to vew bundles
I'm trying to reduce the bundle size of my site by using https://www.npmjs.com/package/@next/bundle-analyzer
At the moment, when I run npm analyze with
"analyze": "cross-env ANALYZE=true next build",
It isn't outputting the html files with the…
LeCoda
- 538
- 7
- 36
- 79
6
votes
1 answer
Angular CLI 7 Webpack Bundle Analyzer modules concatenated
I'm running Webpack Bundle Analyzer for my Angular 7 app and it's producing output like this:
This is a known caveat when webpack.optimize.ModuleConcatenationPlugin is used per the troubleshooting section found here. They have a recommendation for…
Tom Schreck
- 5,177
- 12
- 68
- 122
5
votes
2 answers
How to get ONLY the bundle file size of a Webpack build without all the extra stuff
I need to get the bundle file size as a command output or have it written to a file.
I've considered the webpack-bundle-analyzer, but the command and JSON file output seems to be doing so much that is irrelevant for my use case.
I've also considered…
fortunee
- 3,852
- 2
- 17
- 29
4
votes
1 answer
What are the numbers in the file names in next bundle analyzer?
Just started using next bundle analyzer. I cannot understand what these random numbers are, which are being given to specific pages of the Next app.
For eg: 1883.js. What is 1883?
Tushar Shahi
- 16,452
- 1
- 18
- 39
3
votes
1 answer
next.js bundle analyzer outputs 3 pages
I've started my first project in NextJs and I'm using next and @next/bundle-analyzer - both version 12.3.1.
When I run in command line ANALYZE=true next build, I receive the following output:
info - Skipping linting
info - Checking validity of…
andreivictor
- 7,628
- 3
- 48
- 75
3
votes
1 answer
dynamic import Next.js but still see the module in bundle
I'm setting a component as dynamically callable:
index.tsx
import dynamic from "next/dynamic";
import { PhoneNumberInputProps } from "./components/PhoneNumberInput";
const PhoneNumberInput = dynamic(
() =>…
Baptiste Arnaud
- 2,522
- 3
- 25
- 55
3
votes
2 answers
How to force WebPack to use one version of module (instead of 6 different versions?)
In our project Webpack-bundle-analyzer plugin says that the bundle uses specific module (js file) 6 times.
What is the best way to make project as it used only one ( instead of multiple)? I know they might be from dependencies' depencendies, but…
T.Todua
- 53,146
- 19
- 236
- 237
3
votes
0 answers
Computing asset size from module sizes in webpack stats file
The stats.json file created by Webpack, is laid down such that, one or modules make up a chunk, and one or more chunks make up an asset.
I am trying to compute the size of the asset by summing the sizes of the modules that (make up the chunks…
tubby
- 2,074
- 3
- 33
- 55
2
votes
0 answers
Webpack bundle analyzer shows different chunk size form Chrome Netwrok tab
I'm trying to figure out next thing:
When I run webpack-bundle-analyzer locally for the prod build it shows one size (7.65MB) in gzipped mode for one of the assets:
But when I ran the production build and check Chrome's Network tab I see different…
volk
- 762
- 1
- 6
- 19