Các thành phần tải chậm với vue-cli 3, webpack & Bộ định tuyến Vue

Các SPA (Ứng dụng một trang) thường bao gồm hàng chục hoặc thậm chí hàng trăm thành phần có thể được chia thành nhiều file gói JavaScript. Mục tiêu của bài đăng này là chỉ ra một cách để thực hiện phân chia này và cách tải từng file một cách không đồng bộ, chỉ khi thành phần được yêu cầu từ một thay đổi tuyến. Hành vi không đồng bộ này được gọi là tải chậm và cho phép kích thước gói ban đầu nhỏ hơn.

Tạo dự án

Hãy bắt đầu một dự án mới và sử dụng vue-cli 3 để tạo nó theo lệnh sau:

$ vue create my-app ... Vue CLI v3.0.0-beta.9 ? Please pick a preset: Manually select features ? Check the features needed for your project:  ( ) TypeScript  ( ) Progressive Web App (PWA) Support  (*) Router  ( ) Vuex  ( ) CSS Pre-processors >(*) Linter / Formatter  ( ) Unit Testing  ( ) E2E Testing

Mẹo: Chọn group tất cả các luật cấu hình trong file package.json .

Dự án được tạo có hai chế độ xem : Home.vue và About.vue . Khi ta chạy dự án, thông qua lệnh yarn serve hoặc npm run serve , các khung nhìn được truy cập thông qua menu trên cùng, tương tự như hình sau:

Dự án mới được tạo

Hai file này, Home.vue và About.vue , được tải khi ứng dụng chạy . Đối với một dự án không tầm thường với rất nhiều thành phần, thường không khả thi để tải tất cả các file cùng một lúc. Ta cần tải các file khi chúng được yêu cầu.

Ta có thể dễ dàng triển khai tải chậm, nhờ tính năng JavaScript sắp ra mắt, nhập động , mà webpack hỗ trợ . Hiện tại, file src/router.js có mã sau:

import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue'  Vue.use(Router)  export default new Router({   routes: [     {       path: '/',       name: 'home',       component: Home     },     {       path: '/about',       name: 'about',       component: About     }   ] })

Để cài đặt tải src/router.js , ta thay đổi file src/router.js file sau:

import Vue from 'vue' import Router from 'vue-router'  Vue.use(Router)  function loadView(view) {   return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`) }  export default new Router({   routes: [     {       path: '/',       name: 'home',       component: loadView('Home')     },     {       path: '/about',       name: 'about',       component: loadView('About')     }   ] })

Dưới đây là bảng phân tích những gì ta đã thay đổi:

1- Ta đã loại bỏ các nhập tĩnh cho home và about các thành phần.

2- Ta đã tạo hàm loadview , hàm này sử dụng hàm import để nhập động một thành phần Vue.

3- Trong chức năng import , ta đã sử dụng /* webpackChunkName: "view-[request]" */ để đánh dấu tên của mỗi file sẽ được nhập động.

4- Cấu hình tuyến sử dụng phương thức loadView , truyền vào tên của thành phần.

Bằng cách này, khi ta biên dịch dự án thông qua version npm run build hoặc yarn build , ta nhận được kết quả sau:

Xây dựng ứng dụng

Lưu ý hai file đã được tạo: view-Home-vue... và view-About-vue... Chúng sẽ được tải theo yêu cầu trên server production :

Tải chậm trong hành động

Nhập động và ESLint

Tại thời điểm viết bài này, có một ESLint nhỏ do nó không thể nhận ra hàm import , tương tự như hình sau:

Lỗi ESLint

Để khắc phục, hãy mở file package.json và thêm cấu hình sau:

  "eslintConfig": {     "root": true,     "parserOptions": {"parser": "babel-eslint"},     "extends": [       "plugin:vue/essential",       "eslint:recommended"     ]   },

Tags:

Các tin liên quan