CDN accélère le processus de création de fichiers d'empaquetage React Webpack-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-12 16:54:19

original

2691 Les gens l'ont consulté

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

Copier après la connexion

Emballage

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

Copier après la connexion

Les fichiers ainsi regroupés incluent

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

Copier après la connexion

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>

Copier après la connexion

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"

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

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!