用于VueJS和Webpack的代码分割模式

拆分单个页面应用程序的代码是提高其初始加载速度的一个很好的方法。由于用户不必一次性下载所有代码，他们将能够更快地看到页面并与页面进行交互。这将提高用户体验，特别是在移动领域，这是搜索引擎优化的一个胜利，因为谷歌惩罚加载缓慢的网站。

任何封装在单个文件组件中的东西都可以很容易地进行代码拆分，因为Webpack可以在导入模块时创建一个拆分点，而Vue很乐意异步加载组件。

我认为代码分割最困难的部分不是让它工作，而是知道在哪里和什么时候工作。我想说的是，在设计应用程序时，代码分割需要成为架构上的考虑因素。

在这篇文章中，我将介绍三种代码分割Vue.js单页应用程序的模式:

• 按页面

• 按页折叠

• 按条件

1、按页

按页分割代码是一个明显的起点。以这个简单的应用程序为例，它有三个页面:

如果我们确保每个页面都由它自己的单个文件组件表示，例如Home。vue,。vue和联系。然后，我们可以使用Webpack的动态导入函数将每个文件分割成一个单独的构建文件。然后，当用户访问另一个页面时，Webpack将异步加载请求页面的文件。

如果您正在使用vue-router，这一点实现起来很简单，因为您的页面已经需要放在单独的组件中。

routes.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
}];

查看在构建此代码时生成的统计数据。每个页面都在自己的文件中，但是还要注意有一个名为build_main的主包文件。它包含任何公共代码以及异步加载其他文件的逻辑。无论用户访问哪条路由，都需要加载它。

现在，假设我从URL http://localhost:8080/#/ Contact加载联系人页面。当我检查网络选项卡，我看到以下文件已加载:

注意build_main.js的启动程序是(index)。这意味着index.html请求脚本，这正是我们所期望的。但是build_1.js的发起者是bootstrap_a877…

这是负责异步加载文件的Webpack脚本。当您使用Webpack的动态导入函数时，此脚本将自动添加到构建中。重要的一点是build_1.js没有阻塞初始页面加载。

2、折叠以下

在“折叠”下面是页面的任何部分，当页面初始加载时，这些部分在viewport中是不可见的。您可以异步加载此内容，因为用户通常会在向下滚动之前花一两秒钟来阅读上面的内容，尤其是在他们第一次访问站点时。

在这个示例应用程序中，我认为折线就在报头下面。因此，让我们在初始页面加载时包括导航栏和报头，但之后可以加载下面的任何内容。现在我将创建一个名为BelowFold的组件，并将相关的标记抽象为:

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>

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

现在我们将看到下面的块在它自己的单独文件，当我们捆绑代码:

注意:下面的块非常小(1.36kB)，似乎不值得将其拆分。但那只是因为这是一个只有很少内容的演示应用程序。在一个真正的应用程序中，页面的大部分可能在折叠下面，因此可能有大量的代码，包括用于任何子组件的CSS和JS文件。

3.条件内容

代码分割的另一个很好的候选对象是有条件显示的任何内容。例如模式窗口、制表符、下拉菜单等。

这款应用程序有一个模式窗口，当你按下“今日注册”按钮时打开:

和之前一样，我们只是将模态代码移动到它自己的单个文件组件中:

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>

请注意，我已经v-if在模态上加了一个。布尔值show控制模态的打开/关闭，但它也会有条件地渲染模态组件本身。由于在页面加载时它是错误的，因此只有在打开模态时才会下载代码。

这很酷，因为如果用户从未打开过模态，他们就不必下载代码。唯一的缺点是它的UX成本很小:用户必须在按下按钮之后等待文件下载。

在我们再次构建之后，下面是我们现在的输出:

结论

这些是构建用于代码拆分的应用程序的三个想法。如果你运用想象力，我相信还有其他办法可以做到！

想要了解更多相关知识，可访问 前端学习网站！！