webpack單頁應用多路由多骨架屏插件

pingan8787 發布于2019-08-26 10:39 / 2181人閱讀

摘要：前言在單頁應用中可能會有一些特殊情況，需要不同的路由下顯示不同的首骨屏。一般這種需求可以后端動態生成包含首骨屏代碼實現，但如果想要純前端實現的話目前并未發現比較好的庫或插件。例如首骨屏模板

前言

在單頁應用中可能會有一些特殊情況，需要不同的路由下顯示不同的首骨屏。比如新聞列頁和新聞詳情頁。一般這種需求可以后端動態生成包含首骨屏代碼HTML實現，但如果想要純前端實現的話目前并未發現比較好的庫或插件。在公司的一個項目中有這種需求的情況，因此自己手動弄了一個webpack插件 -- spa-skeleton-webpack-plugin。

插件實現

一般首骨屏插件其實是用html-webpack-plugin插件提供的鉤子在webpack打包時將首骨屏的樣式和HTML寫進index.html里面，本插件實現也是利用了html-webpack-plugin的鉤子，然后將js代碼和模板寫入html，頁面加載完后執行js代碼再渲染模板。這種做法會比直接在后臺動態生成html慢一點點，且HTML會比較大。

插件引入

npm install --save-dev spa-skeleton-webpack-plugin

項目地址：https://github.com/JhonMr/spa...

插件配置

1.webpack插件配置

webpack3 請用

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: 路由，格式可以是字符串、數組、正則。 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}`
            }
        ]
    })
  ]
}

2.index.html配置

添加在包裹元素下面，如VUE項目的包裹標簽#app下面。
例如：

首骨屏模板



    Index Skeleton

GPU云服務器云服務器多路由表多應用多線程應用多頁面應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106539.html

【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學習的部分。包括因為可能信息面不全，對插件源碼進行了詳細解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏前言骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

huhud 2019-08-02 16:07 評論0 收藏0
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學習的部分。包括因為可能信息面不全，對插件源碼進行了詳細解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏前言骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

MkkHou 2019-08-23 14:07 評論0 收藏0
用vue從零開發和部署一款移動端pwa單頁應用

摘要：另外，單頁應用因為數據前置到了前端，不利于搜索引擎的抓取。所以我們需要對自己的單頁應用進行一些優化。前言最近秋招之余空出時間來按自己的興趣動手做了一個項目，一個基于vue-cli3.0, vue，typescript的移動端pwa，現在趁熱打鐵，將這個項目從開發到部署整個過程記錄下來，并將從這個項目中學習到的東西分享出來，如果大家有什么意見或補充也可以在評論區提出。先介紹一下這個項...

Channe 2019-07-25 14:28 評論0 收藏0
用純 DOM 的方式結合 Puppeteer 自動生成網頁骨架屏

摘要：可以通過的提供的直接控制模擬大部分用戶操作來進行或者作為爬蟲訪問頁面來收集數據。 ??骨架屏是在頁面數據尚未加載完成前先給用戶展示出頁面的大致結構，直到請求數據返回后再顯示真正的頁面內容；隨著單頁應用（ SPA ）的越來越流行，單頁應用的用戶體驗也越來越得到前端開發者的關注；為了優化用戶體驗，在數據到達用戶之前，往往會在頁面上加上 loading 的效果，而現在，越來越多的場景傾向于使...

BlackHole1 2019-08-23 12:19 評論0 收藏0