ホームページ > 記事 > ウェブフロントエンド > CDN は React Webpack パッケージング ファイル プロセスを高速化します
CDN は React Webpack パッケージング ファイル プロセスを高速化します
- php中世界最好的语言オリジナル
- 2018-04-12 16:54:192628ブラウズ
今回は、React Webpack ファイルのパッケージ化プロセスを高速化するための CDN について説明します。CDN が React Webpack ファイルのパッケージ化プロセスを高速化するための 注意事項 について、実際のケースを見てみましょう。
この記事では webpack の基本的な構成については紹介しません。基本的な構成について質問がある場合は、公式ドキュメントを参照してください。
1. webpack.config.js を設定します
Output.publicPath をアップロード先の cdn アドレスに変更します。例 (上記のアップロード構成に対応):
publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"
パック
rreeこの方法でパッケージ化されたファイルには
NODE_ENV=production node_modules/webpack/bin/webpack.js -p
が含まれます この時点で、パッケージ化後に生成されるindex.htmlファイルにcdnファイルが導入されています。
りー2. CDN にファイルをアップロードします
デプロイメント スクリプトで cdn をアップロードするスクリプトを記述します。例:
index.html 12345678.src.js 12345678.src.css ...
ホームページ ファイル をサーバーにアップロードし、nginx プロキシ
<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>
を使用します。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
IEでeasyuiの日付と時刻ボックスの互換性に対処する方法
vueは、入力コンテンツにスペースが含まれているかどうかを判断します
FileReaderは、写真をアップロードする前にローカルプレビューを実装します
以上がCDN は React Webpack パッケージング ファイル プロセスを高速化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。