webpack-dps-spa-plugin
单页面多路由骨架屏插件
AutoDpsPlugin
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();
}
}
}