0

I was recently analyzing any application made with Vue.

enter image description here

The bundle generates a 3.6MB file and this application in question loads very quickly.

My question is: why does "936 kb transferred over network" appear there? Where was the rest of the 3.6MB loaded? Is that why the page loads so fast?

In comparison to my Vue application:

enter image description here

Here it appears as the entire file uploaded over the network, which means that my browser had to download the entire 5.4 MB

1 Answer 1

1

Probably you have some heavy third-party library in your bundle. You can analyze with "webpack-bundle-analyzer"

Step 1: Add webpack-bundle-analyzer to your devDependencies

npm install --save-dev webpack-bundle-analyzer

Step 2: Add this plugin to your webpack config

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

Step 3: You can analyze your bundle after each build

enter image description here

Step 4: Optimize your bundle. There are several ways, for example load some dependencies with lazy loading or change the way you load the libraries from complete to "À la carte". There are several blogs / Tutorials that explain how to handle this.

1
  • Thanks for the answer bro! I already have the webpack analyzer installed and I'm already working on reducing the size of the bundle. My main question here is why in the case of this other application my browser only needed to download 936kb of the file ... where did the rest come from?
    – Tom Lima
    Commented Jul 3, 2020 at 22:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.