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. 字符编码:WideCharToMultiByte

    WideCharToMultiByte 编辑   目录 1基本介绍及功能 2相关变量     1基本介绍及功能编辑 WideCharToMultiByte 函数功能:该函数映射一个unicode字符串 ...

  2. 说说TCP的三次握手

    在说这个问题之前,先说说IP协议和TCP协议 问题:IP协议能做什么?不能做什么? 我们都知道IP协议是无连接的通信协议,它不会占用两个正在通信的计算机的通信线路,这样就降低了IP对网络传输中的需求, ...

  3. 强制类型转换(int)、(int&)和(int*)的区别

    我们先来看两行代码: float x=1.75,y=1.75; cout<<(int)x<<" "<<(int&)y<<en ...

  4. 【Java_Spring】RestTemplate发HTTP请求详解

    Springboot — 用更优雅的方式发HTTP请求(RestTemplate详解) Spring RestTemplate提交时设置http header请求头 Spring之RestTempla ...

  5. 02 Django框架基础(APP的创建访问)

    一.创建项目 1.命令:django-admin startproject sitename 2.IDLE环境:本质上都是执行上述命令 常用命令: python manage.py runserver ...

  6. CentOS 系统下Gitlab搭建与基本配置 以及代码备份迁移过程

    GitLab 是一个开源的版本管理系统,提供了类似于 GitHub 的源代码浏览,管理缺陷和注释等功能,你可以将代码免费托管到 GitLab.com,而且不限项目数量和成员数.最吸引人的一点是,可以在 ...

  7. Python 建模步骤

    #%% #载入数据 .查看相关信息 import pandas as pd import numpy as np from sklearn.preprocessing import LabelEnco ...

  8. NOIP 2017 小凯的疑惑

    # NOIP 2017 小凯的疑惑 思路 a,b 互质 求最大不能表示出来的数k 则k与 a,b 互质 这里有一个结论:(网上有证明)不过我是打表找的规律 若 x,y(设x<y) 互质 则 : ...

  9. .Net Task常见问题

    最近尝试使用一下Task,但是使用过程中因为API的不熟悉碰到了很多问题,不清楚什么时间来调用Task.Start(),具体该怎么使用等等. 如下所描述的Task.Start()方法均为实例方法. 1 ...

  10. nginx的常用负载均衡算法,分别是

    随机分配,hash一致性分配,最小连接数分配,主备分配 随机,轮训,一致性哈希,主备,https://blog.csdn.net/liu88010988/article/details/5154741 ...