In this lesson I show how to use webpack to code split based on route in VueJS. Code splitting is a useful tool to help eliminate unused code and only load what's necessary.

Additional Resources https://router.vuejs.org/en/advanced/lazy-loading.html

After generate the project by Vue-cli, make sure those dependencies were installed already:

npm i babel-eslint babel-plugin-syntax-dynamic-import eslint-plugin-import -D

.eslintrc.js:

module.exports = {
root: true,
parserOptions: { parser: "babel-eslint" },
extends: ["plugin:vue/essential", "@vue/prettier"]
};

.babelrc:

{
"presets": ["@vue/app"],
"plugins": ["syntax-dynamic-import"]
}

routes.js:

import Vue from "vue";
import Router from "vue-router";
const Home = () => import(/* webpackChunkName: "Home" */ "./views/Home.vue");
const About = () => import(/* webpackChunkName: "About" */ "./views/About.vue"); Vue.use(Router); export default new Router({
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
component: About
}
]
});

The same for lazy loading a component:

<template>
...
<h3>Modal Example</h3>
<button @click="show">Show Modal</button>
</div>
</template> <script>
const MyModal = () => import("@/components/MyModal.vue"); // lazy loading the component
export default {
name: "HelloWorld",
props: {
msg: String
},
methods: {
show () {
this.$modal.show(MyModal);
},
}
};
</script>

[Vue] Code split by route in VueJS的更多相关文章

  1. vue vue-route 传参 $route.params

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. vue中$router以及$route的使用

    路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...

  3. vue中router以及route的使用

    路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...

  4. vue路由对象($route)参数简介

    路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...

  5. vue中$router和$route的区别

    $router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法. 返回上一个历史history用$router.to(-1) $route为当前 ...

  6. [Vue] Lazy Load a Route by using the Dynamic Import in Vue.js

    By default, vue-router doesn’t lazy load the routes unless you tell it to do it. Lazy loading of the ...

  7. vue中$router与$route的区别

    $.router是VueRouter的实例,相当于一个全局的路由器对象.包含很多属性和子对象,例如history对象 $.route表示当前正在跳转的路由对象.可以通过$.route获取到name,p ...

  8. vue中$router 与 $route区别

    vue-router中经常会操作的两个对象\(route和\)router两个. 1.$route对象 $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息.包含当前的路径,参数,q ...

  9. 【Vue.js】简单说下vuejs中v-model自定义使用姿势

    vue.js中有个v-model的语法,可以实现双向绑定. 起初刚看到的时候,觉得很神奇.后面随着对vue.js的熟悉.发现这个其实是vue官方给我们实现的一个语法糖. 使用v-model的时候,vu ...

随机推荐

  1. C# 的反射和映射

    最近想研究一下反射,先上网找了找资料,几乎大部分都是照抄MSDN的内容,生涩难懂,几乎没说,又找了找,发现一些强人的实例解析,才稍微有了 点门道,个人感觉,反射其实就是为了能够在程序运行期间动态的加载 ...

  2. $P2126 Mzc家中的男家丁$

    problem #ifdef Dubug #endif #include <bits/stdc++.h> using namespace std; typedef long long LL ...

  3. sql数据库中常用连接

    很简单的知识点,今天有点搞不清楚左外连接,右外连接:详见以下: --表stu id name 1, Jack 2, Tom 3, Kity 4, nono --表exam id grade 1, 56 ...

  4. c/c++ 参数传递 - 数组

    对于函数参数中的数组类型:传递的是数组地址,可以理解成传递的是对数组的引用.不是值传递,这是由C/C++函数实现机制决定的.一下三种函数生命完全等价: void func(int array[10]) ...

  5. C# Autofac 出现 尝试创建“XXController”类型的控制器时出错。请确保控制器具有无参数公共构造函数 错误解决方案

    出现以下错误: 总结解决方案: 本项目采用构造函数方法进行依赖注入,由于个人原因在业务层相互注入了接口,导致交叉:报错

  6. C#学习-执行存储过程

    使用存储的优点 1.执行更快.直接写sql脚本会有个解析编译的过程. 2.修改方便.当业务改变时,只需要改存储过程,不需要修改C#代码 3.传递Sql脚本数据相对更小 缺点: 1.使用存储过程,数据库 ...

  7. RabbitMQ 创建用户和创建Virtual host

    https://www.bilibili.com/video/av18997807/?p=3 Virtual host 就是类似数据库吧.

  8. Java编译器、JVM、解释器

    Java虚拟机(JVM)是可运行Java代码的假想计算机.只要根据JVM规格描述将解释器移植到特定的计算机上,就能保证经过编译的任何Java代码能够在该系统上运行.本文首先简要介绍从Java文件的编译 ...

  9. 取textaera里的值

    jQuery的.val()方法是专门用来获取表单元素值的,而textarea也属于表单元素所以可以直接用.val()方法获取. 不过要注意,由于textarea是个双标记因此.text()或.html ...

  10. 6.shell脚本

    6.1 shell基础语法 6.1.1 shell的概述 shell的基本概念 1.什么是shell shell是用户和Linux操作系统之间的接口,它提供了与操作系统之间的通讯方式 shell是一个 ...