[Vue] Code split by route in VueJS
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的更多相关文章
- vue vue-route 传参 $route.params
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue中$router以及$route的使用
路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...
- vue中router以及route的使用
路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...
- vue路由对象($route)参数简介
路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...
- vue中$router和$route的区别
$router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法. 返回上一个历史history用$router.to(-1) $route为当前 ...
- [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 ...
- vue中$router与$route的区别
$.router是VueRouter的实例,相当于一个全局的路由器对象.包含很多属性和子对象,例如history对象 $.route表示当前正在跳转的路由对象.可以通过$.route获取到name,p ...
- vue中$router 与 $route区别
vue-router中经常会操作的两个对象\(route和\)router两个. 1.$route对象 $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息.包含当前的路径,参数,q ...
- 【Vue.js】简单说下vuejs中v-model自定义使用姿势
vue.js中有个v-model的语法,可以实现双向绑定. 起初刚看到的时候,觉得很神奇.后面随着对vue.js的熟悉.发现这个其实是vue官方给我们实现的一个语法糖. 使用v-model的时候,vu ...
随机推荐
- UNIX环境高级编程--6
系统数据文件和信息 数据文件都是ASCII文本文件,并且使用标准I/O库读这些文件,例如口令文件/etc/passwd和组文件/etc/group就是经常被多个程序频繁使用的两个文件. 口 ...
- 最新省市区划分码code
爬取国家统计局省市区code 提供php爬取脚本以及json和sql https://github.com/zzDylan/area-code 觉得好用给个star,3q
- NSNotificationCenter 的使用详解
通常我们在 iOS 中发生什么事件时该做什么是由 Delegate 实现的,例如 View 加载完后会触发 viewDidLoad.Apple 还为我们提供了另一种通知响应方式,那就是 NSNotif ...
- Android基于HttpUrlConnection类的文件下载
/** * get方法的文件下载 * <p> * 特别说明 android中的progressBar是google唯一的做了处理的可以在子线程中更新UI的控件 * * @param pat ...
- cmd 切换目录和配置环境变量
记录一下: 在用cmd进行切换盘符的时候, 如果是从 C盘切换到其他盘的话: D:直接回车就行了. 如果是在同一个盘符内切换文件夹的话,cd D:\ComputerSoft\curl\curl-7.6 ...
- SQL基本操作——约束
我们将主要探讨以下几种约束: 1.NOT NULL 2.UNIQUE 3.PRIMARY KEY 4.FOREIGN KEY 5.CHECK 6.DEFAULT SQL NOTNULL约束:NOT N ...
- Java中接口与接口和类之间的关系
接口和接口之间的关系 继承关系 可以多继承,并且可以多层继承 注意: 1.如果多个父接口中有同名的抽象方法,那么子接口只需要实现一次即可 2.如果多个父接口中有同名的默认方法,那么子接口必须重写默认方 ...
- php第十二节课
练习 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- 【vue】vue中实现标签页
前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...
- Django REST framework 分页
三种分页:根据页码.根据索引.根据加密 http://www.xx.com/courses/?page=1&size=10 http://www.xx.com/courses/?offset= ...