In most cases, you don’t need all the code from your Javascript bundle immediately when a user visits your website.įor example, we don’t need to spend valuable resources on loading the “My Page” area for guests that visits our website for the first time. Code splitting is just a process of splitting the app into this lazily loaded chunks. In other words - loading them only when we really need them. So how we can cut off bundle size when we still need to add new features and improve our application? The answer is easy - lazy loading and code splitting.Īs the name suggests lazy loading is a process of loading parts (chunks) of your application lazily.
Bing is a good example - 2 seconds of delay resulted in a 4.3% loss in revenue per visitor for them. In fact, according to Google, 53% of mobile users leave a page that takes longer than three seconds to load.Īs a summary, bigger bundle = fewer users, which can be directly translated to a loss of potential revenue. The longer a user has to wait, the more likely he is to leave our site. The bigger bundle, the longer it takes to download and parse for our users. Now that we know how bundling works, it becomes obvious that the bigger our project gets, the bigger the initial JavaScript bundle becomes. We can illustrate this process with below image: The bundle is essentially our entire application’s JavaScript. Output bundle is just a single (or multiple as we will see in the later parts) javascript file containing all modules from the dependency graph. Webpack is using this dependency graph to detect which files it should include in the output bundle. Now every js module that we will import in this file will become its node in the graph and every module imported in these nodes will become their nodes. Assuming we have a file called main.js specified as an entry point in our webpack config it will be a root of our dependency graph. It’s a graph that links all of our files based on imports. While bundling our assets Webpack is creating something calledĭependency graph (click here to see how it looks like). To understand while it’s crucial first we need to understand how Webpack is bundling all of our files. Most of the tips in this series will focus on making our JS bundle smaller.
#Vue download file full#
My goal is to make this series a full and complete guide on Vue apps performance. In this series, I’ll dig deep into Vue performance optimization techniques that we are using in Vue Storefront and that you can use in your Vue.js applications to make them loading instantly and perform smooth. While mobile-first approach becomes a standard and uncertain network conditions are something we should always take into consideration it’s harder and harder to keep your application loading fast.
0 kommentar(er)
