vuejs项目打包结束后首屏加载优化

这次给大家带来vuejs项目打包结束后首屏加载优化,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优化首屏加载问题

总结

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

vue实现减少对服务器请求次数

vue怎样使用缓存

以上就是vuejs项目打包结束后首屏加载优化的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2769955.html

(0)
上一篇 2025年3月8日 12:27:36
下一篇 2025年3月8日 12:27:44

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • CDN优化首屏加载速度

    这次给大家带来CDN优化首屏加载速度,CDN优化首屏加载速度的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 作为一个网站应用,加载速度是非常重要的。加载速度,一个是程序的合理安排,如以组件按需加载,一个是js、css等资源的异步加…

    编程技术 2025年3月8日
    200
  • JS+Canva做出预览压缩和上传图片功能

    这次给大家带来JS+Canva做出预览压缩和上传图片功能,JS+Canva做出预览压缩和上传图片功能的注意事项有哪些,下面就是实战案例,一起来看一下。 这篇文章主要介绍了JS和Canvas实现图片的预览压缩和上传功能,实现此功能大概有两步,…

    2025年3月8日 编程技术
    200
  • js怎么存储键值

    这次给大家带来js怎么存储键值,js存储键值的注意事项有哪些,下面就是实战案例,一起来看一下。 前端有时候需要存储键值对,需要主要的一点是键必须为字符串,重要的再次说明,键需要为字符串。 重点内容 var map={ key1:’abc’,…

    编程技术 2025年3月8日
    200
  • 键值字符串转为json字符串的JS方法

    这次给大家带来键值字符串转为json字符串的JS方法,键值字符串转为json字符串的注意事项有哪些,下面就是实战案例,一起来看一下。 要转化的键值对字符 var respDesc=“cardid=64157001&cardnum=1…

    编程技术 2025年3月8日
    200
  • vue.js中created使用详解

    这次给大家带来vue.js中created使用详解,vue.js中created使用的注意事项有哪些,下面就是实战案例,一起来看一下。 这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某…

    2025年3月8日 编程技术
    200
  • json数组键值大小写怎么转换(附代码)

    这次给大家带来json数组键值大小写怎么转换(附代码),json数组键值大小写转换的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 最近在做一个项目,发现后端返回的数据键值全部都是大写的,有时候前端用起来很不方便,所以写了一个深度转…

    编程技术 2025年3月8日
    200
  • JS EventEmitter使用详解

    这次给大家带来JS EventEmitter使用详解,JS EventEmitter使用的注意事项有哪些,下面就是实战案例,一起来看一下。 2个多月前把 Github 上的 eventemitter3 和 Node.js 下的事件模块 ev…

    2025年3月8日
    200
  • JS EventEmitter 案列教程

    这次给大家带来JS EventEmitter 案列教程,使用JS EventEmitter的注意事项有哪些,下面就是实战案例,一起来看一下。 在这里,我们的目标创建属于我们自己的 Event Emitter 去理解背后的秘密。所以,让我们看…

    编程技术 2025年3月8日
    200
  • 源生JS实现文件拖拽事件

    这次给大家带来源生JS实现文件拖拽事件,源生JS实现文件拖拽事件的注意事项有哪些,下面就是实战案例,一起来看一下。 1.效果图: 2.源码 #p1 { width: 350px; height: 70px; padding: 10px; b…

    2025年3月8日
    200
  • vue.js+element-ui树形控件修改iview步奏详解

    这次给大家带来vue.js+element-ui树形控件修改iview步奏详解,vue.js+element-ui树形控件修改iview的注意事项有哪些,下面就是实战案例,一起来看一下。 element-ui组件的tree树形控件修改源码改…

    2025年3月8日
    200

发表回复

登录后才能评论