vue3+vite+webgl

Question

1.设置缓存后，浏览器每次刷新都会从服务器加载一次build.data。
2.如何设置缓存，把文件缓存到浏览器中，刷新后从缓存中获取

index.html

  <meta http-equiv="Cache-Control" content="max-age=7200" />

nginx

 proxy_cache_path /home/tool levels=1:2 keys_zone=my_cache:500m max_size=10g inactive=60m use_temp_path=off;

 location ~* \.(.data)$ {
             # 启用缓存
            try_files $uri $uri/ =404;
            add_header Cache-Control "public, no-transform, max-age=31536000";
            expires 1y;
            proxy_cache my_cache;
            proxy_cache_valid 200 304 12h;
            proxy_cache_key $scheme$proxy_host$request_uri;

             #指定文件路径  指向了build.data 文件
            alias /
        }

Answer 1

引自免费微信小程序：皆我百晓生

首先，我们需要了解Vue 3 + Vite + WebGL这个项目的结构和需求。这个项目是一个使用Vue 3和Vite框架开发的WebGL应用程序。应用程序需要从服务器加载build.data文件，并且浏览器在每次刷新时都会从服务器加载这个文件。

为了解决这个问题，我们需要在Vite配置文件中设置缓存，并确保在刷新时从缓存中获取build.data文件。

1. 在Vite配置文件中设置缓存

在vite.config.js文件中，我们需要设置缓存。首先，导入defineConfig函数，然后使用defineConfig创建一个配置对象。在配置对象中，我们需要设置build选项，并将其cache属性设置为true。这将启用缓存。

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    cache: true
  }
})

1. 确保build.data文件在缓存中

接下来，我们需要确保build.data文件在缓存中。在vite.config.js文件中，我们需要使用rollupOptions选项来配置Webpack插件。我们将使用rollup-plugin-esbuild插件来压缩和打包代码。

import { defineConfig } from 'vite'
import { createRollupPlugin } from 'rollup-plugin-esbuild'

export default defineConfig({
  plugins: [
    createRollupPlugin()
  ],
  build: {
    // ...
  }
})

这将启用rollup-plugin-esbuild插件，压缩和打包代码。

1. 确保build.data文件在每次刷新时都从缓存中获取

现在，我们需要确保在每次刷新时都从缓存中获取build.data文件。在vite.config.js文件中，我们需要配置serve选项，以便在每次刷新时都从缓存中获取build.data文件。

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  serve: {
    open: true, // 打开浏览器
    headers: {
      // ...
    },
    changeUniverse: false, // 禁用文件系统更改缓存
    error: false // 禁用错误页面
  },
  build: {
    // ...
  }
})

这将确保在每次刷新时都从缓存中获取build.data文件。

1. 配置Nginx以启用缓存

最后，我们需要配置Nginx以启用缓存。在nginx配置文件中，我们需要设置缓存路径和缓存策略。

proxy_cache_path /home/tool levels=1:2 keys_zone=my_cache:500m max_size=10g inactive=60m use_temp_path=off;

location ~* \.(.data)$ {
  # 启用缓存
  try_files $uri $uri/ =404;
  add_header Cache-Control "public, no-transform, max-age=31536000";
  expires 1y;
  proxy_cache my_cache;
  proxy_cache_valid 200 304 12h;
  proxy_cache_key $scheme$proxy_host$request_uri;
}

这将启用build.data文件的缓存，并将其缓存到名为my_cache的缓存中。

现在，当浏览器刷新时，它将从缓存中获取build.data文件，而不是从服务器加载。这将提高应用程序的性能和响应速度。