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. UNIX环境高级编程--6

    系统数据文件和信息    数据文件都是ASCII文本文件,并且使用标准I/O库读这些文件,例如口令文件/etc/passwd和组文件/etc/group就是经常被多个程序频繁使用的两个文件.    口 ...

  2. 最新省市区划分码code

    爬取国家统计局省市区code 提供php爬取脚本以及json和sql https://github.com/zzDylan/area-code 觉得好用给个star,3q

  3. NSNotificationCenter 的使用详解

    通常我们在 iOS 中发生什么事件时该做什么是由 Delegate 实现的,例如 View 加载完后会触发 viewDidLoad.Apple 还为我们提供了另一种通知响应方式,那就是 NSNotif ...

  4. Android基于HttpUrlConnection类的文件下载

    /** * get方法的文件下载 * <p> * 特别说明 android中的progressBar是google唯一的做了处理的可以在子线程中更新UI的控件 * * @param pat ...

  5. cmd 切换目录和配置环境变量

    记录一下: 在用cmd进行切换盘符的时候, 如果是从 C盘切换到其他盘的话: D:直接回车就行了. 如果是在同一个盘符内切换文件夹的话,cd D:\ComputerSoft\curl\curl-7.6 ...

  6. SQL基本操作——约束

    我们将主要探讨以下几种约束: 1.NOT NULL 2.UNIQUE 3.PRIMARY KEY 4.FOREIGN KEY 5.CHECK 6.DEFAULT SQL NOTNULL约束:NOT N ...

  7. Java中接口与接口和类之间的关系

    接口和接口之间的关系 继承关系 可以多继承,并且可以多层继承 注意: 1.如果多个父接口中有同名的抽象方法,那么子接口只需要实现一次即可 2.如果多个父接口中有同名的默认方法,那么子接口必须重写默认方 ...

  8. php第十二节课

    练习 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  9. 【vue】vue中实现标签页

    前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...

  10. Django REST framework 分页

    三种分页:根据页码.根据索引.根据加密 http://www.xx.com/courses/?page=1&size=10 http://www.xx.com/courses/?offset= ...