关于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/服务端渲染)

后续使用再总结

相关文章