小编Pav*_*lov的帖子

使用 Webpack 5 模块联合，如果远程入口被修改，你不需要重新部署主模块/应用程序，当浏览器请求时，将加载最新版本的模块。

我想知道：由于远程 URL 保持不变（例如http://localhost:8081/remoteEntry.js），浏览器可能会缓存文件和每次加载主模块时加载的缓存版本。另一方面，如果您为远程条目添加缓存破坏，您将没有缓存。

假设有一个使用 Webpack 5 Module federation 的具有微前端架构的应用程序。有一个远程微前端，其配置如下：

output: {
  publicPath: "http://localhost:8081/",
},
plugins: [
  new ModuleFederationPlugin({
    name: "app1",
    filename: "remoteEntry.js",
    exposes: {
      "./Component1": "./src/Component1",
      "./someModule1": "./src/someModule1",
    },
  })
]

然后主模块配置：

output: {
  publicPath: "http://localhost:8080/",
},
plugins: [
  new ModuleFederationPlugin({
    name: "mainApp",
    filename: "remoteEntry.js",
    remotes: {
      app1: "app1@http://localhost:8081/remoteEntry.js"
    }
  })
]

这两个模块都部署在生产环境中。

然后我改变Component1从app1和部署app1模块。

如何处理远程模块缓存？

更新：

在我的情况下，浏览器似乎使用启发式缓存（https://tools.ietf.org/html/rfc7234#section-4.2.2），remoteEntry.js因为服务器不提供明确的到期时间。

因此，当remoteEntry.js更新时，主应用程序仍会从缓存中加载该文件，该文件可以缓存数周。对于块，这不是问题，因为 webpack 可以配置为在文件名中包含哈希。

因为remoteEntry.js …

2020 年 1 月更新：应该使用https://github.com/Polymer/lit-element/pull/712进行修复

如果在组件的第一次渲染期间从方法undefined返回，然后与一些 css 类一起返回 lit-html TemplateResult（样式在静态 getter 方法中定义），则不会应用这些样式。renderLitElementstyles

有一个简单的JSFiddle可以重现此问题。

如果渲染方法在组件第一次渲染后返回lit-html TemplateResult，则<style>标签存在于shadow DOM中。

如果渲染方法undefined在第一次渲染后返回，<style>则标签在 Shadow DOM 中丢失，并且永远不会添加，即使在下一次渲染调用中 lit-html TemplateResult 也是如此。

对于Chrome来说它工作得很好。Safari和Firefox会重现该问题。

更新：应该用https://github.com/Polymer/lit-element/pull/712修复