Webpack 在异常后刷新整个缓存：[PackFileCacheStrategy]: Cannot read property 'hasStartTime' of undefined

Question

我们有一个使用 Typescript 和 Vue 3.1.5 以及 Vue CLI 5.0.0-beta.2 的项目，后者又使用 Webpack 5.47.0。对于开发，

vue-cli-service serve

的启动非常慢（很多依赖项）。所以我们激活了 Webpack 文件系统缓存：

configureWebpack: {
  cache: {
    type: "filesystem",
  },
},

现在它在 Linux 和 MacOS 上运行良好。但在 Windows 上，它通常在记录异常后刷新整个缓存：

[webpack.cache.PackFileCacheStrategy] 从中恢复包 C:\Users\Smith\ws\kl\kl-前端 ode_modules.cache\webpack\default-development.pack 失败：类型错误：无法读取未定义的属性“hasStartTime”

有人知道问题出在哪里吗？也许与文件名有关？我们还有一项工作是删除然后重新创建一些 API 文件，这些文件通常具有相同的内容。这可以摆脱缓存吗？

Answer 1

您看到的错误消息与 Webpack 的文件系统缓存有关。根据Webpack 文档，Webpack 将避免哈希和时间戳文件，假设版本是唯一的并将其用作快照（用于内存和文件系统缓存）。允许未使用的缓存条目保留在文件系统缓存中的时间（以毫秒为单位）默认为一个月（webpack.js.org）。

在检测 Webpack 5 的文件系统缓存 (github.com) 中的更改文件时似乎存在问题。在运行 npm run serve 或 yarn serve (stackoverflow.com) 之前，您可以尝试通过运行 npm run clean 或 yarn clean 来清除缓存。

希望对您有所帮助

Answer 2

您遇到的问题可能与以下几点有关：兼容性问题、文件系统缓存失效或缓存处理不当。

兼容性问题：由于您使用的是测试版 Vue CLI，它可能与底层 Webpack 版本存在一些兼容性问题。要排除这种情况，您可以尝试降级到 Vue CLI 的稳定版本，看看问题是否仍然存在。

文件系统缓存失效：当你提到你有一个删除和重新创建一些 API 文件的作业时，Webpack 缓存可能由于这些更改而失效。如果作业在开发服务器处于活动状态时运行，则可能会导致 Webpack 重建缓存。

缓存处理不当：Webpack 5 引入了一种新的文件系统缓存，有时会导致问题。作为解决方法，您可以尝试使用

memory

缓存而不是

filesystem

缓存：

    configureWebpack: {
  cache: {
    type: "memory",
  },
},

此配置更改会将缓存存储在内存中，这也可以加快构建过程。但是，请记住，此缓存不会在开发服务器重新启动之间持续存在。

如果以上方案都不行，可以尝试提供更细粒度的缓存配置选项，比如下面的

  configureWebpack: {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename], // Add this file to the build dependencies
    },
    // Manage cache location for Windows
    cacheDirectory: process.platform === 'win32'
      ? path.resolve(process.env.LOCALAPPDATA, 'my-app-name/.cache/webpack')
      : undefined,
  },
},

此配置显式设置

buildDependencies

并管理 Windows 平台的缓存位置。在 Windows 上将路径调整为所需的缓存目录。

如果问题仍然存在，请考虑在 Vue CLI 或 Webpack 存储库上创建问题以从其维护者那里获得帮助。