Vue 打包后文件过大 加载速度慢，使用 外部CDN引入库 懒加载路由

最新推荐文章于 2023-09-05 20:59:06 发布
最新推荐文章于 2023-09-05 20:59:06 发布
阅读量277 收藏
点赞数
分类专栏： 前端 文章标签： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33950912/article/details/120676137
版权
本文介绍了如何提升前端应用性能，通过外部CDN引入库以加快加载速度，例如BootCDN和jsDelivr。同时，详细讲解了在Vue-cli2.X环境下，修改webpack配置文件和main.js来实现路由懒加载，以此按需加载模块，减少初始页面的体积，提高用户体验。
摘要由CSDN通过智能技术生成

1.外部CDN引入库

修改index.html 使用script标签引入插件
可以去CDN网站去找连接这样速度快

  • https://www.bootcdn.cn/
  • cdn.jsdelivr.net
    htttps://houlai.fun

2. 修改 webpack.base.conf.js （Vue-cli2.X)

在这里插入图片描述

3. 修改 main.js

将外部库引入的注释掉
在这里插入图片描述

使用路由懒加载

修改 router/index.js 路由
在这里插入图片描述

后来的路
关注
专栏目录
Vue如何提升首屏加载速度实例解析
10-15
通常，Vue项目的vendor.js文件包含了大量的第三方库和依赖，导致文件体积过大，延长了加载时间。为了识别和解决这个问题，我们可以使用`webpack-bundle-analyzer`这个插件进行资源分析。安装插件后，在webpack配置中...
Vue性能优化之——引用CDN，提高首屏加载速度
qingzhen的博客
04-13 3299
性能优化实战
Vue项目使用CDN优化首屏加载
weixin_34159110的博客
03-31 1141
前言 作为一个网站应用，加载速度是非常重要的。加载速度，一个是程序的合理安排，如以组件按需加载，一个是js、css等资源的异步加载。 在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方法是，将引用的外部js、css文件剥离开来，不编译...
Vue使用CDN与GZIP打包部署优化
LauSET的博客
04-02 984
Vue使用cdn加速与gzipu压缩实现打包优化前言一、CDN1.cdn方式引入2.修改config3.修改引入方式二、GZIP1.配置2.Nginx配置3.压缩效果总结 前言 当我们前端使用了大量组件和页面之后，打包会导致项目体积过大，这时候部署后访问有时候就会出现首页喧染慢等一些尴尬而又急人的情况。这个时候我们就需要对项目进行优化，例如uniapp可以分包加载，vue则可以cdn加载三方插件与gzip压缩js文件 一、CDN CDN应用广泛，支持多种行业、多种场景内容加速，例如：图片小文件、大文件下
前端项目打包优化（解决首屏加载慢的问题），看一篇就够了！
Antoinette_Xiao的博客
07-26 5332
解决vue项目打包之后首屏加载慢的问题
vue打包生成的js文件过大优化
weixin_37178391的博客
06-13 4516
vue打包生成的js文件过大优化 1.组件按需加载 2.去掉生成map文件 3.cdn引入 4.路由懒加载 5.代码压缩 6.最后 项目打包之后js文件太大问题 问题描述 1.使用cdn引入不怎么改变的第三方库 2.使用vue的懒加载 3.服务器和前端配置开启压缩1.组件按需加载 现在大多的ui库都是以组件的形式进行处理，所以只需导入需要模块的即可 2.去掉生成map文件 打包时会生成map文件，而map文件一般都比较大，可以取消生成map文件（1）config/index.js找到productionSo
基于Vue的电商后台管理系统
08-05
同时，通过路由懒加载和按需引入库，可以减少首屏加载时间，提升用户体验。 通过上述技术点，我们可以构建出一个高效、易维护的“基于Vue的电商后台管理系统”。Vue.js 的灵活性和易用性使得它成为开发此类系统的...
管理系统系列--物资管理系统，前端Vue项目.zip
02-26
8. **构建工具**：Vue项目通常使用Webpack或Vite作为构建工具，它们负责编译、打包和优化项目资源，以便在生产环境中部署。 9. **版本控制**：项目可能使用Git进行版本控制，方便团队协作和代码回溯。 10. **开发...
vuejs社区手机端重构
08-10
8. **性能优化**：包括懒加载、异步组件、路由守卫、按需引入库、tree shaking等技术，能有效提升移动端应用的加载速度和运行效率。 9. **测试和调试**：单元测试和集成测试确保代码质量，Vue DevTools是强大的调试...
基于物流数据的智能仓库管理系统设计与实现前端
最新发布
03-25
通过代码分割、懒加载、预渲染等技术提高页面加载速度，减少用户等待时间。同时，合理使用CDN加速静态资源的加载。 9. **测试与调试** 使用单元测试框架如Jest或Mocha进行组件测试，确保功能的正确性。开发者工具...
vue项目性能优化2，优化：使用CDN加速
公z号：职场爱学习
06-20 1351
基于webpack 3、vue 2和vue-cli 2的性能优化。 使用CDN加速，降低服务器带宽的压力。 externals的作用： 让在项目中通过import引入的依赖，在打包的时候，不会打包到vendor.js中，而是通过script的方式去访问这些依赖。 免费的CDN服务器： https://www.bootcdn.cn/ https://cdnjs.com/ https://www.jsdelivr.com/ 打开index.html文件，修改： html2canvas 1.0.0-rc.5版本，
优化vue项目：（解决html 缓存 和 网页加载速度过慢问题）
weixin_45379180的博客
07-12 779
【代码】优化vue项目：（解决html 缓存 和 网页加载速度过慢问题）
vue优化首屏加载时间优化-cdn引入第三方包
路虽远行则将至，事虽难做则必成。
09-05 1758
为什么要进行首屏加载优化，因为随着我们静态资源和第三方包和代码增加，压缩之后包会越来越大随着网络的影响，在我们第一输入url请求资源时候，网络阻塞，加载时间长，用户体验不好仔细观察后就会发现，代码压缩之后并没有多大，大的都是项目自身，静态资源，第三方包除去代码层面我们可以通过静态图片网络请求，gzip压缩，CDN（第三方包引入方式），浏览器缓存当我们在本地开发，需要使用到别人的包的时候。通过npm下包。
vue2配置cdn加速
qq_18893835的博客
03-06 1284
vue脚手架打包的文件实在是太大了，特别是引入一些UI库之后，可以达到好几MB public/index.html main.js 根目录下新建一个vue.config.js module.exports = { // 设置打包文件相对路径 publicPath: "./", // 配置使用CDN configureWebpack: { externals: { vue: "Vue", axios: "a.
vue 项目首页加载速度优化以及解决首页白屏问题
郝峰vip的博客
12-14 1万+
Vue项目优化首页加载速度达到秒开以及解决首页白屏问题
vue项目首次打开加载速度慢的优化方案
热门推荐
xiasohuai的博客
06-18 1万+
一、路由懒加载（必须的） ️vue-cli 3.0 模式就使用了Babel，我们需要添加syntax-dynamic-import插件，才能使 Babel 可以正确地解析语法。 // 安装插件 syntax-dynamic-import cnpm install --save-dev @babel/plugin-syntax-dynamic-import // 修改babel.config.js module.exports = { "presets": [ "@vue/app" ..
Vue项目卡顿慢加载？这些优化技巧告诉你！
web全栈开发的博客
06-30 1万+
前端开发是一个快速发展的领域，每天都会涌现出新的技术和工具。在实现功能的同时，开发人员面临着许多挑战如代码可维护性，加载时间,访问速度,构建速度等问题。这些挑战可能直接影响网站的性能和用户体验，需要采取一些优化措施来改善问题。在本文中，我们将探讨一些前端项目优化的具体措施，旨在帮助开发人员提高项目效率，升级用户体验。综合各方面来说 就是。
Vue项目部署后页面加载首次很慢的优化方案
Korbin的博客
06-14 7058
1.前言 将Vue项目打包后部署到服务器下的Nginx后，发现页面首次加载时会特别慢，甚至到了20s~30s，通过浏览器调试工具可以查看加载慢的资源文件，其中最主要的是js文件和一些图片。明确了导致加载慢的原因，下面总结了一些对这些资源文件加载的优化方案： 2.图片优化方案 1.直接将图片压缩到尽可能小、尽可能可以忍受的极限。 2.使用CDN加速资源，国内常见的CDN资源加速服务提供商如：七牛云； 3.将图片压缩为webp格式，兼容性不好。另外就是我在引入webp时编译出错，也就没做过多的探索了；
vue项目webpack打包app.js文件太大导致首次加载非常缓慢的解决方案
YanGo的博客
06-05 1万+
对于初学者接触vue项目的时候，一些小项目可能没注意到这一点。对于中大型的项目，打包出来的app.js都有好几M了，导致首次加载的时候非常缓慢，我因为公司需求而急于接收的vue的项目就遇到这个问题，搜索了很多童鞋的方案，大家都比较推荐gzip静态资源压缩，这个需要结合服务器端的配置。 首先打开/config/index.js文件 但是先别急于动手安装，因为 npm install --sa...
Vue-cli 3 打包优化：路由懒加载与代码压缩
在Vue.js开发过程中，使用vue-cli 3可以极大地提升开发效率。然而，为了提高应用的性能和加载速度，我们需要对打包过程进行优化。以下是一些关键的vue-cli 3配置打包优化要点： 1. 路由懒加载： 路由懒加载允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值