vuejs项目打包之后的首屏加载优化及打包之后出现的问题

 更新时间:2018年04月01日 09:26:28   转载 投稿:mrr  
这篇文章主要介绍了vuejs项目打包之后的首屏加载优化及打包之后可能出现的问题,需要的朋友可以参考下

一:使用CDN资源

我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例如不想把vue,axios,vuex,vue-router打包到我们项目中,我们需要这样:

1:打开webpack.base.conf.js

module.exports = {
   externals: {
    ‘vue‘: ‘Vue‘,
    ‘axios‘: ‘axios‘,
    ‘vuex‘: ‘Vuex‘,
    ‘vue-router‘: ‘VueRouter‘
 }
}

2:打开router/index.js。注销掉以下两行

//import Vue from ‘vue‘
//Vue.use(Router)

3:如果你使用了vuex,把vuex/index.js(命名各有不同)中的Vue.use(Vuex)注销了

Vue.use(Vuex)

打包后可能出现的问题

1:被keep-alive包围的元素无法显示

原因:暂不明。

解决方法:不用keep-alive

推荐阅读:Vue项目使用CDN优化首屏加载问题

总结

以上所述是小编给大家介绍的vuejs项目打包之后的首屏加载优化及打包之后出现的问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • 详解vuex状态管理模式

    详解vuex状态管理模式

    这篇文章主要介绍了详解vuex状态管理模式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue组件 $children,$refs,$parent的使用详解

    vue组件 $children,$refs,$parent的使用详解

    本篇文章主要介绍了vue组件 $children,$refs,$parent的使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue数组对象排序的实现代码

    vue数组对象排序的实现代码

    这篇文章主要介绍了vue数组对象排序的实现代码,这里整理了详细的代码,非常具有实用价值,需要的朋友可以参考下
    2018-06-06
  • Vue 事件处理操作实例详解

    Vue 事件处理操作实例详解

    这篇文章主要介绍了Vue 事件处理操作,结合实例形式较为详细的分析了vue.js事件处理相关的事件监听、处理、修饰符等相关概念、用法及操作注意事项,需要的朋友可以参考下
    2019-03-03
  • element跨分页操作选择详解

    element跨分页操作选择详解

    这篇文章主要为大家详细介绍了element跨分页操作选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 详解Vue SPA项目优化小记

    详解Vue SPA项目优化小记

    这篇文章主要介绍了详解Vue SPA项目优化小记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue中多个元素、组件的过渡及列表过渡的方法示例

    Vue中多个元素、组件的过渡及列表过渡的方法示例

    这篇文章主要介绍了Vue中多个元素、组件的过渡及列表过渡的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • vue 插值 v-once,v-text, v-html详解

    vue 插值 v-once,v-text, v-html详解

    这篇文章主要介绍了vue 插值 v-once,v-text, v-html详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 简述vue-cli中chainWebpack的使用方法

    简述vue-cli中chainWebpack的使用方法

    今天就主要来讲一下在vue.config.js中对一些配置的更改,简单介绍一下loader的使用;用configureWebpack简单的配置;用chainWebpack做高级配置;包括对loader的添加,修改;以及插件的配置,需要的朋友可以参考下
    2019-07-07
  • Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    这篇文章主要介绍了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能,结合实例形式详细分析了Vue + Node.js + MongoDB基于图片上传组件实现图片预览和删除功能相关操作技巧,需要的朋友可以参考下
    2020-04-04

最新评论