資訊專欄INFORMATION COLUMN
摘要：前言在單頁應(yīng)用中可能會(huì)有一些特殊情況，需要不同的路由下顯示不同的首骨屏。一般這種需求可以后端動(dòng)態(tài)生成包含首骨屏代碼實(shí)現(xiàn)，但如果想要純前端實(shí)現(xiàn)的話目前并未發(fā)現(xiàn)比較好的庫或插件。例如首骨屏模板
前言
在單頁應(yīng)用中可能會(huì)有一些特殊情況，需要不同的路由下顯示不同的首骨屏。比如新聞列頁和新聞詳情頁。一般這種需求可以后端動(dòng)態(tài)生成包含首骨屏代碼HTML實(shí)現(xiàn)，但如果想要純前端實(shí)現(xiàn)的話目前并未發(fā)現(xiàn)比較好的庫或插件。在公司的一個(gè)項(xiàng)目中有這種需求的情況，因此自己手動(dòng)弄了一個(gè)webpack插件 -- spa-skeleton-webpack-plugin。
插件實(shí)現(xiàn)一般首骨屏插件其實(shí)是用html-webpack-plugin插件提供的鉤子在webpack打包時(shí)將首骨屏的樣式和HTML寫進(jìn)index.html里面，本插件實(shí)現(xiàn)也是利用了html-webpack-plugin的鉤子，然后將js代碼和模板寫入html，頁面加載完后執(zhí)行js代碼再渲染模板。這種做法會(huì)比直接在后臺(tái)動(dòng)態(tài)生成html慢一點(diǎn)點(diǎn)，且HTML會(huì)比較大。
插件引入npm install --save-dev spa-skeleton-webpack-plugin
項(xiàng)目地址：https://github.com/JhonMr/spa...
插件配置webpack3 請(qǐng)用
const SkeletonPlugin = require("html-webpack-plugin/src/skeletonPlugin3.js");
并在webpack.base.conf.js里引入，配置如下邊代碼的new SkeletonPlugin()
webpack4 代碼
const HtmlWebpackPlugin = require("html-webpack-plugin")
const SkeletonPlugin = require("spa-skeleton-webpack-plugin")
const path = require("path")
const webpackConfig = {
entry: "index.js",
output: {
path: __dirname + "/dist",
filename: "index.bundle.js"
},
plugin: [
new HtmlWebpackPlugin({
// Your HtmlWebpackPlugin config
}),
new SkeletonPlugin({
wrapEl: "#app", // 包裹元素
mode: "hash", //router模式(or history),
templates: [ // routes: 路由，格式可以是字符串、數(shù)組、正則。 template:首骨屏代碼路徑。
{routes: "/", template: path.resolve(__dirname, `${customPath1}`},
{routes: ["/search", "/list"], template: path.resolve(__dirname, `${customPath2}`},
{
routes: [
{pattern: "^/detail?id=d+", attributes: "g"} // RegExp config
],
template: path.resolve(__dirname, `${customPath2}`
}
]
})
]
}
添加 在包裹元素下面，如VUE項(xiàng)目的包裹標(biāo)簽#app下面。
例如：
cli3
Index Skeleton
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106539.html
摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實(shí)踐中還是遇到需要學(xué)習(xí)的部分。包括因?yàn)榭赡苄畔⒚娌蝗?，?duì)插件源碼進(jìn)行了詳細(xì)解讀，希望對(duì)于將要在項(xiàng)目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實(shí)踐中還是...
摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實(shí)踐中還是遇到需要學(xué)習(xí)的部分。包括因?yàn)榭赡苄畔⒚娌蝗?，?duì)插件源碼進(jìn)行了詳細(xì)解讀，希望對(duì)于將要在項(xiàng)目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實(shí)踐中還是...
摘要：另外，單頁應(yīng)用因?yàn)閿?shù)據(jù)前置到了前端，不利于搜索引擎的抓取。所以我們需要對(duì)自己的單頁應(yīng)用進(jìn)行一些優(yōu)化。 前言 最近秋招之余空出時(shí)間來按自己的興趣動(dòng)手做了一個(gè)項(xiàng)目，一個(gè)基于vue-cli3.0, vue，typescript的移動(dòng)端pwa，現(xiàn)在趁熱打鐵，將這個(gè)項(xiàng)目從開發(fā)到部署整個(gè)過程記錄下來，并將從這個(gè)項(xiàng)目中學(xué)習(xí)到的東西分享出來，如果大家有什么意見或補(bǔ)充也可以在評(píng)論區(qū)提出。先介紹一下這個(gè)項(xiàng)...
摘要：可以通過的提供的直接控制模擬大部分用戶操作來進(jìn)行或者作為爬蟲訪問頁面來收集數(shù)據(jù)。 ??骨架屏是在頁面數(shù)據(jù)尚未加載完成前先給用戶展示出頁面的大致結(jié)構(gòu)，直到請(qǐng)求數(shù)據(jù)返回后再顯示真正的頁面內(nèi)容；隨著單頁應(yīng)用（ SPA ）的越來越流行，單頁應(yīng)用的用戶體驗(yàn)也越來越得到前端開發(fā)者的關(guān)注；為了優(yōu)化用戶體驗(yàn)，在數(shù)據(jù)到達(dá)用戶之前，往往會(huì)在頁面上加上 loading 的效果，而現(xiàn)在，越來越多的場(chǎng)景傾向于使...
閱讀 705·2023-04-25 22:50
閱讀 1535·2021-10-08 10:05
閱讀 988·2021-09-30 09:47
閱讀 1924·2021-09-28 09:35
閱讀 827·2021-09-26 09:55
閱讀 3420·2021-09-10 10:51
閱讀 3433·2021-09-02 15:15
閱讀 3300·2021-08-05 09:57
