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

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

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

create-react-app appName

yarn start

react项目启动 项目初始化效果图

2.项目打包。

打包效果图 打包生成文件列表

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

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

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

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

配置文件paths.js

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

js文件路径 css文件路径

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

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

const path = require('path');

const fs = require('fs');

const qiniu = require('qiniu');

function uploadFile(formUploader, uploadToken, key, localFile, putExtra) {

return new Promise(

(rosolve, reject) => { formUploader.putFile(uploadToken, key, localFile, putExtra, function (respErr, respBody, respInfo) {

if (respErr) { throw respErr; reject(respErr) }

if (respInfo.statusCode == 200) { console.log(respBody); }

else { console.log(respInfo.statusCode); console.log(respBody); } rosolve(respBody) }); })}

const qiniuConfig ={ accessKey: "xxxxxxx", secretKey: "xxxx", bucket: "levenx-app"}

const options = { scope: qiniuConfig.bucket}

var mac = new qiniu.auth.digest.Mac(qiniuConfig.accessKey, qiniuConfig.secretKey);

var putPolicy = new qiniu.rs.PutPolicy(options);

var uploadToken = putPolicy.uploadToken(mac);

var config = new qiniu.conf.Config();

config.zone = qiniu.zone.Zone_z0

var formUploader = new qiniu.form_up.FormUploader(config);

var putExtra = new qiniu.form_up.PutExtra();

let files = fs.readdirSync(path.join(__dirname, 'build'));

const ignores = ['qh', 'robots.txt', 'index.html'];

files.forEach(async name => { if (ignores.includes(name)) { return; }

let localFile = path.join(__dirname, `build/${name}`);

var key = name;

formUploader.putFile(uploadToken, key, localFile, putExtra,

function (respErr, respBody, respInfo) { if (respErr) { throw respErr; }

if (respInfo.statusCode == 200) { console.log(respBody); }

else { console.log(respInfo.statusCode); console.log(respBody); } });

// let result = await uploadFile(formUploader,uploadToken,key,localFile,putExtra)

// console.log("result:",result)})