3 шаблона разделения кода для Vue.js и Webpack

Take a look at stats generated when we build this code. Each page is in its own file, but also note there’s a main bundle file called build_main.js, which contains any common code as well as the logic for asynchronously loading the other files. It will need to be loaded no matter what route the user visits.

Now let’s say I load the Contact page from the URL http://localhost:8080/#/contact. When I check the Network tab I see the following files have loaded:

Notice that the initiator of build_main.js is (index). This means that index.html requested the script, which is what we’d expect. But the initiator of build_1.js is bootstrap_a877…. This is the Weback script that is responsible for asynchronously loading files. This script is added to the build automatically when you use Webpack’s dynamic import function. The important point is that build_1.js did not block the initial page load.

2. Below the Fold

Below the «fold» is any part of the page that is not visible in the viewport when the page initially loads. You can asynchronously load this content since the user will usually take a second or two to read above the fold before they scroll down, especially on the first time they visit the site.

In this example app, I consider the fold line to be just below the masthead. So let’s include the nav bar and the masthead on the initial page load, but anything below that can be loaded afterward. I’ll now create a component called BelowFold and abstract the relevant markup into that:

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>

<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>

<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>

<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>