Home  >  Article  >  Web Front-end  >  CDN accelerates react webpack packaging file process

CDN accelerates react webpack packaging file process

php中世界最好的语言
php中世界最好的语言Original
2018-04-12 16:54:192631browse

This time I will bring you CDN to speed up the react webpack packaging file process. What are the precautions for CDN to speed up the react webpack packaging file process? Here is a practical case, let’s take a look.

This article does not introduce the basic configuration of webpack. If you have any questions about the basic configuration, please refer to the official documentation.

1. Configure webpack.config.js

Change output.publicPath to the cdn address uploaded to, for example (corresponding to the upload configuration above):

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

Packing

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

The files packaged in this way include

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

At this time, the cdn file has been introduced into the index.html file generated after packaging.

<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">
 <p id="root"></p>
<script src="https://your_base_cdn_url/production/cdn/12345678.src.js"></script></body>
</html>

2. Upload files to CDN

Write a script to upload cdn in the deployment script, for example:

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"

Upload the homepage file to the server and use nginx proxy

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;";
 }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to deal with the compatibility of easyui date and time box in IE

vue determines whether the input content is present Space

FileReader implements local preview before uploading pictures

The above is the detailed content of CDN accelerates react webpack packaging file process. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn