vue 加载体验优化

2019独角兽企业重金招聘Python工程师标准>>>

网络查询收集：

1.路由懒加载

// 需要ES6支持

const HelloWorld = () => import('@/components/HelloWorld.vue')
export default new Router({
  routes: [
        { path: '/', name: 'HelloWorld', component: HelloWorld },
  ]
})

或

const HelloWorld = resolve => require(['@/components/HelloWorld.vue'], resolve)
export default new Router({
  routes: [
        { path: '/', name: 'HelloWorld', component: HelloWorld },
  ]
})

2.开启gzip压缩

// 以vue-cli脚手架为例  找到config下index.js文件
 

build: {
    ......
    // 设置生产环境gzip为true
    productionGzip: true,   
    productionGzipExtensions: ['js', 'css'],
    ...... 

  }

3.使用webpack的externals属性把不需要打包的库文件分离出去，减少打包后文件的大小

// index.html中引入对应的文件或使用cdn 
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

4.增加等待动画

在index.html中放一个等待loading动画

5.骨架屏 PS还没有看懂

https://github.com/Jocs/jocs.github.io/issues/22

转载于:https://my.oschina.net/qingqingdego/blog/3006076