阅读 164

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)定时器及其他页面离开时还会占用空间的方法的消除

文章分类
前端
文章标签