wap文字网页游戏网站排名seo软件
web/
2025/10/9 11:56:01/
文章来源:
wap文字网页游戏,网站排名seo软件,如何进入网站,WordPress如何恢复最初在开发webapp的时候总是会受到首屏加载时间过长的影响#xff0c;主流的解决方法是在载入完成之前显示loading图效果#xff0c;而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题#xff0c;越来越多的APP采用了“骨架屏”的方式去提升… 在开发webapp的时候总是会受到首屏加载时间过长的影响主流的解决方法是在载入完成之前显示loading图效果而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题越来越多的APP采用了“骨架屏”的方式去提升用户体验。 一、分析Vue页面的内容加载过程 vue项目中的入口index.html只有简单的内容 !DOCTYPE html
html langzh-CN
headmeta http-equivContent-Type contenttext/html;charsetUTF-8titleDocument/title
/head
bodydiv idroot /divscript typetext/javascript srcbundle.js/script/body
/body
/html 当js执行完之后会用vue渲染成的dom将div#root完全替换掉。我们在div#root中加入模拟骨架屏在Chrome开发者工具调整网速 div idroot这里是骨架屏
/div 由此可知将骨架屏内容直接插入div#root中即可实现骨架屏。 二、使用vue-server-renderer来实现骨架屏 我们需要骨架屏也是一个单独的.vue文件因此我们需要用到vue-server-renderer。对vue服务端渲染有所了解的同学一定知道这个插件能够将vue项目在node端打包成一个bundle然后由bundle生成对应的html。首先是生成项目 .
├── build
│ ├── webpack.config.client.js
│ └── webpack.config.server.js
├── src
│ └── views
│ ├── index
│ │ └── index.vue
│ ├── skeleton
│ │ └── skeleton.vue
│ ├── app.vue
│ ├── index.js
│ └── skeleton-entry.js
├── index.html
└── skeleton.js
└── package.json vue的服务端渲染一般会用vue-server-renderer将整个项目在node端打包成一份bundle而这里我们只要一份有骨架屏的html所以会有一个单独的骨架屏入口文件skeleton-entry.js,一个骨架屏打包webpack配置webpack.config.server.js而skeleton.js作用是将webpack打包出来的bundle写入到index.html中。 //skeleton-entry.js
import Vue from vue
import Skeleton from ./views/skeleton/skeleton.vueexport default new Vue({components: {Skeleton},template: skeleton /
}) //webpack.config.server.js
const path require(path)
const { VueLoaderPlugin } require(vue-loader)
const VueSSRServerPlugin require(vue-server-renderer/server-plugin)module.exports {mode: process.env.NODE_ENV,target: node,entry: path.join(__dirname, ../src/skeleton-entry.js),output: {path: path.join(__dirname, ../server-dist),filename: server.bundle.js,libraryTarget: commonjs2},module: {rules: [{test: /\.vue$/,loader: vue-loader},{test: /\.css$/,use: [vue-style-loader,css-loader]} ]},externals: Object.keys(require(../package.json).dependencies),resolve: {alias: {vue$: vue/dist/vue.esm.js}},plugins: [new VueLoaderPlugin(),new VueSSRServerPlugin({filename: skeleton.json})]
} 其中骨架屏的webpack配置因为是node端所以需要target: node libraryTarget: commonjs2。在VueSSRServerPlugin中指定了其输出的json文件名。当执行webpack会在/server-dist目录下生成一个skeleton.json文件,这个文件记载了骨架屏的内容和样式会提供给vue-server-renderer使用。 //skeleton.js
const fs require(fs)
const path require(path)const createBundleRenderer require(vue-server-renderer).createBundleRenderer// 读取skeleton.json以index.html为模板写入内容
const renderer createBundleRenderer(path.join(__dirname, ./server-dist/skeleton.json), {template: fs.readFileSync(path.join(__dirname, ./index.html), utf-8)
})// 把上一步模板完成的内容写入替换index.html
renderer.renderToString({}, (err, html) {fs.writeFileSync(index.html, html, utf-8)
}) 注意作为模板的html文件需要在被写入内容的位置添加!--vue-ssr-outlet--占位符本例子在div#root里写入div idroot!--vue-ssr-outlet--/div 最后执行node skeleton就能实现vue的骨架屏。最终的index.html: !DOCTYPE html
html langzh-CN
headmeta http-equivContent-Type contenttext/html;charsetUTF-8meta http-equivX-UA-Compatible contentIEedge,chrome1meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0titleDocument/title
style data-vue-ssr-ida7049cb4:0
.skeleton[data-v-61761ff8] {position: relative;height: 100%;overflow: hidden;padding: 15px;box-sizing: border-box;background: #fff;
}
.skeleton-nav[data-v-61761ff8] {height: 45px;background: #eee;margin-bottom: 15px;
}
.skeleton-swiper[data-v-61761ff8] {height: 160px;background: #eee;margin-bottom: 15px;
}
.skeleton-tabs[data-v-61761ff8] {list-style: none;padding: 0;margin: 0 -15px;display: flex;flex-wrap: wrap;
}
.skeleton-tabs-item[data-v-61761ff8] {width: 25%;height: 55px;box-sizing: border-box;text-align: center;margin-bottom: 15px;
}
.skeleton-tabs-item span[data-v-61761ff8] {display: inline-block;width: 55px;height: 55px;border-radius: 55px;background: #eee;
}
.skeleton-banner[data-v-61761ff8] {height: 60px;background: #eee;margin-bottom: 15px;
}
.skeleton-productions[data-v-61761ff8] {height: 20px;margin-bottom: 15px;background: #eee;
}
/style/head
bodydiv idrootdiv data-server-renderedtrue classskeleton page data-v-61761ff8div classskeleton-nav data-v-61761ff8/div div classskeleton-swiper data-v-61761ff8/div ul classskeleton-tabs data-v-61761ff8li classskeleton-tabs-item data-v-61761ff8span data-v-61761ff8/span/lili classskeleton-tabs-item data-v-61761ff8span data-v-61761ff8/span/lili classskeleton-tabs-item data-v-61761ff8span data-v-61761ff8/span/lili classskeleton-tabs-item data-v-61761ff8span data-v-61761ff8/span/lili classskeleton-tabs-item data-v-61761ff8span data-v-61761ff8/span/lili classskeleton-tabs-item data-v-61761ff8span data-v-61761ff8/span/lili classskeleton-tabs-item data-v-61761ff8span data-v-61761ff8/span/lili classskeleton-tabs-item data-v-61761ff8span data-v-61761ff8/span/li/ul div classskeleton-banner data-v-61761ff8/div div classskeleton-productions data-v-61761ff8/divdiv classskeleton-productions data-v-61761ff8/divdiv classskeleton-productions data-v-61761ff8/divdiv classskeleton-productions data-v-61761ff8/divdiv classskeleton-productions data-v-61761ff8/divdiv classskeleton-productions data-v-61761ff8/div/div/div
/body
/html 尾声 文章开头小米商城手机页面就是用的这样的方法不同的是它的骨架屏是一个base64的图片。 更多关于vue-server-renderer内容请戳vue-ssr相关demo转载自https://segmentfault.com/a/1190000014963269 转载于:https://www.cnblogs.com/hongsusu/p/9439152.html
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/89617.shtml
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!