Introduce
I think you guys here have certainly heard these two terms at least once “code splitting” and “lazy loading” . Let’s take a look to see how webpack defines these terms:
Lazy, or “on demand”, loading is a great way to optimize your site or application. This practice essentially involves splitting your code at logical breakpoints, and then loading it once the user has done something that requires, or will require, a new block of code. This speeds up the initial load of the application and lightens its overall weight as some blocks may never even be loaded.
Provisional translation is
Slow loading, or “dependent loading,” is a great way to optimize your site or application. These two approaches basically involve splitting your code at logical stops, and then loading it after the user has done something that requires or will request a new block of code. This increases the initial loading speed of the application and lightens its overall weight as some blocks of code may never even be loaded.
Coding
Whenever possible I recommend using dynamic imports. Components will load in a lazy load fashion (by webpack) when needed.
1 2 3 4 5 6 | <span class="token comment">// Thay vì như này</span> <span class="token keyword">import</span> MyComponent <span class="token keyword">from</span> <span class="token string">"~/components/MyComponent.js"</span> <span class="token punctuation">;</span> <span class="token comment">// Hãy import theo cách này</span> <span class="token keyword">const</span> <span class="token function-variable function">MyComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">"~/components/MyComponent.js"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Explain
When using Webpack to package your application, you can use different ways to work with modules (ES Modules, CJS, AMD …). If you choose the ESM way (recommended), you will have this type of syntax:
1 2 | <span class="token keyword">import</span> MyComponent <span class="token keyword">from</span> <span class="token string">"~/components/MyComponent.js"</span> <span class="token punctuation">;</span> |
Use cases
Applicable circumstances
- Lazy load in component
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment">//import</span> Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">"AsyncCmp"</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">"./AsyncCmp"</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">//And using local registration</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token comment">// ...</span> components <span class="token punctuation">:</span> <span class="token punctuation">{</span> AsyncCmp <span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">"./AsyncCmp"</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
By importing an arrow function, Vue will load this component when requested, at that time.
If the imported component uses named export, you can use the object returned from Promise. For example with the UiAlert component
1 2 3 4 5 6 | <span class="token operator">...</span> components <span class="token punctuation">:</span> <span class="token punctuation">{</span> UiAlert <span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">'keen-ui'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> UiAlert <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=></span> UiAlert <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">...</span> |
- Lazy load in Vue router
Vue router built-in lazy loading
1 2 3 4 5 6 7 | <span class="token comment">// Instead of: import Login from './login'</span> <span class="token keyword">const</span> <span class="token function-variable function">Login</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">"./login"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> routes <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> path <span class="token punctuation">:</span> <span class="token string">"/login"</span> <span class="token punctuation">,</span> component <span class="token punctuation">:</span> Login <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
- Lazy load in Vuex module
Vuex has a registerModule method that allows us to automatically create Vuex modules. If the import returns a Promise with the parameter ES Module, we can use lazy load
1 2 3 4 5 6 7 8 9 | <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex <span class="token punctuation">.</span> Store</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">...</span> <span class="token comment">// Assume there is a "login" module we wanna load</span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">'./store/login'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> loginModule <span class="token operator">=></span> <span class="token punctuation">{</span> store <span class="token punctuation">.</span> <span class="token function">registerModule</span> <span class="token punctuation">(</span> <span class="token string">'login'</span> <span class="token punctuation">,</span> loginModule <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
Result
References
https://vuedose.tips/tips/dynamic-imports-in-vue-js-for-better-performance/
Good luck. Happy coding and peace out 