vue项目首屏加载缓慢项目优化粗略记录

（个人笔记，如有错误麻烦指出下）

1、本地静态资源合理的引用

尽量少用本地图片，可以放在线上，或者能用图标代替的用图标，实在需要放到本地的图片可以作合理的压缩，我用的网站是https://tinypng.com/ 。 不过这次在处理 App里内嵌的H5时 改了大量的图片通过oss直接调用 反而速度上更慢了，具体细节没有深究，我猜测应该是首次加载时图片都是通过地址请求获取，过多的图片请求反而会延缓加载时间。

优化精简js 及css代码，删除多余代码，（之前看过对js和css文件进行压缩的，这一次没有做）。这一步可能 能减小的体积不是很大 不过在简化的同时可以规范下代码，多组件或者引用的很多的css 可以挂在全局上，同时一些未引用的组件可以删去的删掉。还有一个问题是css资源的引用——在app.vue中尽量少引入,index.html如果有css及js库的引入注意文件引用顺序。

2、打包配置不生成map文件具体配置为

config.index.js 下    build { productionSourceMap: false }

3、同样是打包时配置生成压缩文件（需要安装webpack插件 compression-webpack-plugin）

config.index.js 下    build { productionGzip: true } 
压缩可以配置 productionGzipExtensions: [ 'js' , 'css' ]
——后台服务器配置开启 gzip on; gzip_static on; (具体配置没查)

 注：这里我遇到个问题在配置了打包后压缩后 加载速度变化却不是很大，甚至比不压缩要慢一些，目前猜测可能时后台配置有问题，所以没有生效。导致前台压缩了生成了压缩文件占用了大小，服务器却没有解析压缩而是直接引用原文件。

4、路由懒加载

1) 通过import引入 
    const XXX = () => import('@/components/xxx')
    { path: '/xxx', component: XXX }

2）异步加载
    {
      path: '/xxx',
      name: 'xxx',
      component: resolve => require(['@/components/xxx'],resolve)
    }

3) webpack提供的require.ensure()  (没用过)
    { path: '/xxx', name: 'xxx', component: r => require.ensure([], () => r(require('@/components/xxx')), 'demo') }

5、UI 等组件库按需引入

这个优化还是挺有必要的，目前用的ui框架和插件如果全部引入的话往往是比较大的。我这次用的是vux，遇到一个坑是 vux官方的按需引入 import {xxx } 'vux' 这种写法其实并没有做到按需引入，导致我找了很久原因，最后通过webpack 插件(webpack-bundle-analyzer) 分析了打的包占用资源才知道，后来只能通过全部手动引入的方法加载

即：import XXXX from 'vux/src/components/XXXX/index.vue'  （这里vux并不是所有的目录下都是index.vue，所以要自己去node_modules下看清楚）

当然其他的组件或者插件库可能没有这个问题，这里记录下避免下次遇到类似的bug

6、引用较少的插件和库通过cdn引入

即：在index.html 中通过 <script>标签引入

并且在webpack.base.config.js中的externals添加包名 如： 
    externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'axios': 'axios',
    }
Z:同时记得删除其他引入方式

7、代码层面的

1）合理使用v-if和v-show 以及watch和computed 2）对于v-for 的key值的标准唯一，且在v-for标签上尽量不和v-if同时使用 3）定时器及其他页面离开时还会占用空间的方法的消除