Maison > Article > interface Web > React Webpack fichiers packagés (tutoriel détaillé)
React Webpack fichiers packagés (tutoriel détaillé)
- 亚连original
- 2018-06-05 15:39:182713parcourir
Ci-dessous, je partagerai avec vous une explication détaillée de l'utilisation de CDN pour accélérer les fichiers packagés de React Webpack. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.
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 téléchargée, par exemple (correspondant à ce qui précède configuration de téléchargement ):
publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"
Package
NODE_ENV=production node_modules/webpack/bin/webpack.js -p
Par exemple, les fichiers packagés incluent
index.html 12345678.src.js 12345678.src.css ...
À ce stade, le fichier index.html généré après l'emballage a introduit des fichiers 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"> <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 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;";
}
}Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
Articles connexes :
Utiliser Native dans React pour implémenter le composant de visualisation d'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!