关于VUE首屏加载过长的优化,VUE项目开发优化

时间:2021-06-05 18:20:56

1、 按需引入UI组件

当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例:

(1)     新建一个elementUI.js文件

(2)     访问地址找到按需引入方式的说明

(3)     复制里面的内容到新建的JS文件中,并注释掉不用的组件

(4)     在主文件JS(一般为main.js)中引用elementUI.js文件

2、 异步引入路由组件

路由组件的优化主要是文件引入方式的变化,对于引入后的组件使用是一致的。

  Before:
  import index from '@/components/index'
  {
    path: '/ index,
    name: ‘index’,
    component: index
  }

方案一:

  After:
    const index = resolve => require(['@/components/index'], resolve)
    const index = resolve => require.ensure([], () => resolve(require('@/components/index')))

两段代码都是将组件分别打包成单个JS文件,在网站加载时会自动解析加载需要的JS文件

方案二(推荐方案):

const index = resolve => require.ensure([], () => resolve(require('@/components/index')), 'indexChunk')

这段代码将组件分类到名为indexChunk的chunk中,在网站加载时会自动解析需要加载哪个 chunk。虽然分别打包的总体积会变大(同chunk将打包成同一个JS文件),但 是减少了资源请求,从而提升了速度。

3、 请求组件优化:

若使用了Ajax相关的库,比如vue-resource/axios的话,并且只用到了get、post等基础方式传输,可将其移除项目自己重新封装ajax请求对象或在兼容fetch浏览器中使用fetch请求

4、 SSR(Server Side Render/服务端渲染)

后续使用再总结