vue 项目首次打开时加载速度很慢的优化方案
1、使用 vue-router 懒加载解决首次加载时资源过多导致的速度缓慢问题当你的 SPA(单页应用程序)变得很复杂时,打包构建后的 js 包会变得非常大,以至于严重影响页面的加载时间。vue-router 支持 webpack 内置的异步模块加载系统。所以,那些使用较少的路由组件不必打包进 bundles 里,只要在路由被访问时按需加载。懒加载路由写法:routes: [{...
·
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);
更多推荐
已为社区贡献15条内容
所有评论(0)