vue-skeleton-webpack-plugin

这是一个基于 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 路由路径 string|RegExp
    • skeletonId Skeleton DOM 的 id string
• minimize 选填 SPA 下是否需要压缩注入 HTML 的 JS 代码

[DEPRECATED] SkeletonWebpackPlugin.loader

开发模式已经支持 hot reload，该参数不再需要。

示例

Lavas 创建的项目

如果你的项目是使用 Lavas 创建的，可参考Lavas Appshell模版和Lavas MPA模版 中的应用。

vue-cli 创建的项目

如果你的项目是使用 vue-cli 创建的，可以参考基于 Vue Webpack 模板应用这个插件的例子： SPA 中单个 Skeleton：

• Github
• Online Demo

SPA 中多个 Skeleton:

• Github
• Online Demo

简单的 Vue + Webpack 应用

或者你可以参考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 创建的项目

常见问题

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，在开发模式下是默认关闭样式分离的，因此需要修改，可参考修改方案。

压缩注入的 HTML 和 CSS

使用 html-webpack-plugin 的 minify 选项，可以参考 #36。

使用多个 Skeleton 时无法匹配当前路由路径？

用于匹配每个 Skeleton 的 path 选项可以填写字符串或者正则。 如果想匹配 /page1?key=value 这样的路由路径，可以直接写正则 path: /^\/page1/。可以参考 [#45]