使用React JS CDN开发并部署至生产环境的相关问题咨询

1、该种部署方式存在哪些弊端？ #

• 运行性能损耗大：当前你使用@babel/standalone在用户浏览器端实时编译JSX代码，每一个用户访问页面都要完整执行一次编译流程，相比本地预编译的代码，首屏加载速度会慢30%以上，用户量较大或者弱网场景下会出现长时间白屏。
• 外部依赖不可控：所有核心依赖（React、MUI、Babel、谷歌字体）都依赖公网第三方CDN服务，一旦CDN服务故障、对应版本资源下架、或者生产环境是内网无法访问公网，应用会直接加载失败无法使用。
• 代码安全风险高：所有业务代码都是明文传输，任何人都可以直接查看、爬取甚至篡改你的业务逻辑，若涉及敏感业务规则会有极高的泄露风险。
• 资源冗余严重：引入的是完整的组件库、框架包，大量你没有用到的功能也会被加载，没有做按需裁剪，额外增加了不必要的资源加载体积。
• 服务兼容性风险：QlikSense自带的Web服务器有独立的权限控制、路由拦截规则，后期如果需要新增前端路由、调用QlikSense开放接口，很容易出现跨域、权限被拦截的问题。

2、上线前需要重点考量哪些相关因素？ #

• 权限匹配：先确认QlikSense的资源访问权限规则和你的应用预期的用户权限是否匹配，避免出现未授权用户可以直接访问React应用的问题，若应用内调用QlikSense接口，还要做二次身份校验。
• 网络适配：确认生产环境所有用户的网络都可以正常访问你用到的全部外部CDN资源，若为内网部署，所有外部资源必须本地化存放。
• 性能达标：测试不同网络环境下的首屏加载时间、白屏时长、交互响应速度，确保符合用户使用要求。
• 异常兜底：补充资源加载失败、JS运行报错的兜底逻辑，避免出现异常时用户无感知的白屏情况。
• 缓存规则：确认QlikSense服务器的静态资源缓存策略，避免后续更新代码后，用户端依然加载旧缓存导致功能异常。

3、如何对现有代码进行压缩处理？ #

根据你的维护需求可以选择两种处理方案：

轻量改造方案（不改变现有开发模式） #

1. 移除浏览器端实时编译逻辑：本地安装@babel/cli、@babel/preset-react依赖，提前将App.js、AppPage.js以及HTML内联的JSX代码预编译为普通ES5 JS代码，编译命令参考：babel ./src --out-dir ./dist --presets @babel/preset-react。
2. 压缩混淆代码：使用terser工具对编译后的JS代码做压缩处理，删除注释、空格，简化变量名，命令参考：terser ./dist/App.js -o ./dist/App.min.js -c -m，同时可以用cssnano对CSS资源做压缩。
3. 外部资源本地化：将所有用到的第三方CDN资源下载到本地，和你的业务代码一起部署到QlikSense服务器，既减少外部依赖风险，也可以按需合并资源减少请求数量。

标准工程化方案（适合长期迭代维护） #

将现有代码迁移到标准React工程脚手架，生产环境执行构建命令即可自动完成所有压缩优化工作：

1. 用Vite或者Create React App创建空项目，将现有App.js、AppPage.js的业务代码迁移到项目中。
2. 生产环境执行npm run build命令，工具会自动完成Tree Shaking（裁剪未用到的代码）、JS/CSS压缩混淆、静态资源加哈希后缀解决缓存问题等全部优化工作。
3. 将生成的dist目录下的所有文件上传到QlikSense服务器的静态资源目录即可运行。

内容的提问来源于stack exchange，提问作者gangata arun