webpack-bundle-size-analyzer | A tool for finding out what contributes to the size | Plugin library
kandi X-RAY | webpack-bundle-size-analyzer Summary
kandi X-RAY | webpack-bundle-size-analyzer Summary
If you minify/compress your code using the [approach recommended in the Webpack documentation] which is to use the UglifyJS plugin, be aware that this tool will report the sizes of modules before they are minified. This is because the statistics generated by webpack --json do not take account of plugins that operate on the bundle as a whole. Knowing the sizes of dependencies before they are minified can still be useful to get an idea of how much different dependencies are responsible for size of your minified bundle, but be aware that it can be misleading. This is because some libraries compress better than others. If instead you minify modules in your bundle individually using a loader (eg. [the UglifyJS loader] the stats output by webpack --json will show minified sizes. If you want to get a better idea of the sizes of different dependencies after they are minified, you can temporarily remove the UglifyJS plugin and replace it with [the UglifyJS loader] instead before running webpack --json | webpack-bundle-size-analyzer. The reason that using a plugin, rather than a loader, is the recommended approach in Webpack is that compression is better if applied to the whole bundle rather than to individual source files one at a time.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of webpack-bundle-size-analyzer
webpack-bundle-size-analyzer Key Features
webpack-bundle-size-analyzer Examples and Code Snippets
Community Discussions
Trending Discussions on webpack-bundle-size-analyzer
QUESTION
I followed this tutorial: https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react
From the beginning, my app was extremely slow to load, including when changing tabs, including when loaded through ngrok and run on localhost or deployed on app engine.
What could be causing this ?
P.S.: I am new to React, Next.js and Shopify App development, so the answer could be quite basic.
P.P.S.: The build output seems to indicate "First Load JS shared by all" is too large based on the red color. I do not know how to investigate this and reduce the size of said chunks although a mere 214KB could not explain such slow load times, could it ?
Build
React Dev Tools Profiler
@next/bundle-analyzer Output:
Parsed
Gzipped
package.json
...ANSWER
Answered 2020-Aug-15 at 16:48Your initial load on index, according your dev tools waterfall, took almost 2 seconds for only 18.5KB of data. This is alarmingly slow and prior to the rest of your resources being reached even. My first thought would be network/server lag. Are you hosting this locally or on a web server of some sort?
I would strip it down as much as you can, maybe even just try and load a simple index.html file with only a header. If that takes a couple of seconds to load then you may need to either upgrade or migrate to a better host. If you are hosting locally this could just be an issue of your internet having a low upload speed. Many internet plans have fast downloads but slow uploads and you are not always going to get what your ISP promises.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install webpack-bundle-size-analyzer
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page