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. Java获取yml里面的配置

    #yml文件配置systemPath: #档案系统地址 dossier: http://127.0.0.1:8088/ //调用说明 配置文件里必须包含节点 否则项目无法启动 @Value(" ...

  2. 如何将字符串@“ abc123.xyz789”倒置

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...

  3. CentOS7的systemctl使用

    CentOS 7开始,CentOS开始使用systemd服务来代替daemon,原来管理系统启动和管理系统服务的相关命令全部由systemctl命令来代替. 1.原来的 service 命令与 sys ...

  4. VNC远程登录端使用经验之一

    1.vnc/xmanager都是经常用的远程登录软件.vnc有个缺点就是他的进程不会自动退出比如如果开了PID1再去开PID2...PIDn.那么前面的PIDn-1个进程就会一直运行如果不手动kill ...

  5. Python基础-面向对象初识--类

    什么是类 具有相似功能和属性的一类实物 什么是对象 类的具体体现,具体到一个 面向对象的优势 1.类是一组相似功能的集合,使组织结构更加清晰和规范化 2.研究面向对象要有上帝的思维,用面向对象设计程序 ...

  6. 线段树: CDOJ1598-加帕里公园的friends(区间合并,单点更新)

    加帕里公园的friends Time Limit: 3000/1000MS (Java/Others) Memory Limit: 131072/131072KB (Java/Others) 我还有很 ...

  7. HDU 3861 The King’s Problem 强连通分量 最小路径覆盖

    先找出强连通分量缩点,然后就是最小路径覆盖. 构造一个二分图,把每个点\(i\)拆成两个点\(X_i,Y_i\). 对于原图中的边\(u \to v\),在二分图添加一条边\(X_u \to Y_v\ ...

  8. Ubuntu关机与重启的相关指令

    将数据同步写入到磁盘中的指令:sync 惯用的关机指令:shutdown 重新启动,关机:reboot,halt,poweroff shutdown可完成如下工作: 1.可以自由选择关机模式:是要关机 ...

  9. [转] Vuex入门(2)—— state,mapState,...mapState对象展开符详解

    1.state  state是什么? 定义:state(vuex) ≍ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 ...

  10. NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config的问题

    故障问题: 使用springMVC3.05 ,tomcat服务器进行开发, Spring配置正确,console有输出,但是url打开时不能出现页面,提示错误信息为:NoClassDefFoundEr ...