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. 使用Python生成ASCII字符画

    使用Python生成ASCII字符画 在很多的网站主页中或者程序的注释中会有一些好看的字符注释画.显得很牛逼的样子 例如: 知乎 _____ _____ _____ _____ /\ \ /\ \ / ...

  2. CPP-STL:vector中的size和capacity

    在vector中与size()和capacity() 相对应的有两个函数: resize(size_type)和reserve(size_type). Size指目前容器中实际有多少元素,对应的res ...

  3. rem和em的区别

    原文链接:http://caibaojian.com/rem-vs-em.html rem 单位如何转换为像素值 当使用 rem 单位,他们转化为像素大小取决于页根元素的字体大小,即 html 元素的 ...

  4. 【转】VC自定义消息

    MFC一般可利用ClassWizard类向导添加消息和消息处理函数,但用户自定义消息必须手工输入,现将vc自定义消息方法步骤记录如下: (1)定义消息 利用#define语句直接定义用户自己的消息(既 ...

  5. 【数论分块】bzoj2956: 模积和

    数论分块并不精通……第一次调了一个多小时才搞到60pts:因为不会处理i==j的情况,只能枚举了…… Description $\sum_{i=1}^{n}\sum_{j=1 \land i \not ...

  6. day2-python 登录

    # username = 'niuhanyang' # 写一个判断登录的程序: # 输入: username # password # 最大错误次数是3次,输入3次都没有登录成功,提示错误次数达到上限 ...

  7. 使用jmeter做简单的压测(检查点、负载设置、聚合报告)

    1.添加断言(检查点) 在需要压测的接口下添加--断言--响应断言,取接口响应中包含有的数据即可 检查点HTTP请求-->断言-->响应断言1.名称.注释2.Apply to//作用于哪里 ...

  8. Python学习笔记:re模块(正则表达式)

    本文是部分内容参考自:http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html,虽然这篇博客是基于Python2.4的老版本,但是基础的P ...

  9. stm32之ADC应用实例(单通道、多通道、基于DMA)

    文本仅做记录.. 硬件:STM32F103VCT6 开发工具:Keil uVision4 下载调试工具:ARM仿真器 网上资料很多,这里做一个详细的整合.(也不是很详细,但很通俗).  所用的芯片内嵌 ...

  10. nslookup、dig命令Linux安装包

    linux下提供nslookup,dig命令的软件就是 bind-utils yum install bind-utils -y