vue页面重新加载,vue 首屏加载优化
对于所有的SPA项目，尤其是移动端的SAP项目，首屏的加载速度一定是绕不过去的话题。以下文章主要介绍Vue页面首次加载优化的相关信息，有需要的朋友可以参考一下。
目录
前言1。图像优化2。禁止产生。地图文件3。路由懒加载4。将4.cdn引入公共图书馆。终极法宝GZIP压缩6。利用vue-router总结页面的惰性加载。
前言
今天在网上发布了自己的博客系统，只是把build dist文件夹扔在了云服务器的根目录下，导致第一次进入页面非常慢，需要优化。
优化前的大小
1.图片优化
之前为了更简单，背景图片直接在assets里扔了一个jpg，导致加载这个图片需要十几秒，所以我把图片上传到空间，然后用网址代替。
2.禁止生成.map文件
有很多。build dist文件夹中的映射文件。这些文件主要用来帮助在线调试代码，检查风格。因为基本都是本地调试，不需要在线修改，所以禁止生成这些文件。
在vue.config.js中添加这句话.
3.路由懒加载
\
4.cdn引入公共库
link rel= style sheet href= https://un pkg . com/element-ui/lib/theme-chalk/index . CSS rel= external no follow
script src= https://cdn . bootcss . com/vue/2 . 6 . 11/vue . min . js /script
script src= https://UNP kg . com/element-ui/lib/index . js /script
script src= https://cdn . bootcss . com/vuex/3 . 0 . 1/vuex . min . js /script
script src= https://cdn . bootcss . com/vue-router/3 . 0 . 1/vue-router . min . js /script
script src= https://cdn . bootcss . com/axios/0 . 19 . 2/axios . min . js /script
//cdn简介
configureWebpack: {
外部：{
vue: Vue ，
元素-ui :元素，
“vue路由器”:“vue路由器”，
vuex: Vuex ，
axios: axios
}
}
网上说可以注释掉导入，自己操作会报错。还有材料说你不评论就不装。
最后一个文件操作一次，效果显著，app.js还是很大的。
5.终极法宝 GZIP压缩
有了这种感觉之后，前四步就是小菜一碟，直接把1.4m的app.js做成100多kb，剩下的就不值一提了。
configureWebpack: config={
返回{
//配置cdn
外部：{
vue: Vue ，
元素-ui :元素，
“vue路由器”:“vue路由器”，
vuex: Vuex ，
axios: axios
},
//配置gzip压缩
插件：[
新的CompressionWebpackPlugin({
测试：新的正则表达式( \。(jscss)$ )，
门槛：10240，
最小比率：0.8
})
],
}
}
服务器也应该匹配它，否则你不会知道GZIP文件。
//配置GZIP压缩模块
const compression=require( compression )；
//在所有中间件之前引入
app . use(compression())；
最垃圾的服务器都飞过上面的优化了！
相比之下，结果很明显！
6.利用vue-router进行页面的懒加载（lazy load）
这里页面的延迟加载意味着如果我现在访问页面A，我只会请求页面A中的内容，而不会请求其他页面中的内容。
具体怎么做，vue-router官网已经写的很清楚了。如果你需要看一看，你就会明白：
通过vue路由器实现页面的惰性加载
总结
关于Vue页面首次加载优化的这篇文章到此为止。更多相关Vue页面首次加载优化内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。