vue首屏加载速度慢_vue首屏加载慢的解决方案

单页面应用首次进入时加载的文件较多，导致首屏渲染速度很慢。以下总结了一些解决单页面应用首屏渲染慢的方式。

1、路由懒加载

a)、require

/*vue异步组件技术*/{

path:'/home',

name:'home',

component: resolve=> require(['@/components/home'],resolve)

},{

path:'/index',

name:'Index',

component: resolve=> require(['@/components/index'],resolve)

}

b)、import

//下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。

const Index = () => import('@/components/index')const About = () => import('@/components/about') */

//下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块

const Home = () => import(/*webpackChunkName: 'ImportFuncDemo'*/ '@/components/home'))

c)、require.ensure(dependencies: String[], callback: function(require), chunkName: String)   多个路由指定相同的chunkName，会合并打包成一个js文件。

/*组件懒加载方案三: webpack提供的require.ensure()*/{

path:'/home',

name:'home',

component: r=> require.ensure([], () => r(require('@/components/home')), 'demo')

}, {

path:'/index',

name:'Index',

component: r=> require.ensure([], () => r(require('@/components/index')), 'demo')

}

2、多入口

3、压缩代码并移除console

使用UglifyJsPlugin 插件来压缩代码和移除console。

newwebpack.optimize.UglifyJsPlugin({

compress: {

warnings:false,

drop_console:true,

pure_funcs: ['console.log']

},

sourceMap:false})

4、使用cdn引入第三方库、静态资源oss减小服务器压力

Vue 全家桶以及 ElementUI 仍然占了很大一部分 vendors 体积，这部分代码是不变的，但会随着每次 vendors 打包改变 hash 重新加载。我们可以使用 CDN 剔除这部分不经常变化的公共库。我们将vue，vue-router，vuex，axios，jquery，underscore，使用CDN资源引入。国内的CDN服务推荐使用https://www.bootcdn.cn/

首先我们要在 index.html 中, 添加 CDN 的相关代码

...