Helpex - Trao đổi & giúp đỡ Đăng nhập

3 mẫu tách mã cho Vue.js và Webpack

tách mã một ứng dụng trang là một cách tuyệt vời để cải thiện tốc độ tải ban đầu của nó. vì người dùng không phải tải xuống tất cả mã trong một lần truy cập, họ sẽ có thể xem và tương tác với trang sớm hơn. điều này sẽ cải thiện ux, đặc biệt là trên thiết bị di động và đó là một chiến thắng cho seo, vì google phạt các trang web tải chậm.

tuần trước tôi đã viết về cách tách mã một ứng dụng vue.js với webpack . câu chuyện ngắn, bất cứ thứ gì bạn gói gọn trong một thành phần tệp đều có thể dễ dàng bị tách mã, vì webpack có thể tạo ra một điểm phân tách khi nó nhập một mô-đun và vue rất vui khi tải một thành phần không đồng bộ.

tôi tin rằng phần khó nhất của việc tách mã không phải là làm cho nó hoạt động, mà là biết làm ở đâu khi nào. Tôi muốn nói rằng việc tách mã cần phải được xem xét về mặt kiến ​​trúc khi thiết kế ứng dụng của bạn.

trong bài viết này, tôi sẽ trình bày ba mẫu để tách mã một ứng dụng trang đơn vue.js:

  • theo trang
  • theo trang gấp
  • theo điều kiện

3 mẫu tách mã cho Vue.js và Webpack

1. theo trang

tách mã của bạn theo trang là một nơi rõ ràng để bắt đầu. lấy ứng dụng đơn giản này, có ba trang:

3 mẫu tách mã cho Vue.js và Webpack

nếu chúng tôi đảm bảo mỗi trang được đại diện bởi thành phần tập tin duy nhất của riêng mình, ví dụ home.vue , about.vue contact.vue , sau đó chúng ta có thể sử dụng động webpack của import chức năng để chia mỗi thành một file xây dựng riêng biệt. sau đó, khi người dùng truy cập một trang khác, webpack sẽ tải không đồng bộ tệp của trang được yêu cầu.

điều này là nhỏ để triển khai nếu bạn đang sử dụng vue-router , vì các trang của bạn sẽ cần phải nằm trong các thành phần riêng biệt.

route.js

const home = () => import(/* webpackchunkname: "home" */ './home.vue');
const about = () => import(/* webpackchunkname: "about" */ './about.vue');
const contact = () => import(/* webpackchunkname: "contact" */ './contact.vue');

const routes = [
  { path: '/', name: 'home', component: home },
  { path: '/about', name: 'about', component: about },
  { path: '/contact', name: 'contact', component: contact }
];

hãy xem số liệu thống kê được tạo ra khi chúng tôi tạo mã này. mỗi trang nằm trong tệp riêng của nó, nhưng cũng lưu ý rằng có một tệp gói chính được gọi là build_main.js , chứa bất kỳ mã chung nào cũng như logic để tải không đồng bộ các tệp khác. nó sẽ cần được tải bất kể người dùng truy cập tuyến đường nào.

3 mẫu tách mã cho Vue.js và Webpack

bây giờ giả sử tôi tải trang liên hệ từ url http: // localhost: 8080 / # / contact . khi tôi kiểm tra tab mạng, tôi thấy các tệp sau đã được tải:

3 mẫu tách mã cho Vue.js và Webpack

lưu ý rằng trình khởi tạo của build_main.js (chỉ mục) . điều này có nghĩa là index.html đã yêu cầu tập lệnh, đó là những gì chúng tôi mong đợi. nhưng người khởi xướng của build_1.js bootstrap_a877 ... . đây là tập lệnh weback chịu trách nhiệm tải các tệp không đồng bộ. tập lệnh này được tự động thêm vào bản dựng khi bạn sử dụng chức năng nhập động của webpack . điểm quan trọng là build_1.js không chặn tải trang ban đầu.

2. dưới màn hình đầu tiên

bên dưới "màn hình đầu tiên" là bất kỳ phần nào của trang không hiển thị trong chế độ xem khi trang tải ban đầu. bạn không đồng bộ có thể tải nội dung này kể từ khi người dùng thường sẽ mất một hoặc hai giây để đọc trên các gấp trước khi họ di chuyển xuống, đặc biệt là vào thời gian đầu tiên họ truy cập vào trang web.

3 mẫu tách mã cho Vue.js và Webpack

trong ứng dụng ví dụ này, tôi coi đường gấp nằm ngay dưới quảng cáo tiêu đề. vì vậy, hãy bao gồm thanh điều hướng và tiêu đề khi tải trang đầu tiên, nhưng bất kỳ thứ gì bên dưới có thể được tải sau đó. bây giờ tôi sẽ tạo một thành phần được gọi là dưới đây và tóm tắt đánh dấu có liên quan vào đó:

home.vue

<template>
  <div>
    <div class="jumbotron">
        <h1>jumbotron heading</h1>
        ...
    </div>

    <below-fold></below-fold>

    <!--all the code below here has been put into-->
    <!--into the above component-->
    <!--<div class="row marketing">
      <div class="col-lg-6">
        <h4>subheading</h4>
        <p>donec id elit non mi porta gravida at eget metus. maecenas faucibus mollis interdum.</p>
        ...
      </div>
      ...
    </div>-->

  </div>
</template>
<script>

  const belowfold = () => import(
    /* webpackchunkname: "below-fold" */ './belowfold.vue'
  );

  export default {
    ...
    components: {
        belowfold
    }
  }
</script>

underfold.vue

<template>
  <div class="row marketing">
    <div class="col-lg-6">
      <h4>subheading</h4>
      <p>donec id elit non mi porta gravida at eget metus. maecenas faucibus mollis interdum.</p>
      ...
    </div>
    ...
  </div>
</template>

bây giờ chúng ta sẽ thấy đoạn dưới màn hình đầu tiên trong tệp riêng biệt của chính nó khi chúng ta nhóm mã:

3 mẫu tách mã cho Vue.js và Webpack

lưu ý: phần dưới màn hình đầu tiên rất nhỏ (1,36kb) và có vẻ như không đáng bận tâm khi tách phần này ra. nhưng đó chỉ là vì đây là một ứng dụng demo với rất ít nội dung. trong một ứng dụng thực, phần lớn trang có khả năng nằm dưới màn hình đầu tiên, vì vậy có thể có rất nhiều mã ở đó bao gồm các tệp css và js cho bất kỳ thành phần phụ nào.

3. nội dung điều kiện

một ứng cử viên tốt khác để tách mã là bất kỳ thứ gì được hiển thị có điều kiện . ví dụ, một cửa sổ phương thức, các tab, menu thả xuống, v.v.

ứng dụng này có một cửa sổ phương thức mở ra khi bạn nhấn nút "đăng ký ngay hôm nay":

3 mẫu tách mã cho Vue.js và Webpack

như trước đây, chúng tôi chỉ di chuyển mã phương thức vào thành phần tệp duy nhất của riêng nó:

home.vue

<template>
  <div>
    <div class="jumbotron">...</div>

    <below-fold></below-fold>

    <home-modal v-if="show" :show="show"></home-modal>
  </div>
</template>
<script>

  const belowfold = () => import(
    /* webpackchunkname: "below-fold" */ './belowfold.vue'
  );
  const homemodal = () => import(
    /* webpackchunkname: "modal" */ './homemodal.vue'
  );

  export default {
    data() {
      return {
        show: false
      }
    },
    components: {
      homemodal,
      belowfold
    }
  }
</script>

homemodal.vue

<template>
    <modal v-model="show" effect="fade">...</modal>
</template>
<script>
  import modal from 'vue-strap/src/modal.vue';

  export default {
    props: ['show'],
    components: {
        modal
    }
  }
</script>

lưu ý rằng tôi đã đặt một v-if phương thức. boolean show kiểm soát việc mở / đóng của phương thức, nhưng nó cũng sẽ hiển thị có điều kiện chính thành phần phương thức đó. vì khi tải trang, mã này là sai, mã sẽ chỉ được tải xuống khi phương thức được mở.

điều này thật tuyệt vì nếu người dùng không bao giờ mở phương thức, họ sẽ không bao giờ phải tải xuống mã. nhược điểm duy nhất là nó có chi phí ux nhỏ: người dùng phải đợi sau khi họ nhấn nút để tải tệp xuống.

sau khi chúng tôi xây dựng lại, đây là kết quả đầu ra của chúng tôi bây giờ:

3 mẫu tách mã cho Vue.js và Webpack

~ 5kb khác, chúng tôi không phải tải lên phía trước.

phần kết luận

đó là ba ý tưởng để tạo kiến ​​trúc một ứng dụng để tách mã. Tôi chắc rằng có nhiều cách khác để làm điều đó nếu bạn sử dụng trí tưởng tượng của mình!

16 hữu ích 0 bình luận 12k xem chia sẻ

Có thể bạn quan tâm

loading