利用CDN加速react webpack打包后的文件详解-偶像资源网

此文不介绍webpack基本配置，如果对基本配置有疑问请查阅官方文档。

1、配置webpack.config.js

将output.publicPath改成上传到的cdn地址, 例（对应上面上传配置）：

publicPath: \"https://your_base_cdn_url\" + process.env.NODE_ENV + \"/cdn/\"

打包

NODE_ENV=production node_modules/webpack/bin/webpack.js -p

这样打包后的文件例如有

index.html
12345678.src.js
12345678.src.css
...

此时，打包后生成的index.html文件中已经引入了cdn文件。

<html lang=\"en\">
<head>
 <title>title</title>
 <link href=\"https://your_base_cdn_url/production/cdn/12345678.src.css\" rel=\"external nofollow\" rel=\"stylesheet\">
</head>
<body id=\"body\">
 <div id=\"root\"></div>
<script src=\"https://your_base_cdn_url/production/cdn/12345678.src.js\"></script></body>
</html>

2、上传文件至CDN

在部署脚本中写一段上传cdn的脚本，例：

echo \"start uploading to upyun\"
HOST=v0.ftp.upyun.com
USER=uploader/your-username
PASS=your-password
cd build
files=$(ls | grep -v \'index.html\' | xargs)
ftp -inv $HOST <<EOF
user $USER $PASS
mkdir /$node_env/cdn
cd /$node_env/cdn
mput $files
bye
EOF
cd ..
echo \"finish uploading to upyun\"

将主页文件上传至服务器，使用nginx代理

server {
 listen 80;

 server_name your_server_name;
 access_log /var/log/nginx/your_project.log;
 root /var/www/your_project/production/current;

 location / {
 try_files $uri /index.html =404;
 add_header Pragma no-cache;
 expires -5y;
 }

 location ~ \\.(js|css)$ {
 expires 360000;
 add_header Cache-Control \"max-age=360000;\";
 }
}

访问http://your_server_name即可访问使用CDN加速后网页。

以上这篇利用CDN加速react webpack打包后的文件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

利用CDN加速react webpack打包后的文件详解

请登录后发表评论