vue首屏加载优化积累

1. 首屏图片使用懒加载
   使用的组件库中都有一些懒加载的命令，例如vant的v-lazy
2. 把一些依赖包通过cdn引入，见少bundle包的大小
   例：

// index.html
<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>

// vue.config.js
module.exports = {
 ...
  configureWebpack: config => {
    config.externals = {
      'moment': 'moment'
    }
  }
}

// 使用
import moment from 'moment'

4. 路由懒加载

{
      path: '/problem',
      name: 'problem',
      component: resolve => require(['../pages/home/problemList'], resolve)
}

或者es6的import语法

在这里插入代码片

{
      path: '/problem',
      name: 'problem',
      component: （) => import('../pages/home/problemList')
}

6. 压缩图片大小
   如果不需要透明的图片可以转成jpg，压缩到可以接受的清晰度
7. 避免过多的全局引入
   尽量见少main.js中的全局引入，在使用的地方单独引入
8. 待补充