Vue学习笔记（十六）——组件的懒加载

曾经终败给现在 2022-02-13 15:44 1183阅读 0赞

参考文档一：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide]  
参考文档二：[https://www.cnblogs.com/zhanyishu/p/6587571.html][https_www.cnblogs.com_zhanyishu_p_6587571.html]

懒加载实质是让页面非必须资源延迟加载，减少页面加载用时，从而达到页面性能优化的目的。

在vue工程中，通常会在以下两个场景应用懒加载：  
1.路由依赖组件的懒加载：  
路由声明的懒加载组件以及该组件依赖的其他组件会打包成独立的chunk块在访问该路由时加载；

2.组件依赖组件的懒加载：  
组件声明依赖的懒加载组件以及懒加载组件依赖的其他组件会打包成独立的chunk块在组件实例化时加载。

不论哪个应用场景都是通过以下方式来声明懒加载的资源：

resolve => require(['资源路径'], resolve)

下面上示例代码：

### package.json（如果编译出错，请先检查组件版本） ###

{ 
      "name": "webpack-vue",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "dev": "webpack-dev-server --open --hot",
        "build": "webpack --progress --hide-modules"
      },
      "author": "",
      "license": "ISC",
      "dependencies": { 
        "html-webpack-plugin": "^3.2.0",
        "vue": "^2.6.10",
        "vue-loader": "^15.7.0",
        "vue-router": "^3.0.6",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.34.0",
        "webpack-cli": "^3.3.4",
        "webpack-dev-server": "^3.7.1"
      }
    }

### 工程目录结构： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70]

### 工程代码 ###

#### webpack.config.js ####

'use strict';
    const path = require("path");
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    
    module.exports = { 
        entry: { 
            "main": "./src/main.js"
        },
        output: { 
            path: path.resolve(__dirname, "build"),
            filename: "[name].js"
        },
        devServer: { 
            historyApiFallback: true,
            overlay: true
        },
        resolve: { 
            alias: { 
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        module: { 
            rules: [
                { 
                    test: /\.vue$/,
                    loader: 'vue-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: 'index.html',
                inject: 'body'
            }),
            new VueLoaderPlugin()
        ]
    };

#### index.html ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <p>
            <router-link to="/routerA">Go to routerA</router-link>
            <router-link to="/routerB">Go to routerB</router-link>
        </p>
        <router-view></router-view>
    </div>
    </body>
    </html>

#### main.js ####

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    const routes = [
        {  path: '/routerA', component: resolve => require(['./components/routerA.vue'], resolve) },
        {  path: '/routerB', component: resolve => require(['./components/routerB.vue'], resolve) }
    ];
    
    const router = new VueRouter({ 
        routes
    });
    
    Vue.use(VueRouter);
    
    new Vue({ 
        router,
        el: '#app'
    });

#### routerA.vue ####

<template>
        <div>
            <span>it is router a</span>
            <br><br>
            <component-a></component-a>
        </div>
    </template>
    
    <script> export default { name: "router-a", components: { componentA: resolve => require(['./componentA.vue'], resolve) } }; </script>
    
    <style scoped> </style>

#### componentA.vue ####

<template>
    <span>it is component a</span>
    </template>
    
    <script> export default { name: "component-a" }; </script>
    
    <style scoped> </style>

#### routerB.vue ####

<template>
        <span>it is router b</span>
    </template>
    
    <script> export default { name: "router-b" }; </script>
    
    <style scoped> </style>

--------------------

接下来执行webpack编译代码，编译后的目录结构如下图（3个懒加载文件分别对应0.js、1.js和2.js）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 1]

在浏览器中打开index.html（不要切换路由，先打开控制台），然后切换到路由routerA时加载了1.js和2.js（对应路由routerA的懒加载模块routerA.vue和routerA.vue依赖的懒加载模块componentA.vue）；切换到路由routerB时加载了0.js（对应路由routerB的懒加载模块routerB.vue）：  
![在这里插入图片描述][20190617223334483.gif]

[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[https_www.cnblogs.com_zhanyishu_p_6587571.html]: https://www.cnblogs.com/zhanyishu/p/6587571.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70]: /images/20220213/1218707f603d40b1b1ebd9fcae33a3d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 1]: /images/20220213/ac0ed4eaf3244edfb6f1aa17bc3f1e44.png
[20190617223334483.gif]: /images/20220213/40c9ad66877447e99aac4bd4fc3cd6dc.png