vue移动端项目部署之后,第一次加载页面的时候过慢,不一定非得首页加载慢,直接访问某个组件加载速度很慢的解决方案
vue按需加载组件 ----3种方法
1. vue异步组件技术
2. es6提案的import()
3.vue按需加载组件-使用webpack require.ensure
Vue 打包优化方案(解决 vendor.js 过大的问题)
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。
一、路由懒加载:
把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
参考链接:
二、不打包第三方库:
减少 vendor.js 的体积,从本质上来解决这种问题。
参考链接:
将 vue.js 不打包
externals: {
'vue': 'Vue'
}
效果对比
加入 vue.js
不加入 vue.js
vendor.js(当前包含 vue-router.js),设置 vue.js不加入打包后,vendor.js 文件过大问题得到根治。除了vue.js,还有其它第三方库,比如element-ui,layer等优秀的插件和框架都可以通过这种方式来解决。
实现效果如图,将第三方库从打包中剔除,将从cdn中获取相应的数据