解决vue打包后vendor.js文件过大问题

 更新时间:2019年07月03日 16:17:27   作者:Delta🎵  
这篇文章主要介绍了解决vue打包后vendor.js文件过大问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

第一步、cdn引入各种包

index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包,如下图:

第二步、在使用vue等包的地方,注释掉import引入

在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios)、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中

在main.js

在store文件加中的index.js

在api/request.js文件中

在router/index.js文件中

第三步、打包忽视掉vue等包

在webpack.base.conf.js

第四步、如果打包后的文件还是比较大,就采用路由懒加载的方式加载路由

最终打包结果

vendor.js的大小由原来的988k, 降到235k

总结

以上所述是小编给大家介绍的解决vue打包后vendor.js文件过大问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • vue demi支持sfc方式的vue2vue3通用库开发详解

    vue demi支持sfc方式的vue2vue3通用库开发详解

    这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue升级之路之vue-router的使用教程

    vue升级之路之vue-router的使用教程

    自动安装的vue-router,会在src 文件夹下有个一个 router -> index.js 文件 在 index.js 中创建 routers 对象,引入所需的组件并配置路径。这篇文章主要介绍了vue-router的使用,需要的朋友可以参考下
    2018-08-08
  • vue中关于redirect(重定向)初学者的坑

    vue中关于redirect(重定向)初学者的坑

    这篇文章主要介绍了vue中关于redirect(重定向)初学者的坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue +elementui 项目登录通过不同账号切换侧边栏菜单的颜色

    vue +elementui 项目登录通过不同账号切换侧边栏菜单的颜色

    这篇文章主要介绍了vue +elementui 项目登录通过不同账号切换侧边栏菜单的颜色,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue将html页面生成高清晰pdf文件的方法

    vue将html页面生成高清晰pdf文件的方法

    最近工作中遇到个需求,需要实现个可视化图表页的PDF文件导出,所以下面这篇文章主要给大家介绍了关于利用vue如何将html页面生成高清晰pdf文件的相关资料,需要的朋友可以参考下
    2022-03-03
  • vue项目实现img的src动态赋值

    vue项目实现img的src动态赋值

    这篇文章主要介绍了vue项目实现img的src动态赋值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中使用vue-pdf组件实现文件预览及相应报错解决

    vue中使用vue-pdf组件实现文件预览及相应报错解决

    在需求中,经常遇见pdf的在线预览效果,很多pdf插件不支持vue3,或者是没有集成翻页放大缩小功能,比如vue-pdf,下面这篇文章主要给大家介绍了关于vue中使用vue-pdf组件实现文件预览及相应报错解决的相关资料,需要的朋友可以参考下
    2022-09-09
  • mapbox gl开箱即用的地图引擎库

    mapbox gl开箱即用的地图引擎库

    这篇文章主要为大家介绍了一款mapbox gl开箱即用的地图引擎库,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue实现浏览器端扫码功能

    Vue实现浏览器端扫码功能

    本文主要介绍,通过使用基于 vue技术栈的前端开发技术,在浏览器端调起摄像头,并进行扫码识别功能,对识别到的二维码进行跳转或其他操作处理,对vue浏览器扫码功能的实现代码感兴趣的朋友一起看看吧
    2021-10-10
  • el-form 多层级表单的实现示例

    el-form 多层级表单的实现示例

    这篇文章主要介绍了el-form 多层级表单的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09

最新评论