前端缓存技术

1. 前端部署如何优化静态资源缓存

前端部署优化静态资源缓存主要通过在前端代码中加入版本号或哈希值以及强制刷新页面来实现。具体步骤如下：

每次代码更新时，使用前端代码构建工具（如 webpack）生成新的版本号或哈希值，这会使浏览器自动请求最新的代码。手动指定时，每次更新代码，修改版本号或哈希值。

为了防止用户停留在旧页面而使用旧版本的代码，可以强制刷新页面。方法有在页面头部加入提示让用户手动刷新，或通过 JS 强制刷新页面。

加入版本号或哈希值确保用户使用最新代码，强制刷新页面确保所有静态资源也更新为最新版本。这样可以避免用户使用旧版本的代码，提升用户体验。

在使用 webpack 生成哈希值时，配置文件中使用 [contenthash] 占位符表示文件内容的哈希值。当文件内容变化，哈希值也随之变化，确保每次代码更新都会生成新文件名。

运行 webpack 构建代码后，文件输出到目标目录，这样在每次构建时，webpack 会自动为静态资源生成哈希值，并将哈希值插入到模板文件中。

在构建工具中生成版本号的方法包括使用插件，如在 webpack 中，通过指定插件为静态资源添加版本号。在模板文件中引用静态资源时，使用生成的版本号，确保用户获取最新静态资源。

在前端框架中，如 Vue.js，可以使用 vue.config.js 文件的 filenameHashing 选项添加版本号到静态资源文件名，或使用 chunkhash 选项为文件名添加 chunkhash 值。

通过以上方法，前端部署可以有效优化静态资源缓存，确保用户始终访问最新版本的代码和静态资源，提升用户体验和网站性能。

2. vue前端离开页面前 防止表单数据丢失

要防止用户在Vue前端离开页面前表单数据丢失，可以利用Vue的keepalive组件进行表单内容的缓存。

具体实现方法如下：

1. 利用keepalive组件：

   • keepalive是Vue的内置组件，用于缓存不活跃的组件实例，而不是销毁它们。这样，当用户返回页面时，表单数据仍然保留在内存中。

2. 在App.vue中添加keepalive标签：

   • 将需要缓存的表单页面组件包裹在keepalive标签内。可以通过include属性指定需要缓存的组件名称，或者通过exclude属性排除不需要缓存的组件。

3. 在路由文件中添加meta属性：

   • 可以在路由配置中为需要缓存的页面添加meta属性，例如meta: { keepAlive: true }，以便在编程时动态控制keepalive的行为。

4. 在跳转的新页面中添加beforeRouteLeave生命周期钩子：

   • 在用户离开当前表单页面时，可以在beforeRouteLeave钩子中执行一些操作，例如提示用户保存表单数据，或者自动保存表单数据到localStorage等持久化存储中。但请注意，这里主要讨论的是利用keepalive缓存表单数据，因此通常不需要在beforeRouteLeave中保存数据到持久化存储，除非有额外需求。

注意事项：

• keepalive只会缓存其直接子组件，而不会递归地缓存所有后代组件。因此，如果表单页面组件嵌套在其他组件内部，需要确保keepalive直接包裹表单页面组件。
• 使用keepalive时，需要注意组件的生命周期函数。特别是activated和deactivated这两个生命周期函数，它们会在组件被激活和停用时调用。这可以用于在组件重新激活时执行一些初始化操作，或者在组件停用时执行一些清理操作。

通过上述方法，可以有效地防止用户在Vue前端离开页面前表单数据丢失的问题，提升用户体验。