无需插件的饿了么骨架屏自动化方案

2024-02-11 18:31:46

引言

骨架屏是一种常见的网页优化技术，它通过在页面加载时展示一个骨架结构，来提升用户体验。传统上，骨架屏需要通过插件或复杂的构建配置来实现。本文介绍一种基于饿了么骨架屏方案的自动化生成网页骨架屏的方案，该方案无需插件，利用Chrome扩展程序实现自动化，从而简化了骨架屏的生成过程。

传统方案的局限性

page-skeleton-webpack-plugin是生成骨架屏的一种流行方案，但它依赖于puppeteer这个依赖项。puppeteer是一个重量级的库，会增加项目开发阶段的笨重性。此外，并不是所有的页面都需要骨架屏，使用page-skeleton-webpack-plugin会带来不必要的性能开销。

饿了么骨架屏方案

饿了么骨架屏方案是一个轻量级的骨架屏生成方案，它不需要额外的依赖项。该方案的原理是利用CSS变量来控制骨架屏的样式，通过JavaScript动态生成骨架屏的内容。

Chrome扩展程序自动化

为了避免使用插件，本文采用Chrome扩展程序来实现骨架屏的自动化生成。Chrome扩展程序可以与网页内容交互，我们可以利用它来动态生成饿了么骨架屏。

具体步骤

安装饿了么骨架屏方案：
```
npm install elemefe/skeleton
```

创建Chrome扩展程序：

创建一个新的Chrome扩展程序项目。
在manifest.json文件中，添加以下权限：
```
"permissions": ["<all_urls>"]
```

在background.js文件中，编写以下代码：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.status === "complete") {
    chrome.tabs.executeScript(tabId, {
      code: `
        (function() {
          const skeleton = new Skeleton({
            container: document.body,
            elements: ['img', 'iframe']
          });
          skeleton.render();
        })();
      `
    });
  }
});