蓝绿部署通过并行运行新旧版本实现无缝更新，前端以index.html为入口，结合版本化构建（如webpack生成带contenthash的文件），在CDN或服务器切换流量指向，确保更新时用户无感知，出错可快速回滚。
JS蓝绿部署，简单来说，就是让你的网站或应用在更新时，用户感觉不到任何停顿。它通过巧妙地切换新旧版本的代码路径，比如在CDN或Web服务器上做个指向切换，来达到平滑过渡的目的。
JS蓝绿部署的核心思路，其实就是你每次发布新版本，不是直接覆盖旧的，而是先准备好一套全新的“绿色”环境，等确认没问题了，再把流量悄悄地切换过去。这样，即便新版本有问题，也能立马切回“蓝色”的旧版本，用户几乎无感知。
具体到前端（尤其是单页应用SPA），这个“切换”通常围绕
index.html文件展开，因为它是应用的入口。
-
版本化构建： 我们每次构建项目时，都会给输出的JS、CSS文件加上独特的哈希值（例如
app.1234abcd.js
）。这确保了新旧文件不会因为浏览器缓存而混淆。同时，index.html
会引用这些带哈希值的新文件。// webpack.config.js 示例 output: { filename: '[name].[contenthash].js', chunkFilename: '[name].[contenthash].js', path: path.resolve(__dirname, 'dist'), }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', // 这个是关键，后面会用 }), ],
