详解vue项目首页加载速度优化
凡是做SPA的项目，特别是移动端的SAP项目，首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉，如果各位有更好的方案，不吝赐教。
1: 针对第三方js库的优化
我们项目里用到的第三方js库主要有：vue, vue-router, vuex, axio, 我们还用到了qiniu。大家知道这些依赖库的js文件都会被一起打包到vender那个js文件里面，如果这些你的第三方依赖库很多，很大的话，那就会导致vender这个文件很大，那首屏加载的速度肯定会被拖慢。
针对这个问题我们的解决方案是，用文档的cdn文件代替，而不用打包到vender里面去。具体的做法是：
1: 在index.html里面引入依赖库js文件
// index.html <script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
2: 去掉第三方js的import,因为在第一步已经通过script标签引用进来了。
3: 把第三方库的js文件从打包文件里去掉
这一步的做法就是利用webpack的externals。具体做法就是在 build/webpack.base.conf.js文件的module里面与rules同层加入externals：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍vue如何优化首页的加载速度？相关面试题，主要包含被问及vue如何优化首页的加载速度？时的应答技巧和注意事项，需要的朋友参考一下 补充下2楼： ssr直出， webpack压缩HTML/CSS/JS， 首屏css单独提取内联， 关键资源Proload， 图片：不缩放，使用webp、小图片base64，iconfont， gzip, dns-prefetch， 静态资源单独域名，去掉c
-
本文向大家介绍浅谈VUE单页应用首屏加载速度优化方案，包括了浅谈VUE单页应用首屏加载速度优化方案的使用技巧和注意事项，需要的朋友参考一下 单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方（如OSS），减小服务器压力 按需加载三方资源，如iview,建议按需引入iview中的组件 使
-
如题，vue2 项目，基于的ruoyi进行二次开发，现在ci/cd构建每次都要10多分钟，本地第一次启动也很慢，有哪些方法可以提高构建速度呢？
-
本文向大家介绍浅谈vue首屏加载优化，包括了浅谈vue首屏加载优化的使用技巧和注意事项，需要的朋友参考一下 本文介绍了浅谈vue首屏加载优化，分享给大家，具体如下： 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-
-
本文向大家介绍记一次vue-webpack项目优化实践详解，包括了记一次vue-webpack项目优化实践详解的使用技巧和注意事项，需要的朋友参考一下 项目现状 项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了 使用webpack-bundle-analyzer分析了一下各个文件所占用的比例
-
本文向大家介绍SPA首屏加载速度慢的怎么解决？相关面试题，主要包含被问及SPA首屏加载速度慢的怎么解决？时的应答技巧和注意事项，需要的朋友参考一下 1.通过Gzip压缩 2.使用路由懒加载 3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去，减小项目打包后的大小 4.使用SSR渲染