vuejs移动端页面首次加载太慢解决方案

移动端端用vuejs开发会有一个很大的问题，就是首次加载太慢了，好几秒都是白屏，下面编程教程网小编谈谈解决方法！

1、去掉.map文件

打开dist/static/js文件夹，我们会发现很大.map文件，些文件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过大，我们把config/index.js文件中将productionSourceMap设置为false，这样下次打包就不会生成.map文件了。

2、vue-router路由设置懒加载

原先设置的路由是把所有页面一起加载出来，懒加载可以将页面中的资源划分为多份，从而减少第一次加载的时候耗时。

//非懒加载路由配置：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
	  meta: {
		title: '',
		content: {
		    keywords: '',
		   description: ''
		}
      }
    }
  ]
})

//懒加载路由配置：
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/components/HelloWorld'], resolve),
      meta: {
		title: '',
		content: {
		   keywords: '',
		   description: ''
		}
      }
    }
  ]
})

还有一个解决方法，就是可以使用CDN减小代码体积加快请求速度

以上是编程学习网小编为您介绍的“vuejs移动端页面首次加载太慢解决方案”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。