1、使用 vue-router 懒加载解决首次加载时资源过多导致的速度缓慢问题
当你的 SPA(单页应用程序)变得很复杂时,打包构建后的 js 包会变得非常大,以至于严重影响页面的加载时间。vue-router 支持 webpack 内置的异步模块加载系统。所以,那些使用较少的路由组件不必打包进 bundles 里,只要在路由被访问时按需加载。
懒加载路由写法:

routes: [    
{      
name: "register",      
path: '/register',      
component: resolve => require.ensure([], () => resolve(require('@/components/register')), 'register'),    
},//注册    
{      
name: "login",      
path: '/',      
component: resolve => require.ensure([], () => resolve(require('@/components/login')), 'login'),    
},//登录

2、使用CDN加速

以引入vue、vuex、vue-router为例:

第一步,在index.html中,添加CDN资源:

<!-- 引入Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<!-- 引入vuex.js -->
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>

第二步,在 bulid/webpack.base.conf.js 文件中,改变 externals

externals: {    
'BMap': 'BMap',    
'vue': 'Vue',    
'element-ui': 'ELEMENT',  
},

第三步,将所有的引用去掉:

// import ElementUI from "element-ui";
// Vue.use(ElementUI);
Logo

前往低代码交流专区

更多推荐