recherche

Maison >interface Web >js tutoriel >CDN accélère le processus de création de fichiers d'empaquetage React Webpack

CDN accélère le processus de création de fichiers d'empaquetage React Webpack

php中世界最好的语言
php中世界最好的语言original
2018-04-12 16:54:192690parcourir

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utilisez adb shell+node.js pour réaliser que Douyin récupère automatiquement les enveloppes rougesArticle suivant：Utilisez adb shell+node.js pour réaliser que Douyin récupère automatiquement les enveloppes rouges

Articles Liés

Voir plus