webpack-dps-spa-plugin

0.1.3 • Public • Published

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();
        }
    }
}

Readme

Keywords

Package Sidebar

Install

npm i webpack-dps-spa-plugin

Weekly Downloads

3

Version

0.1.3

License

none

Unpacked Size

19.4 kB

Total Files

8

Last publish

Collaborators

  • zhouxianjun