vue 构建单页面应用,但是问题是随着系统的体积变大,js文件也体积太大了,这时候就需要按需要进行加载了

vue-router提供了懒加载的方式

const Foo = resolve => require(['./Foo.vue'], resolve)

将引入组件的方式变成上面这个样子就好了

另外一种写法

const Foo = resolve => {
// require.ensure 是 Webpack 的特殊语法,用来设置 code-split point
// (代码分块)
require.ensure(['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
})
}

vue 按需加载的更多相关文章

  1. Vue按需加载提升用户体验

    Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...

  2. vue按需加载组件-webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...

  3. vue 按需加载,缓存,导航守卫

    开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...

  4. vue按需加载组件,异步组件

    说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template ...

  5. 三步解决 vue 按需加载

    1  webpack 的 output 配置 chunkFleName 树干名称: " chunks/[name]-[chunkhash:8].js  " 这一步是配合第三步, 生 ...

  6. 原创《分享(Angular 和 Vue)按需加载的项目实践优化方案》

    针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...

  7. vue中的懒加载和按需加载

    懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. (2)异步加载的三种表示方法: 1. resolve => require([URL], resolve),支持性好 ...

  8. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  9. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

随机推荐

  1. CPP-基础:有关调用约定

    在C语言中,假设咱们有这样的一个函数:int function(int a,int b) 调历时只有用result = function(1,2)的方法就能利用这个函数.然而,当高档语言被编译成计算机 ...

  2. PAT (Basic Level) Practise (中文)- 1015. 德才论 (25)

    http://www.patest.cn/contests/pat-b-practise/1015 宋代史学家司马光在<资治通鉴>中有一段著名的“德才论”:“是故才德全尽谓之圣人,才德兼亡 ...

  3. Bootstrap 提示工具(Tooltip)插件

    当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具( ...

  4. LiteIDE 错误: 进程无法启动

    问题 运行 01_hello.go,提示以下错误 新建文件夹().exe [C:/Users/Administrator/Desktop/新建文件夹()] 错误: 进程无法启动. 原因 工程目录名不能 ...

  5. 基于Nodejs的爬虫

    简介 基于 Node.JS 爬取 博客园 1W+博文,对博文内容做关键词提取,生成词云. 演示 安装 安装 git.Node.JS.MongoDB.Yarn 克隆代码 git clone git@gi ...

  6. NSXMLParser

    NSXMLParser的使用 2011-05-05 15:50:17|  分类: 解析|字号 订阅     NSXMLParser解析xml格式的数据 用法如下: 首先,NSXMLParser必须继续 ...

  7. 【动态规划】bzoj1939: [Croatian2010] Zuma

    隐约记得类似的一道JSOI祖玛……然后好像这题不能够把珠子合并成一段?或许是因为这里珠子碰在一起之后可以不消除? Description 有一行 N 个弹子,每一个都有一个颜色.每次可以让超过 K 个 ...

  8. [图文] Fedora 28 使用 Virt-Manager 创建 KVM 虚拟机以及 配置 KVM 虚拟机

    实验说明: 往后的许多实验都将以Linux平台下的 KVM虚拟机为主,所以不可少的就是 Virt-Manager 虚拟机管理器. 本章将对如何安装和使用Virt-Manager管理器进行讲解,并且会对 ...

  9. Linux远程传输命令scp

    指令:scp在不同的linux主机间复制文件带有Security的文件copy,基于ssh登录. 有些linux发行版没有自带scp,因此需要安装scp# yum -y install openssh ...

  10. 【整理】虚拟机和主机ping不通解决办法,虚拟机ping不通外网的解决方法

     检查几个方面: 1.检查虚拟网卡有没有被禁用2.检查虚拟机与物理机是否在一个VMNet中3.检查虚拟机的IP地址与物理机对应的VMNet是否在一个网段4.检查虚拟机与物理机的防火墙是否允许PING, ...