这是一个基于 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')
}
}
})
]
参数说明
SkeletonWebpackPlugin
- webpackConfig 必填，渲染 skeleton 的 webpack 配置对象
- insertAfter 选填，渲染 DOM 结果插入位置，默认值为字符串
'<div id="app">'- 也可以传入
Function，方法签名为insertAfter(entryKey: string): string，返回值为挂载点字符串
- 也可以传入
- quiet 选填，在服务端渲染时是否需要输出信息到控制台
- router 选填 SPA 下配置各个路由路径对应的 Skeleton
- mode 选填 路由模式，两个有效值
history|hash - routes 选填 路由数组，其中每个路由对象包含两个属性：
- path 路由路径
- skeletonId Skeleton DOM 的 id
- mode 选填 路由模式，两个有效值
- minimize 选填 SPA 下是否需要压缩注入 HTML 的 JS 代码
[DEPRECATED] SkeletonWebpackPlugin.loader
开发模式已经支持 hot reload，该参数不再需要。
示例
Lavas 创建的项目
如果你的项目是使用 Lavas 创建的，可参考Lavas Appshell模版和Lavas MPA模版 中的应用。
vue-cli 创建的项目
如果你的项目是使用 vue-cli 创建的，可以参考基于 Vue Webpack 模板应用这个插件的例子： SPA 中单个 Skeleton：
修改的文件如下：build/webpack.prod.conf.js、build/webpack.dev.conf.js
添加的文件如下：build/webpack.skeleton.conf、src/utils/Skeleton.vue、src/utils/enter-skeleton.js
SPA 中多个 Skeleton:
简单的 Vue + Webpack 应用
或者你可以参考examples下的测试用例，其中也包含了单页和多页情况，具体如下：
-
/examples/simple最简单的 SPA，使用一个 Skeleton -
/examples/multi-skeletonSPA，根据路由使用多个 Skeleton -
/examples/multipageMPA，每个页面使用各自的 Skeleton，使用multipage-webpack-plugin -
/examples/multipage2MPA，每个页面使用各自的 Skeleton，使用多个html-webpack-plugin -
/examples/multipage3MPA，page1 使用 Skeleton，page2 不使用 -
/examples/webpack4SPA，使用webpack@4
常见问题
Webpack4
插件需要使用与 Webpack 版本配套的插件进行样式分离。
- Webpack 4 中使用
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，在开发模式下是默认关闭样式分离的，因此需要修改，可参考修改方案。
