vue-skeleton-webpack-plugin

这是一个基于 Vue 的 webpack 插件，为单页/多页应用生成骨架屏 skeleton，减少白屏时间，在页面完全渲染之前提升用户感知体验。

基本实现

参考了饿了么的 PWA 升级实践一文，使用服务端渲染在构建时渲染 skeleton 组件，将 DOM 和样式内联到最终输出的 html 中。

另外，为了开发时调试方便，会将对应路由写入router.js中，可通过/skeleton路由访问。

插件具体实现可参考我的这篇文章

使用方法

安装：

npm install vue-skeleton-webpack-plugin

运行测试用例：

npm run test

在 webpack 中引入插件：

// webpack.conf.js
import SkeletonWebpackPlugin from 'vue-skeleton-webpack-plugin';

plugins: [
    new SkeletonWebpackPlugin({
        webpackConfig: require('./webpack.skeleton.conf')
    })
]

在单页应用中开发模式下自动插入路由规则：

// webpack.dev.conf.js
import SkeletonWebpackPlugin from 'vue-skeleton-webpack-plugin';

module: {
    rules: [
        SkeletonWebpackPlugin.loader({
            resource: resolve('src/entry.js'),
            options: {
                entry: 'skeleton',
                routePathTemplate: '/skeleton',
                importTemplate: 'import Skeleton from \'./Skeleton.vue\';'
            }
        })
    ]
}

参数说明

SkeletonWebpackPlugin

webpackConfig 必填，渲染 skeleton 的 webpack 配置对象
insertAfter 选填，渲染 DOM 结果插入位置，默认值为'<div id="app">'

SkeletonWebpackPlugin.loader

参数分为两类：

webpack模块规则，skeleton 对应的路由将被插入路由文件中，所以需要指定一个或多个路由文件，使用resource/include/test皆可指定 loader 应用的文件。
options 将被传入 loader 中的参数对象，包含以下属性：
- entry 必填，支持字符串和数组类型，对应页面入口的名称
- importTemplate 选填，引入 skeleton 组件的表达式，默认值为'import [nameCap] from \'@/pages/[nameCap].vue\';'
- routePathTemplate 选填，路由路径，默认值为'/skeleton-[name]'
- insertAfter 选填，路由插入位置，默认值为'routes: ['

在importTemplate和routePathTemplate中可以使用以下占位符：

[name] 和entry保持一致
[nameCap] entry首字母大写

例如使用以下配置，将向路由文件中插入'import Page1 from \'@/pages/Page1.vue\';'和'import Page2 from \'@/pages/Page2.vue\';'两条语句。同时生成/skeleton-page1和/skeleton-page2两条路由规则。

{
    entry: ['page1', 'page2'],
    importTemplate: 'import [nameCap] from \'@/pages/[nameCap].vue\';',
    routePathTemplate: '/skeleton-[name]'
}

示例

具体应用示例可参考Lavas Appshell模版和Lavas MPA模版。

或者参考examples下的测试用例，其中也包含了单页和多页情况。