React Webpack fichiers packagés (tutoriel détaillé)-js tutoriel-php.cn

React Webpack fichiers packagés (tutoriel détaillé)

亚连

Libérer： 2018-06-05 15:39:18

original

2759 Les gens l'ont consulté

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/"

Copier après la connexion

Package

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

Copier après la connexion

Par exemple, les fichiers packagés incluent

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

Copier après la connexion

À 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>

Copier après la connexion

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 &#39;index.html&#39; | 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"

Copier après la connexion

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

Copier après la connexion

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.