Giới thiệu
Mình nghĩ các bạn ở đây chắc chắn đã nghe hai thuật ngữ này ít nhất một lần “code splitting” và “lazy loading”. Hãy cùng ngó qua để xem webpack định nghĩa các thuật ngữ này như thế nào:
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.
Tạm dịch là
Tải chậm, hay “tải phụ thuộc”, là một cách tuyệt vời để tối ưu hóa trang web hoặc ứng dụng của bạn. Hai phuong pháp này về cơ bản liên quan đến việc chia code của bạn tại các điểm dừng logic, và sau đó tải nó sau khi người dùng đã thực hiện một cái gì đó yêu cầu hoặc sẽ yêu cầu một khối code mới. Điều này làm tăng tốc độ tải ban đầu của ứng dụng và làm nhẹ trọng lượng tổng thể của nó vì một số khối code thậm chí có thể không bao giờ được tải.
Coding
Bất cứ khi nào có thể mình khuyên các bạn nên sử dụng dynamic imports. Component sẽ tải theo kiểu lazy load (bởi webpack) khi cần thiết.
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> |
Giải thích
Khi sử dụng Webpack để đóng gói ứng dụng của bạn, bạn có thể sử dụng các cách khác nhau để làm việc với các module (ES Modules, CJS, AMD…). Nếu bạn chọn cách ESM (được khuyến nghị), bạn sẽ có loại cú pháp này:
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
Các trường hợp có thể áp dụng
- Lazy load trong 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> |
Bằng cách đưa import vào arrow function, Vue sẽ load component này khi được yêu cầu, vào thời điểm đó.
Nếu component được import có sử dụng named export, bạn có thể sử dụng object trả về từ Promise. Ví dụ với component UiAlert
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 trong Vue router
Vue router được tích hợp sẵn 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 trong Vuex module
Vuex có một phương thức registerModule cho phép chúng ta tự động tạo các module Vuex. Nếu import trả về một Promise với tham số là ES Module thì chúng ta có thể dùng 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> |
Kết quả
Tài liệu tham khảo
https://vuedose.tips/tips/dynamic-imports-in-vue-js-for-better-performance/
Chúc các bạn thành công. Happy coding and peace out 