vue-router 懒加载优化

一、路由懒加载

1、先安装 babel 动态引入插件

  npm install --save-dev babel-plugin-syntax-dynamic-import

2、修改router/index.js

  异步引入组件

import Vue from ‘vue‘;
import Router from ‘vue-router‘;

const index = () => import(‘@/pages-phone/index‘);

const LOG = [
  {
    path: ‘/index‘,
    name: ‘index‘,
    component: index,
  },
];

Vue.use(Router);

export default new Router({
  routes: [
    ...LOG,
  ],
});

3、修改 .babelrc 文件

"plugins": [
  "syntax-dynamic-import"
],

二、开启gzip压缩

1、安装 gzip 压缩插件

  npm install --save-dev compression-webpack-plugin

2、修改 config/index.js 文件

// ...
productionGzip: true,
// ...

原文地址:https://www.cnblogs.com/goloving/p/9157980.html

时间: 2024-11-09 01:57:34

vue-router 懒加载优化的相关文章

vue 路由懒加载

题外: 我司目前的后台管理网站依旧是 jq + xxUI 构成的 ,早就想把 丫儿 个换成 vue了, 苦于整个组几乎一致处于一个忙碌的状态,没有时间来重构. 然鹅,昨天今天组长找到我说要用 vue 搞起来,这个问题不大,毕竟之前用他完成了几个项目,颇有收获,教训满满. 看着 左侧 冗长菜单 item ,不禁陷入了沉思. 当打包构建应用时,Javascript 包会变得非常大,首次加载即便使用了 各种 LOADING ,各种 动画,肯定体验贼差, 如果我们能把不同路由对应的组件分割成不同的代码块

vue路由懒加载及组件懒加载

vue路由懒加载及组件懒加载: https://www.cnblogs.com/-roc/p/9983177.html 一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import 1.未用懒加载,vue中路由代码如下 import Vue from 'vue' import Router from 'v

vue 图片懒加载

//Vue 图片懒加载export default (Vue , options = {})=>{ if(!Array.prototype.remove){ Array.prototype.remove = function(item){ if(!this.length) return var index = this.indexOf(item); if( index > -1){ this.splice(index,1); return this } } } var init = { laz

vue组件懒加载(Load On Demand)

在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某

vue组件懒加载与路由懒加载的实现

在项目很大的时候,首页会一次导入所有页面与组件,可以使用懒加载实现项目的优化,但项目很小,不推荐使用,项目小,分开后的懒加载会发多次请求,带来更多的性能缺陷 路由写法 //假设components下有一个home.vue,需要在路由页面引入 new Router({ routes:[{ path:'/', name:"home", components:()=>import("./components/home") //将路由顶部的引入,放在这里就实现路由的懒

vue路由懒加载

当打包构建应用时,javascript包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合Vue的异步组件和webpack的code splitting feature,轻松实现路由组件的懒加载. 我们要做的就是把路由对应的组件定义成异步组件: const Foo = resolve => { // require.ensure 是webpack的特殊语法,用来设置code-split point // 代

vue2.x 路由懒加载 优化打包体积

当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载. 首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身): const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

【凡尘】---vue路由懒加载---【vue】

一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 简单的说就是:进入首页不用一次加载过多资源造成用时过长 三.非懒加载的路由配置项 四.vue异步组件实

【java】itoo项目实战之hibernate 懒加载优化性能

在做itoo 3.0 的时候,考评系统想要上线,就开始导入数据了,只导入学生2万条数据,但是导入的速度特别的慢,这个慢的原因是因为导入的时候进行了过多的IO操作.但是导入成功之后,查询学生的速度更加慢,因为底层用了hibernate的hql语句进行查询的,学习过hibernate的人都知道,如果hibernate不设置懒加载的话,只有是有关联的数据都会一次性全部都查询出来,我试了试,查询2万条数据,最深的级联查询是有5层,然后发出来的语句是460条,时间大概是10s.然后就考虑使用lazy进行优