vue首屏加载速度慢_Vue项目优化首屏加载速度

Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢

一、路由的懒加载

路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件。

结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。

在router中,我们平时是这样引入组件的:

import Foo from './Foo.vue'

文档中指出,如下定义一个能够被 Webpack 自动代码分割的异步组件

const Foo = () => import('./Foo.vue')

在路由配置中什么都不需要改变,只需要像往常一样使用 Foo:

const router = newVueRouter({

routes: [

{ path:'/foo', component: Foo }

]

})

官网介绍地址:

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

二、使用cdn

打包时,把vue、vuex、vue-router、axios等,换用国内的bootcdn直接引入到根目录的index.html。

在webpack build 下 base.conf.js 设置中添加externals,忽略不需要打包的库。

module.exports ={

context: path.resolve(__dirname,'../'),

entry: {

app:'./src/main.js'},

externals:{'vue':'Vue','vue-router':'VueRouter','vuex':'Vuex'},//格式为'aaa':'bbb',其中,aaa表示要引入的资源的名字,bbb表示该模块提供给外部引用的名字,由对应的库自定。例如,vue为Vue,vue-router为VueRouter

去掉原有的引用直接使用就可以了,否则还是会打包

具体步骤为

(1)、引入

在这里有些名字是不能变的,尽量按照规定的来写

'vue': 'Vue','vuex': 'Vuex','vue-router':'VueRouter',//'axios': 'axios',

'element-ui': 'ElementUI'

2、引入cdn。推荐引入 百度静态资源库的

地址为:https://www.bootcdn.cn/

3、注释

main.js中

//import Vue from 'vue'//import ELEMENT from 'element-ui'//Vue.use(ELEMENT)//import ElementUI from 'element-ui'//import 'element-ui/lib/theme-chalk/index.css'//Vue.use(ElementUI)

router.js中

//import Vue from 'vue'//import Router from 'vue-router'

Vue.use(VueRouter)

use不能去在router中。

再就是vuex文件中的注释了

4、删除掉 package.json 里面原本引入的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值