CDN accelerates react webpack packaging file process-JS Tutorial-php.cn

This time I will bring you CDN to speed up the react webpack packaging file process. What are theprecautionsfor 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/"

Copy after login

Packing

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

Copy after login

The files packaged in this way include

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

Copy after login

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

title

Copy after login

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 <
        
         Copy after login

Upload the homepagefileto 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;"; } }

Copy after login

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!