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 字符串拼接总结(带注释版)

    在 Python 中字符串连接有多种方式,这里简单做个总结,应该是比较全面的了,方便以后查阅. 加号连接 第一种,通过+号的形式: >>> a, b = 'hello', ' wor ...

  2. C#基于联通短信Sgip协议构建短信网关程序

    此软件基于中国联通Sgip协议程序接口,适合在中国联通申请了短信发送端口的公司使用.短信群发已经成为现在软件系统.网络营销等必不可少的应用工具.可应用在短信验证.信息群发.游戏虚拟商品购买.事件提醒. ...

  3. Java基础面试操作题: File IO 文件过滤器FileFilter 练习 把一个文件夹下的.java文件复制到另一个文件夹下的.txt文件

    package com.swift; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File ...

  4. cocos2dx观察者模式EventListenerCustom的使用(代替NotificationCenter)

    在cocos2dx 3.x版本已经被弃用,改用EventDispatcher代替. 观察者模式是MVC模式的一种,一个model可以对应很多个观察者view,当model收到事件通知时,对应的view ...

  5. VueX源码分析(2)

    VueX源码分析(2) 剩余内容 /module /plugins helpers.js store.js helpers要从底部开始分析比较好.也即先从辅助函数开始再分析那4个map函数mapSta ...

  6. PHP 存储密码

    最佳实践是 $hashedPassword = password_hash('my super cool password', PASSWORD_DEFAULT); $res = password_v ...

  7. 无法重启ssh

    rm /dev/null mknod /dev/null c 1 3 chmod 666 /dev/null

  8. windows server2008R2 64位 配置 mysql-8.0.15-winx64

    下载mysql: 1 https://dev.mysql.com/downloads/mysql/ 如图: 然后在解压的文件夹里面新建 my.ini文件,内容如下 按 Ctrl+C 复制代码 按 Ct ...

  9. selenium+phantomjs爬取京东商品信息

    selenium+phantomjs爬取京东商品信息 今天自己实战写了个爬取京东商品信息,和上一篇的思路一样,附上链接:https://www.cnblogs.com/cany/p/10897618. ...

  10. python 项目中包中__init__.py文件的作用

    开发python项目时,我遇到了一个这样的现象,当我新建一个pythonpackage时,总会自动地生成一个空的__init__.py文件,因为是python新手,所以很不了解这个空文件的作用是什么, ...