vue移动端项目部署之后,第一次加载页面的时候过慢

我的梦境 提交于 2019-11-30 18:35:07

vue移动端项目部署之后,第一次加载页面的时候过慢,不一定非得首页加载慢,直接访问某个组件加载速度很慢的解决方案

vue按需加载组件 ----3种方法

1. vue异步组件技术

2. es6提案的import()

3.vue按需加载组件-使用webpack require.ensure

Vue 打包优化方案(解决 vendor.js 过大的问题)

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。

一、路由懒加载:

把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

参考链接:

  1. https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

二、不打包第三方库:

减少 vendor.js 的体积,从本质上来解决这种问题。

参考链接:

  1. https://segmentfault.com/a/1190000016309142
  2. https://blog.csdn.net/LonewoIf/article/details/87777367

将 vue.js 不打包

externals: {
    'vue': 'Vue'
}
效果对比

加入 vue.js  

 
不加入 vue.js    


vendor.js(当前包含 vue-router.js),设置 vue.js不加入打包后,vendor.js 文件过大问题得到根治。除了vue.js,还有其它第三方库,比如element-ui,layer等优秀的插件和框架都可以通过这种方式来解决。

实现效果如图,将第三方库从打包中剔除,将从cdn中获取相应的数据

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!