vue线上项目加载速度提升
vue线上项目加载速度提升
biaoblog.cn 个人博客
发布于 2022-08-11 19:55:32
发布于 2022-08-11 19:55:32
1.通过把一些资源改成cdn
首先在index.js里面引入一些cnd资源（vue,vueRoute,elementUI）
js 里面加了备用服务器的资源
<!-- 引入 cdn 资源 -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
//<![CDATA[
if (typeof Vue == "undefined") {
document.write(
unescape(
"%3Cscript src='https://cdn.staticfile.org/vue/2.6.10/vue.min.js' %3E%3C/script%3E"
)
);
} //]]>
</script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>
//<![CDATA[
if (typeof VueRouter == "undefined") {
document.write(
unescape(
"%3Cscript src='https://cdn.staticfile.org/vue-router/3.0.7/vue-router.min.js' %3E%3C/script%3E"
)
);
} //]]>
</script>
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
<script>
//<![CDATA[
if (typeof ELEMENT == "undefined") {
document.write(
unescape(
"%3Cscript src='https://cdn.staticfile.org/element-ui/2.10.1/index.js' %3E%3C/script%3E"
)
);
} //]]>
</script>css
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>完事后在main.js中 把一些Import的资源取消
// import Vue from "vue";
// import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";
注意的是 通过cdn资源引用的vue-router的名称变成：VueRouter
原来就叫Router然后还需要在webpack.base.conf.js中配置（跟entry同级）
externals: {
vue: "Vue",
"vue-router": "VueRouter",
"element-ui": "ELEMENT"
},CND的就这么多
2.路由懒加载设置 import
然后就是路由的懒加载设置：
{
path: "/mager_mood",
name: "mager_mood",
component: mager_mood,
},改为：
{
path: "/mager_mood",
name: "mager_mood",
component: () => import("@/xxx/xxxx/mager_mood")
},3.设置首屏加载图片
设置了这么多 速度快了很多 但是首次加载进来依然会有白屏的情况
没关系 我们设置一个首屏图片即可：
在最外层的index.html的app里面：添加
<div id="app">
<style>
#firstScreenPage {
width: 100vw;
height: 100vh;
background-color: white;
position: relative;
top: 0;
left: 0;
z-index: 999;
text-align: center;
font-size: 20px;
}
#firstScreenPage img {
margin: auto;
padding: 100px;
width: 500px;
display: block;
}
</style>
<div id="firstScreenPage">
<img src="./static/loading2.gif" alt="" />
</div>
</div>完事，用户体验蹭一下起来了
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录