nf-state 轻量级状态管理的 demo

--- theme: channing-cyan highlight: agate --- ## 打包设置首先打包的时候，使用hash生成文件名，这样每次发包，文件名称都会不一样。我们把新的文件发布到服务器上面就行。我个人习惯这样做设置 ```ts defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), } }, base: url, // 打包配置 build: { sourcemap: true, outDir: 'distp', //指定输出路径 assetsDir: 'static/img/', // 指定生成静态资源的存放路径 brotliSize: false, // 不统计 target: 'esnext', minify: 'esbuild', // 混淆器，terser构建后文件体积更小 rollupOptions: { output: { manualChunks(id) { if (id.includes('node_modules')) { const arr = id.toString().split('node_modules/')[1].split('/') switch(arr[0]) { case '@naturefw': // 自然框架 case '@popperjs': case '@vue': // eslint-disable-next-line no-fallthrough case 'element-plus': // UI 库 case '@element-plus': // 图标 return '_' + arr[0] // break default : return '__vendor' // break } } }, chunkFileNames: 'static/js1/[name]-[hash].js', entryFileNames: 'static/js2/[name]-[hash].js', assetFileNames: 'static/[ext]/[name]-[hash].[ext]' } } } ``` ## index.html 的自动更新上面说的是js、css文件的更新方式，但是首页（index.html）如何更新？默认情况下html文件是会被浏览器缓存的，如果客户已经浏览了index.html，那么下次打开，浏览器会直接从本地加载，可能不会从服务器更新。那么如何确保 index.html 也一定会自动更新呢？我们可以使用 http-equiv 来设置不缓存。 ```html nf-state 轻量级状态管理的 demo ``` 这样设置后 index.html 不会被缓存，而其体积也不大（2KB），不缓存也不会有影响。那么里面的js、css会不会被缓存呢？我们测试一下看看。 [nf-state 轻量级状态管理的 demo](https://naturefw-code.gitee.io/nf-rollup-state/) ![150更新版本.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca9089fdb58843d0a6e2a65768c042f9~tplv-k3u1fbpfcp-watermark.image?) js、css 都被缓存了。这样既可以及时更新项目版本，又可以利用浏览器的缓存，提升显示速度。只需要用户关掉网页重新打开即可，或者按一下F5。