This article will outline how to lazy load (dynamically load) VueJS Single File Components

本文将概述如何延迟加载(动态加载)VueJS单文件组件

目的(Objective)

The objective is to create components that can be loaded as needed in order to speed up page loads. When making large sites that utilize lots of components by default they are all bundled into the js/app.js file and that file can get very large.

目的是创建可以根据需要加载的组件，以加快页面加载速度。 使大型站点默认情况下使用很多组件时，它们全部捆绑到js / app.js文件中，该文件可能会变得非常大。

We will see a technique to keep the file smaller and modularize the code and import it on demand.

我们将看到一种使文件更小并使代码模块化并按需导入的技术。

We will utilize webpack.js and dynamic imports to accomplish this. Luckily it comes out-of-the-box with Laravel 7 😃

我们将利用webpack.js和动态导入来完成此任务。 幸运的是，它与Laravel 7开箱即用

This article will assume you have basic experience with Laravel 7 and Vue.js

本文假定您具有Laravel 7和Vue.js的基本经验

用例(Use Cases)

This technique allows us to load components only when they are needed. For example let’s say we have login, signup and forgot password components in our web app. We might only need those components on the home page, there would be no reason to bog down the rest of the site by loading them on every single page.

这种技术使我们仅在需要时才加载组件。 例如，假设我们在Web应用程序中具有登录，注册和忘记密码的组件。 我们可能只需要主页上的那些组件，就没有理由通过在每个页面上加载它们来陷入站点的其余部分。

Our JS imports will be smaller and our website will load faster.

我们的JS导入将更小，我们的网站将加载得更快。

新的Laravel项目 (New Laravel Project)

Let’s start with a fresh project and use Vue for the UI. (Laravel install instructions)

让我们从一个新项目开始，并将Vue用于UI。 (Laravel安装说明)

composer global require laravel/installerlaravel new vue_lazy_loadingcd vue_lazy_loadingcomposer require laravel/uiphp artisan ui vue npm install

Now we have a blank project to work with.

现在我们有一个空白项目要处理。

我们的组件 (Our Components)

Create two new components. These components will appear on different pages in the site and only appear on those pages. They are simple components that will just display their own names on the screen so we can differentiate them.

创建两个新组件。 这些组件将出现在网站的不同页面上，仅出现在那些页面上。 它们是简单的组件，它们只会在屏幕上显示自己的名称，因此我们可以区分它们。

Using the IDE of your choice under resources/js/components create two new files:

使用您选择的IDE在resources / js / components下创建两个新文件：

resources/js/components/page-1-comp.vue

资源/js/components/page-1-comp.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Page 1 Component</div>                    <div class="card-body">
                        Page 1
                    </div>
                </div>
            </div>
        </div>
    </div>
</template><script>
    export default {
        mounted() {
            console.log('Page 1 component mounted.')
        }
    }
</script>

resources/js/components/page-2-comp.vue

资源/js/components/page-2-comp.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Page 2 Component</div>                    <div class="card-body">
                        Page 2
                    </div>
                </div>
            </div>
        </div>
    </div>
</template><script>
    export default {
        mounted() {
            console.log('Page 2 component mounted.')
        }
    }
</script>

These may seem trivial but we are demonstrating the concept and these will work to show how to use what we are trying to accomplish.

这些看似微不足道，但我们正在演示这个概念，并且将努力展示如何使用我们试图实现的目标。

注册组件 (Register Components)

We register our components in resources/js/app.js, this will allow us to use them in our blade templates later.

我们将组件注册在resources / js / app.js中，这将允许我们稍后在刀片模板中使用它们。

Let’s register them the standard way and then we will update the code so we are importing them dynamically.

让我们以标准方式注册它们，然后我们将更新代码，以便我们动态导入它们。

resources/js/app.js:

资源/js/app.js：

Vue.component(
  'page-1-comp', 
  require('./components/page-1-comp.vue').default
);
Vue.component(
  'page-2-comp', 
  require('./components/page-2-comp.vue').default
);const app = new Vue({
    el: '#app',
});

我们的观点 (Our Views)

Let’s make some simple views that utilize our components.

让我们用一些简单的视图来利用我们的组件。

resources/views/page1.blade.php:

资源/视图/page1.blade.php：

<!DOCTYPE html>
<html>
    <head>
    <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>
        <div id="app">
            <page-1-comp></page-1-comp>     
        </div>
    </body>
</html>

resources/views/page2.blade.php:

资源/视图/page2.blade.php：

<!DOCTYPE html>
<html>
    <head>
    <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>
        <div id="app">
            <page-2-comp></page-2-comp>     
        </div>
    </body>
</html>

The important take away is that each one is a separate page that uses a separate component. Also, we are importing app.js in order to use our Vue components.

重要的是，每个页面都是一个使用单独组件的单独页面。 另外，我们正在导入app.js以便使用我们的Vue组件。

Update the welcome view to have links to our two pages.

更新欢迎视图，以提供指向我们两个页面的链接。

resources/views/welcome.blade.php:

资源/视图/welcome.blade.php：

<!DOCTYPE html>
<html>
    <body>
        <a href="{{ route('page1') }}">Page 1</a> <br><br>
        <a href="{{ route('page2') }}">Page 2</a>
    </body>
</html>

路线 (Routes)

Finally, let’s add the routes to our page1 and page2 Views and finish our test app.

最后，让我们将路线添加到我们的page1和page2视图中，并完成我们的测试应用程序。

routes/web.php:

路线/web.php：

Route::get('/page1', function () {
    return view('page1');
})->name('page1');Route::get('/page2', function () {
    return view('page2');
})->name('page2');

编译我们的资产 (Compile our Assets)

npm run dev

once the process is done we should see something like this:

一旦完成该过程，我们应该看到类似以下内容：

       Asset      Size   Chunks             Chunk Names
/css/app.css   178 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.41 MiB  /js/app  [emitted]  /js/app

All the code we have written for the Vue components gets compiled and stored in the app.js file (located in public/js/app.js). This is downloaded and imported into our app on every page load.

我们为Vue组件编写的所有代码均已编译并存储在app.js文件中(位于public / js / app.js中)。 每次加载页面时，都会下载并导入到我们的应用程序中。

现在，延迟加载 (Now the Lazy Loading)

Now let’s update our app.js to do the lazy loading using dynamic imports.

现在，让我们更新app.js以使用动态导入进行延迟加载。

resources/js/app.js:

资源/js/app.js：

// Vue.component(
//     'page-1-comp', 
//     require('./components/page-1-comp.vue').default
// );
// Vue.component(
//     'page-2-comp', 
//     require('./components/page-2-comp.vue').default
// );const app = new Vue({
    el: '#app',
    components: {
        'page-1-comp': () => import(
          /* webpackChunkName: "js/page1Comp" */ 
          './components/page-1-comp.vue'
        ),
        'page-2-comp': () => import(
          /* webpackChunkName: "js/page2Comp" */ 
          './components/page-2-comp.vue'
        ),
    }
});

Let’s breakdown what we have here. instead of defining our component and requiring the SFC we will use the import() method from webpack.js. Note we use the arrow function syntax () => import() because import() returns a promise to the requested component. Herein lies the secret as our component is imported, fetched and instantiated on demand.

让我们细分这里的内容。 而不是定义我们的组件并需要SFC，我们将使用webpack.js中的import()方法。 注意，我们使用箭头函数语法()=> import()，因为import()返回对所请求组件的承诺。 这是我们的组件根据需要导入，获取和实例化时的秘密所在。

Also, note the comment for webpackChunkName, this allows us to give a meaningful name to our imports. Without it our files would be named 0.js and 1.js

另外，请注意webpackChunkName的注释，这使我们可以为导入文件起一个有意义的名称。 没有它，我们的文件将被命名为0.js和1.js

That is all we have to do, we do not need to change the code on our views or update our components.

那就是我们要做的，我们不需要更改视图上的代码或更新组件。

Time to recompile:

编译时间：

npm run dev

now we see something like this:

现在我们看到这样的事情：

          Asset      Size        Chunks             Chunk Names
   /css/app.css   178 KiB       /js/app  [emitted]  /js/app
     /js/app.js  1.39 MiB       /js/app  [emitted]  /js/app
js/page1Comp.js  11.3 KiB  js/page1Comp  [emitted]  js/page1Comp
js/page2Comp.js  11.3 KiB  js/page2Comp  [emitted]  js/page2Comp

Our components have been split up into their own JS files and we can see that app.js is smaller than before. These are trivial sizes for our test components but Vue Single File Components can get large quickly as they can store the template, CSS and Script all in one file.

我们的组件已被拆分成自己的JS文件，我们可以看到app.js比以前更小。 这些对于我们的测试组件来说是微不足道的大小，但是Vue单个文件组件可以Swift变大，因为它们可以将模板，CSS和脚本全部存储在一个文件中。

启动应用程序 (Fire up the app)

php artisan serve

Our app will be running on localhost (ex: http://127.0.0.1:8000/). If we go there we can see our ugly UI, but it works for our needs.

我们的应用程序将在localhost(例如： http : //127.0.0.1 : 8000/ )上运行。 如果我们去那里，我们可以看到丑陋的用户界面，但是它可以满足我们的需求。

The magic happens when we go to page 1 or page 2.

当我们转到第1页或第2页时，魔术发生了。

Page 1:

第1页：

Page 2:

第2页：

As we can see each page only loads the component that is being used on that page.

如我们所见，每个页面仅加载该页面上正在使用的组件。

That is it. We now have lazy loading components that make our app faster by only loading the portions that are needed.

这就对了。 现在，我们有了延迟加载组件，通过仅加载需要的部分，可以使我们的应用程序更快。

注意 (Note)

This technique can also be used in your vue-router for SPAs.

此技术也可以在SPA的Vue路由器中使用。

const routes = [
  { 
    path: '/page1', 
    component: {
        'page-1-comp': () => import(
          /* webpackChunkName: "js/page1Comp" */ 
          './components/page-1-comp.vue'
        ) 
    }
  },
  { 
    path: '/page2', 
    component: {
        'page-2-comp': () => import(
          /* webpackChunkName: "js/page2Comp" */ 
          './components/page-2-comp.vue'
        ) 
    }
  },
]

The code for this project is located at https://github.com/srajpal/laravel-lazy-loading-vue-components.

该项目的代码位于https://github.com/srajpal/laravel-lazy-loading-vue-components 。