码迷,mamicode.com
首页 > 其他好文 > 详细

Vue项目优化首屏加载速度

时间:2018-10-15 20:32:56      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:设置   require   官网   表示   com   one   vuex   lazy   div   

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

一、路由的懒加载

路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件。 
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。 
在router中,我们平时是这样引入组件的:
import Foo from ./Foo.vue

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

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

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

const router = new VueRouter({
  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/

<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.0/theme-chalk/index.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.0/index.js"></script>

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 里面原本引入的。

Vue项目优化首屏加载速度

标签:设置   require   官网   表示   com   one   vuex   lazy   div   

原文地址:https://www.cnblogs.com/haonanZhang/p/9792415.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!