create-react-app脚手架项目打包CDN部署

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了create-react-app脚手架项目打包CDN部署相关的知识,希望对你有一定的参考价值。

参考技术A 因为react项目多为SPA项目,用于生产部署时,存在首屏响应过慢导致用户难以忍受等待时间从而流失问题。一般导致首页响应过慢的原因有很多,网络问题是其中之一。本文记录通过七牛云免费CDN部署react项目。

1.create-react-app创建react项目,并启动项目。

2.项目打包。

此时如果只是普通部署,不要求体验效果时,把build文件下的文件拷贝到静态服务器即可。

接下来考虑如何静态文件CDN部署。

3.修改webpack文件,打包文件的引用路径省车过为CDN路径。

     1. config文件夹下paths.js(修改pathname为cnd的域名)

    2. config文件夹下webpack.config.js 修改output文件名,使用绝对路径。

修改后重新打包,发现index.html中引入css,js的路径皆改成cdn路径。

附加: 上传打包文件至七牛云CDN。(upload.js)

以上是关于create-react-app脚手架项目打包CDN部署的主要内容,如果未能解决你的问题,请参考以下文章

vite创建项目,cra创建项目,vue-cli创建项目

vite创建项目,cra创建项目,vue-cli创建项目

React 脚手架

使用 create-react-app 脚手架搭建 react 项目,释放配置文件且注入 less 依赖

vite

React 从零搭建项目 使用 create-react-app脚手架