CDN は React Webpack パッケージングファイルプロセスを高速化します-jsチュートリアル-php.cn

CDN は React Webpack パッケージングファイルプロセスを高速化します

php中世界最好的语言

リリース： 2018-04-12 16:54:19

オリジナル

2685 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。