webpack-dps-spa-plugin

单页面多路由骨架屏插件

AutoDpsPlugin

Kind: global class

new AutoDpsPlugin(options)

自动渲染骨架屏插件

| Param | Description | | --- | --- | | options | 插件配置 | | options.server | 渲染骨架屏本地服务配置 | | options.server.port | 本地服务端口，默认从8000开始寻找 | | options.server.proxy | 本地服务反向代理配置与devServer.proxy一致，如果为value为函数则为中间件，否则为http-proxy-middleware | | options.insertEl | 骨架屏元素插入到html的父标签，默认 #skeleton | | options.routeMode | 路由模式，默认 history | | options.limit | 同时渲染骨架屏路由数量，默认 5 | | options.staticDir | 打包输出目录（index.html输出目录），默认 项目根目录下的dist目录 | | options.enableAutoSkeletonRoutes | 是否采用自动配置路由，必须使用 auto-routing 插件 | | options.skeletonRoutes | 需要渲染的骨架屏路由配置，enableAutoSkeletonRoutes 为 false 可用 | | options.await | 等待时间（ms），默认0 |

options.skeletonRoutes

| Param | Description | | --- | --- | | name | 必须和路由定义的name一致 | | path | 匹配当前路由的正则 | | pathname | 访问路由的path地址，例如: /mn/demo | | skeletonId | 骨架屏路由ID，唯一即可 |

dps.config.js 额外参数

| Param | Description | | --- | --- | | inject | 注入window变量值 | | injectProperty | 注入window变量属性名 | | launch | puppeteer 启动参数配置 |

使用

webpack chainWebpack 添加插件

config.plugin('AutoDpsPlugin')
    .use(AutoDpsPlugin, [{
      enableAutoSkeletonRoutes: true,
      limit: 5,
      server: {}
    }]);

enableAutoSkeletonRoutes

添加 vue-cli-auto-routing 插件,在路由页面配置<route>块

<route>
{
    "meta": {
        "skeleton": true
    }
}
</route>

or

<route>
{
    "meta": {
        "skeleton": {
            "name": "home",
            "path": /^\/mn\/home/
            "pathname": "/mn/home",
            "skeletonId": "home"
        }
    }
}
</route>

自定义返回数据

dpsServer: {
    proxy: {
        '^/app-gateway/demo': (req, res) => {
            res.json({code: 200, data: {}});
            res.end();
        }
    }
}