Lavas webpack plugin: skeleton solution for PWA webshell
这是一个基于 Vue 的 webpack 插件,为单页/多页应用生成骨架屏 skeleton,减少白屏时间,在页面完全渲染之前提升用户感知体验。
支持 webpack@3 和 webpack@4,支持 Hot reload。
参考了饿了么的 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: {
entry: {
app: resolve('./src/entry-skeleton.js')
}
}
})
]
'<div id="app">'
Function
,方法签名为 insertAfter(entryKey: string): string
,返回值为挂载点字符串history|hash
string|RegExp
string
开发模式已经支持 hot reload,该参数不再需要。
如果你的项目是使用 Lavas 创建的,可参考Lavas Appshell模版和Lavas MPA模版 中的应用。
如果你的项目是使用 vue-cli 创建的,可以参考基于 Vue Webpack 模板应用这个插件的例子: SPA 中单个 Skeleton:
SPA 中多个 Skeleton:
或者你可以参考examples下的测试用例,其中也包含了单页和多页情况,具体如下:
/examples/simple
最简单的 SPA,使用一个 Skeleton/examples/multi-skeleton
SPA,根据路由使用多个 Skeleton/examples/multipage
MPA,每个页面使用各自的 Skeleton,使用 multipage-webpack-plugin
/examples/multipage2
MPA,每个页面使用各自的 Skeleton,使用多个 html-webpack-plugin
/examples/multipage3
MPA,page1 使用 Skeleton,page2 不使用/examples/webpack4
SPA,使用 webpack@4
/examples/vue-cli3
SPA,使用 vue-cli@3
创建的项目插件需要使用与 Webpack 版本配套的插件进行样式分离。
mini-css-extract-plugin
而非 extract-text-webpack-plugin
,因此需要安装。vue-loader@^15.0.0
并正确配置,可以参考 vue-loader 文档。运行出现如下错误:
node_modules\memory-fs\lib\MemoryFileSystem.js:114 throw new MemoryFileSystemError(errors.code.ENOENT, _path);
由于插件使用了 Vue 服务端渲染在构建时渲染 skeleton 组件,将 DOM 和样式内联到最终输出的 html 中。 因此在给 skeleton 使用的 Webpack 配置对象中需要开启样式分离,将 skeleton 使用的样式从 JS 中分离出来。
在 Webpack 中样式分离是通过 extract-text-webpack-plugin 插件实现的。因此在 webpack.skeleton.config
中必须正确配置该插件。
以使用 vue-cli 创建的项目为例,如果你的 webpack.skeleton.conf
继承自 webpack.base.conf
,在开发模式下是默认关闭样式分离的,因此需要修改,可参考修改方案。
使用 html-webpack-plugin
的 minify
选项,可以参考 #36。
用于匹配每个 Skeleton
的 path
选项可以填写字符串或者正则。
如果想匹配 /page1?key=value
这样的路由路径,可以直接写正则 path: /^\/page1/
。可以参考 [#45]