解决spa页面首屏加载慢的方式笔记

本文主要是介绍解决spa页面首屏加载慢的方式笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.减少入口文件的体积

路由懒加载：在需要的时候进行加载，按需加载
前提：进行懒加载的子模块需要是一个单独的文件，所以要实现懒加载，就得先将进行懒加载的子模块（子组件）分离出来
vue router 支持开箱即用的动态导入，意味着你可以使用动态导入代替静态导入

路由懒加载实现方式：

1 .异步组件

{path: '/home',name: 'Home',component: resolve => require(['@/components/Home'],resolve)
},{path: '/index',name: 'Index',component: resolve => require(['@/components/Index'],resolve)
},

2.使用import

{
未指定webpackChunkName,所以每个组件打包成一个js文件path: '/home',component: () => import('@/components/Home')
}, {
//指定webpackChunkName,所以相同的webpackChunkName会合并打包成一个js文件path: '/index',component: () => import(/* webpackChunkName: 'importPage' */ '@/components/Home')
}, 

3.require.ensure()

//webpack提供的require.ensure(), 相同的webpackChunkName会合并打包成一个js文件
{path: '/home',name: 'Home',component: r => require.ensure([], () => r(require('@/components/Home')), 'page1')
}, {path: '/index',name: 'Index',component: r => require.ensure([], () => r(require('@/components/Index')), 'page1')
}

2.静态资源本地缓存

1. 后端返回的资源，采用http缓存

3. ui框架按需引入，开发过程中可能不止用到一个组件库，尽量不要全局引入

4.避免组件重复打包

在webpack的config文件中，修改CommonsChunkPlugin的配置，设置minChunks为2，表示会把使用两次次以上的包抽离出来，放到公共依赖文件中，避免重复加载组件爱你

5. 压缩图片资源，大量使用的图标啥的，使用雪碧图，使用background-position设置它的偏移量来显示图片，像logo等图片放在assets文件夹下，其余的图片放在静态托管目录public里面

6. 使用ssr服务端渲染

vue可以使用Nuxt.js实现服务端渲染

这篇关于解决spa页面首屏加载慢的方式笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---