{"id":13508696,"url":"https://github.com/lavas-project/vue-skeleton-webpack-plugin","last_synced_at":"2025-04-09T05:10:29.692Z","repository":{"id":41168821,"uuid":"94740812","full_name":"lavas-project/vue-skeleton-webpack-plugin","owner":"lavas-project","description":"Lavas webpack plugin: skeleton solution for PWA webshell","archived":false,"fork":false,"pushed_at":"2018-12-25T09:05:09.000Z","size":180,"stargazers_count":885,"open_issues_count":40,"forks_count":128,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-02T04:03:43.607Z","etag":null,"topics":["skeleton","vue","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lavas-project.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-19T05:47:26.000Z","updated_at":"2025-02-18T13:37:14.000Z","dependencies_parsed_at":"2022-07-21T04:49:42.597Z","dependency_job_id":null,"html_url":"https://github.com/lavas-project/vue-skeleton-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lavas-project%2Fvue-skeleton-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lavas-project%2Fvue-skeleton-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lavas-project%2Fvue-skeleton-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lavas-project%2Fvue-skeleton-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lavas-project","download_url":"https://codeload.github.com/lavas-project/vue-skeleton-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980837,"owners_count":21027808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["skeleton","vue","webpack"],"created_at":"2024-08-01T02:00:57.137Z","updated_at":"2025-04-09T05:10:29.666Z","avatar_url":"https://github.com/lavas-project.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"vue-skeleton-webpack-plugin\n===================\n\n[![npm version](https://badge.fury.io/js/vue-skeleton-webpack-plugin.svg)](https://badge.fury.io/js/vue-skeleton-webpack-plugin)\n[![Build Status](https://travis-ci.org/lavas-project/vue-skeleton-webpack-plugin.svg?branch=master)](https://travis-ci.org/lavas-project/vue-skeleton-webpack-plugin)\n\n[![NPM](https://nodei.co/npm/vue-skeleton-webpack-plugin.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/vue-skeleton-webpack-plugin/)\n\n这是一个基于 Vue 的 webpack 插件，为单页/多页应用生成骨架屏 skeleton，减少白屏时间，在页面完全渲染之前提升用户感知体验。\n\n支持 webpack@3 和 webpack@4，支持 Hot reload。\n\n## 基本实现\n\n参考了[饿了么的 PWA 升级实践](https://huangxuan.me/2017/07/12/upgrading-eleme-to-pwa/)一文，\n使用服务端渲染在构建时渲染 skeleton 组件，将 DOM 和样式内联到最终输出的 html 中。\n\n另外，为了开发时调试方便，会将对应路由写入`router.js`中，可通过`/skeleton`路由访问。\n\n插件具体实现可参考[我的这篇文章](https://xiaoiver.github.io/coding/2017/07/30/%E4%B8%BAvue%E9%A1%B9%E7%9B%AE%E6%B7%BB%E5%8A%A0%E9%AA%A8%E6%9E%B6%E5%B1%8F.html)\n\n## 使用方法\n\n安装：\n```bash\nnpm install vue-skeleton-webpack-plugin\n```\n\n运行测试用例：\n```bash\nnpm run test\n```\n\n在 webpack 中引入插件：\n```js\n// webpack.conf.js\nimport SkeletonWebpackPlugin from 'vue-skeleton-webpack-plugin';\n\nplugins: [\n    new SkeletonWebpackPlugin({\n        webpackConfig: {\n            entry: {\n                app: resolve('./src/entry-skeleton.js')\n            }\n        }\n    })\n]\n```\n\n## 参数说明\n\n### SkeletonWebpackPlugin\n\n- webpackConfig *必填*，渲染 skeleton 的 webpack 配置对象\n- insertAfter *选填*，渲染 DOM 结果插入位置，默认值为字符串 `'\u003cdiv id=\"app\"\u003e'`\n    - 也可以传入 `Function`，方法签名为 `insertAfter(entryKey: string): string`，返回值为挂载点字符串\n- quiet *选填*，在服务端渲染时是否需要输出信息到控制台\n- router *选填* SPA 下配置各个路由路径对应的 Skeleton\n    - mode *选填* 路由模式，两个有效值 `history|hash`\n    - routes *选填* 路由数组，其中每个路由对象包含两个属性：\n        - path 路由路径 `string|RegExp`\n        - skeletonId Skeleton DOM 的 id `string`\n- minimize *选填* SPA 下是否需要压缩注入 HTML 的 JS 代码\n\n### [DEPRECATED] SkeletonWebpackPlugin.loader\n\n开发模式已经支持 hot reload，该参数不再需要。\n\n## 示例\n\n### Lavas 创建的项目\n\n如果你的项目是使用 Lavas 创建的，可参考[Lavas Appshell模版](https://github.com/lavas-project/lavas-template-vue-appshell)和[Lavas MPA模版](https://github.com/lavas-project/lavas-template-vue-mpa) 中的应用。\n\n### vue-cli 创建的项目\n\n如果你的项目是使用 vue-cli 创建的，可以参考基于 Vue Webpack 模板应用这个插件的例子：\nSPA 中单个 Skeleton：\n* [Github](https://github.com/xiaoiver/skeleton-demo)\n* [Online Demo](https://xiaoiver.github.io/skeleton-demo/#/)\n\nSPA 中多个 Skeleton:\n* [Github](https://github.com/xiaoiver/multi-skeleton-demo)\n* [Online Demo](https://xiaoiver.github.io/multi-skeleton-demo/#/)\n\n### 简单的 Vue + Webpack 应用\n\n或者你可以参考[examples](https://github.com/lavas-project/vue-skeleton-webpack-plugin/tree/master/examples)下的测试用例，其中也包含了单页和多页情况，具体如下：\n* `/examples/simple` 最简单的 SPA，使用一个 Skeleton\n* `/examples/multi-skeleton` SPA，根据路由使用多个 Skeleton\n* `/examples/multipage` MPA，每个页面使用各自的 Skeleton，使用 `multipage-webpack-plugin`\n* `/examples/multipage2` MPA，每个页面使用各自的 Skeleton，使用多个 `html-webpack-plugin`\n* `/examples/multipage3` MPA，page1 使用 Skeleton，page2 不使用\n* `/examples/webpack4` SPA，使用 `webpack@4`\n* `/examples/vue-cli3` SPA，使用 `vue-cli@3` 创建的项目\n\n## 常见问题\n\n### Webpack4\n\n插件需要使用与 Webpack 版本配套的插件进行样式分离。\n\n* Webpack 4 中使用 `mini-css-extract-plugin` 而非 `extract-text-webpack-plugin`，因此需要安装。\n* 安装 `vue-loader@^15.0.0` 并正确配置，可以参考 [vue-loader 文档](https://vue-loader.vuejs.org/zh/guide/extract-css.html#webpack-4)。\n\n### 未开启样式分离\n\n运行出现如下错误：\n\u003e node_modules\\memory-fs\\lib\\MemoryFileSystem.js:114\n\u003e throw new MemoryFileSystemError(errors.code.ENOENT, _path);\n\n由于插件使用了 Vue 服务端渲染在构建时渲染 skeleton 组件，将 DOM 和样式内联到最终输出的 html 中。\n因此在给 skeleton 使用的 Webpack 配置对象中需要开启**样式分离**，将 skeleton 使用的样式从 JS 中分离出来。\n\n在 Webpack 中样式分离是通过 [extract-text-webpack-plugin](https://doc.webpack-china.org/plugins/extract-text-webpack-plugin) 插件实现的。因此在 `webpack.skeleton.config` 中必须正确配置该插件。\n\n以使用 vue-cli 创建的项目为例，如果你的 `webpack.skeleton.conf` 继承自 `webpack.base.conf`，在开发模式下是默认关闭样式分离的，因此需要修改，可参考[修改方案](https://github.com/lavas-project/vue-skeleton-webpack-plugin/issues/11#issuecomment-377845362)。\n\n### 压缩注入的 HTML 和 CSS\n\n使用 `html-webpack-plugin` 的 `minify` 选项，可以参考 [#36](https://github.com/lavas-project/vue-skeleton-webpack-plugin/issues/36)。\n\n### 使用多个 Skeleton 时无法匹配当前路由路径？\n\n用于匹配每个 `Skeleton` 的 `path` 选项可以填写字符串或者**正则**。\n如果想匹配 `/page1?key=value` 这样的路由路径，可以直接写正则 `path: /^\\/page1/`。可以参考 [#45]","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flavas-project%2Fvue-skeleton-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flavas-project%2Fvue-skeleton-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flavas-project%2Fvue-skeleton-webpack-plugin/lists"}