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

参考文档一：https://cn.vuejs.org/v2/guide/参考文档二：https://www.cnblogs.com/zhanyishu/p/6587571.html懒加载实质是让页面非必须资源延迟加载，减少页面加载用时，从而达到页面性能优化的目的。注意：本文涉及的懒加载配置都是基于webpack4.6.0，如果示例代码有错误，请先检查webpack版本。在vue工程中，懒加...

讨厌走开啦

6062人浏览 · 2019-06-17 22:36:44

讨厌走开啦 · 2019-06-17 22:36:44 发布

参考文档一：https://cn.vuejs.org/v2/guide/
参考文档二：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"
  }
}

工程目录结构：

在这里插入图片描述

工程代码

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）：
在这里插入图片描述

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^