Maison > Article > interface Web > CDN accélère le processus de création de fichiers d'empaquetage React Webpack
Cette fois, je vais vous présenter CDN pour accélérer le processus d'empaquetage des fichiers React Webpack. Quelles sont les précautions que CDN accélère le processus d'empaquetage des fichiers React Webpack. Ce qui suit est un cas pratique, prenons. un regard.
Cet article ne présente pas la configuration de base de webpack. Si vous avez des questions sur la configuration de base, veuillez vous référer à la documentation officielle.
1. Configurez webpack.config.js
Remplacez output.publicPath par l'adresse cdn vers laquelle vous avez téléchargé, par exemple (correspondant à la configuration de téléchargement ci-dessus) :
publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"
Emballage
NODE_ENV=production node_modules/webpack/bin/webpack.js -p
Les fichiers ainsi regroupés incluent
index.html 12345678.src.js 12345678.src.css ...
A ce stade, le fichier cdn a été introduit dans le fichier index.html généré après 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. Téléchargez des fichiers sur CDN
Écrivez un script pour télécharger le cdn dans le script de déploiement, par exemple :
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"
Téléchargez le fichier de la page d'accueil sur le serveur et utilisez le proxy 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;"; } }
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site PHP chinois !
Lecture recommandée :
Comment gérer la compatibilité de la boîte de date et d'heure easyui dans IE
vue détermine si le contenu d'entrée est présent Espace
FileReader implémente l'aperçu local avant de télécharger des images
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!