GALAXY TECH
Chuyên gia Công nghệ
Chủ Nhật, 19/03/2017 | 00:00 GMT+7

Các tuyến tải chậm trong ứng dụng Vue.js của bạn

Khi SPA của bạn (Ứng dụng một trang, dành cho người chưa khởi tạo) ngày càng phức tạp, kích thước của gói ứng dụng cũng vậy. Sau một thời điểm, nó trở thành một cản trở đáng kể đối với thời gian tải trang web . Rất may, vue-router hỗ trợ hệ thống tải module không đồng bộ tích hợp sẵn của webpack . Do đó, giờ đây việc tách các thành phần được định tuyến cho các tuyến ít được sử dụng hơn thành các gói được tải theo yêu cầu khi tuyến được truy cập là rất đơn giản.

Sử dụng

Giả sử cấu hình tuyến đường của bạn giống như sau:

import MainPage from './routes/MainPage.vue'
import OtherMassivePage from './routes/OtherMassivePage.vue'

const routes = [
  { path: '/main', component: MainPage },
  { path: '/other', component: OtherMassivePage }
]

Theo nghĩa đen, tất cả những gì bạn cần làm để tách OtherMassivePage và tất cả các phụ thuộc của nó (không được chia sẻ bởi bất kỳ thứ gì khác) thành một phần riêng biệt là thay thế câu lệnh nhập bằng một lệnh gọi request.ensure trông đáng sợ.

Nếu bạn reload ứng dụng của bạn , bạn sẽ nhận thấy rằng không có gì khác biệt, cho đến khi bạn kiểm tra các công cụ dành cho nhà phát triển mạng và thấy rằng có một file mới đang được tải khi bạn tải /other tuyến đường lần đầu tiên.

import MainPage from './routes/MainPage.vue'
const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')))

const routes = [
  { path: '/main', component: MainPage },
  { path: '/other', component: OtherMassivePage }
]

Vâng. Tôi biết nó trông đáng sợ, nhưng tin tôi đi, nó không tệ như lần đầu xuất hiện đâu.

Nó giống như một lời hứa cuối cùng sẽ chuyển thành thành phần được tải. Một version viết tắt của nó sẽ trông như thế này:

const OtherMassivePage = resolve => {
  // The empty array is for specifying other dependencies that need to be loaded.
  require.ensure([], () => {
    resolve(require('./routes/OtherMassivePage.vue'))
  })
}

Thật không may, bạn không thể thực sự sử dụng bất kỳ phần tóm tắt hoặc shell bọc nào để làm cho điều này ngắn hơn, vì webpack sử dụng phân tích tĩnh để phát hiện và chia nhỏ các phần. Điều tốt nhất bạn có thể làm là sử dụng những tấm lót một lớp đó để chiếm ít không gian hơn.

Kết hợp các tuyến đường

Đôi khi bạn có thể có nhiều tuyến đường hoặc thành phần mà bạn muốn trong cùng một đoạn. Để thực hiện điều này, bạn có thể chỉ cần chuyển một tham số thứ ba tới request.ensure để chỉ định tên của group để group các thành phần này lại.

// Both routes are output in the same chunk and bundle, causing that bundle to be lazy-loaded when either route is accessed.
const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')), 'big-pages')
const WeightLossPage = r => require.ensure([], () => r(require('./routes/WeightLossPage.vue')), 'big-pages')

Không giống như nhiều tác vụ khác với webpack , đây là một phương pháp đơn giản đến không ngờ để tạo ra một kết quả hữu ích đáng kinh ngạc. Tôi chắc chắn khuyên bạn nên sử dụng mẫu này nếu bạn đang làm việc trên các SPA lớn đang trở nên cồng kềnh.

Tags:

Các tin liên quan