【Webpack】使用 Webpack 和 LocalStorage 实现静态资源的离线缓存

基本流程

1）使用 Webpack 进行资源打包：

• 安装 Webpack 及其相关插件。
• 配置 Webpack，将静态资源打包到特定目录。

2）配置 Service Worker：

• 安装 workbox-webpack-plugin 插件。
• 配置 Service Worker，通过 Workbox 生成离线缓存资源列表。

3）使用 LocalStorage 缓存：

• 在代码中监听资源加载事件。
• 加载成功后，将资源存储到 LocalStorage。

4）离线加载资源：

• 在页面加载时，优先从 LocalStorage 中读取资源。
• 资源不存在时，从网络请求并更新到 LocalStorage。

示例代码（省略错误处理和复杂情况）：

// webpack.config.js example with workbox-webpack-plugin
const WorkboxPlugin = require('workbox-webpack-plugin');
module.exports = {
  // other settings
  plugins: [
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
};

// ServiceWorker.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => {
      return cache.addAll([
        '/index.html',
        '/main.js',
        '/styles.css',
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

// Example of storing resources in LocalStorage
function cacheResource(key, url) {
  fetch(url).then(response => {
    return response.text();
  }).then(data => {
    localStorage.setItem(key, data);
  });
}

扩展知识

优化：

1）缓存策略：

• 网络优先：优先从网络获取最新的资源，如失败则加载缓存。
• 缓存优先：优先加载缓存资源，如缓存未命中则访问网络。

2）版本管理：

• 每次发布新版本时，需要更新缓存中的资源，避免用户访问过期资源。可以通过添加版本号或哈希值来管理缓存。

3）LocalStorage 限制：

• LocalStorage 的存储空间有限，一般为 5MB 左右。因此，适合缓存小型静态资源或使用 IndexedDB。

4）IndexedDB 替代：

• 缓存较大或结构化数据时，使用 IndexedDB 比 LocalStorage 更加合适，而且可以异步操作。

5）资源压缩与优化：

• 使用 Webpack 的 file-loader、url-loader 等插件，将图像、字体等资源压缩后再存储，从而节约缓存空间。