[WebDevCurriculum]システムのバンドルと構築

概要
バンドル、Webパッケージの概念を理解します.
Checklist

を複数のJavaScript、画像、コンポーネントファイルなどに分けて組み合わせると、パフォーマンスにどのようなメリットがありますか?

웹 서비스에서 랜더링 시 소요시간 감소Webリクエストに必要な静的アセット(JavaScript、CSSなど)のサイズを小さくすることで、初回画面レンダリング時のHTTP通信に要する時間を短縮できます.
ただし、同じ資産を要求する同じページとサイトでは、バンドルが無効になる可能性があります.정적 자산에 대한 유효성 검사 소요시간 감소ブラウザでは、各資産の有効性チェックも必要です.
チェックするファイルの数が減少すると、検証対象ファイルのサイズが減少するため、バンドルによりパフォーマンスが向上します.

イメージをデータURLに変換してバンドルするメリットとデメリットは?

Data URL에 대한 개념과 장점

fileRead.readAsDataURL(fileData);

これもファイルシステムからimagefileをロードする際にURL stringを使用してロードする方法です.

以上のようにdata : ~ から開始します.
イメージをURLデータに変換する場合はbase 64符号化形式で符号化され、image/jpegファイルをロードするために使用できます.
このプロセス自体は簡単で複雑ではなく,ユーザはドキュメント内(text editorなど)に直接埋め込むことができる.단점VanillaJSはファイルシステム(FileReader)の関連メソッドをサポートして自動的に符号化しますが、直接符号化すると、特定のスキーム(data : ~)が欠けているためにエラーが発生する可能性があります.
ブラウザの場合、URLデータの最大長は制限されます.
また、base 64を用いて符号化する際に発生するエラーは、自己認識と解決(エラーをデバッグしない)が必要であり、直接符号化を用いると複雑になる.

ソース・コード・マッピングとは?

生成されたファイルと元のリソースを相互に接続し、デバッグ間の利便性を提供するツールです.
Webpackによるバンドル(ほとんどの場合、バンドルは同じ概念とみなされます)、エラーが発生した場合は構築完了後にエラー(動的検出)を検出します.
ソースマッピングは、ソースリソースに関連付けられており、エラーが発生したファイルと行(静的検出)を検出できます.

Webpackの基本設定は何ですか?

EntryWebpackはバインド(構築)の開始点とパスです.

module.exports = {
  //...
  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js',
  },
};

entryオブジェクトを使用してモジュールをロードし、ファイルにバインドします.Outputentryオブジェクトで定義したバンドルアイテム(パス)をバンドルした後、最終的な成果物の場所に戻ります.LoaderWebpackが既存の属性(Javascript、JSON)をバインドしたり、HTML/CSS/Imageなどをバインドしたりする機能をサポートしています.
ファイルの解釈に関する追加機能を提供します.PluginWebpackの基本的な操作に加えて、他の機能も提供されています.
Pluginにより、ビーム/注入環境変数の最適化など、結果形状を変更する機能を提供することができる.

Webpackのモジュールはどのような役割を果たしますか?

既存のブラウザではモジュールを完全にサポートできないため、Webpackが提供する機能です.
基本的には、モジュールシステムの互換性とサポートの概念を拡張し、モジュールシステムのすべてのバンドルをサポートする機能を提供していると見なすことができます.
commonJS、ES 6などのモジュールシステムをサポートすることができる.

Webパッケージを使用してホットモジュール交換機能を設定する方法

webpack.config.jsのhotオプションtrueを指定します.
リファレンスコンセプト

バージョン

開発が完了したReactサービスを展開するために、1つのフォルダ/ディレクトリで構成および準備を行う操作を指します.

npm run buildを実行するとreact build操作、indexが実行されます.htmlファイルに圧縮され、配置に최적화の状態が提供されます.최적화の意味は、1つのjsソースに圧縮するプロセスと、Reactおよびnodejsのない環境でサービスが正常に動作することを保証するプロセスとを含むことに留意されたい.
※アプリケーション開発(Realt-Native)では、アプリケーションストアを展開するために、プロジェクトをapkファイルに圧縮するプロセス.

バンドル

文字通り、묶음の概念は、ファイルをパッケージ化する作業を指す.
ここでのファイルとは、依存関係(import/export)におけるファイル自体または内部に含まれるモジュールを指し、正確には、モジュール間の依存関係を理解することによってグループ化される動作である.
1つのプロジェクトは多くのファイルとモジュールを別々に処理します.1つのファイルだけを管理するのは複雑で、コードが長すぎて、耐えられません.
規模が大きいほど、ファイルの分離とインポート/エクスポートで問題が発生しやすくなります.
※ブラウザに複数のファイルをロードすると速度が低下する
※モジュール(ファイル)間の変数競合
したがって、依存するファイルとモジュールを組み合わせる必要があり、これらのタスクを完了するために使用できるツール(最も代表的な번들링)もあります.
※RequireJS、Browserify、Rollup、Parcelなど

Webパッケージ(Webパッケージ)

スムージング操作で最もよく使用される代表的なスムージングツールです.
モジュール化にはCommonJS、ES 6などのモジュールの説明が含まれており、Webpackはこれらの機能をサポートするだけでなく、ファイル内部から必要なコードを個別に解凍することができます.
またreactのCS/JSX変換もサポートされているので、Web/Appアプリケーションの開発に役立ちます.
Webpackでバンドル操作を行うことで、指定したファイル(モジュール)をグループ化し、ソースファイルを表示できます。

HMR(Hot Module Replacement)

Webpackは、実行を中心にモジュールの更新/変換/削除を行う機能を提供しています.
アプリケーションの実行時(実行時環境)では、すべてのタイプのモジュールをリフレッシュ(更新)する必要はなく、実行に重点を置き、実行に使用するモジュールのみを一時的に利用し、更新することがコンセプトです.webpackの概念に似ています.
整理する

0. why

React Buildは、bundleの概念を理解する理由を理解します.

buildは、bundle概念を同じ概念と見なす理由を理解します.

buidl、なぜbundleを行うのかよく知っています.

1. what

build,bundleはどのようなプロセスであり、どのような目的のために行われているのか.

の最終的な構築、パッケージング作業を完了するときに、どのような要因を考慮する必要があり、どのような追加のプロセスを行う必要があるかを考慮します.

2. how

build、bundleはscriptドキュメントで書かれているので、少し疎かかもしれませんが、これをどのように応用し、実用能力を育成するかを考えてみましょう.

3.参照リンク

npm run build
https://gocoder.tistory.com/2190
React build
https://juein.tistory.com/47
バンドルとWebパッケージの基本概念
https://lihano.tistory.com/17
MS公式ドキュメント-バンドル
https://docs.microsoft.com/ko-kr/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-6.0
Webパッケージ公式ドキュメント-HMR
https://webpack.kr/guides/hot-module-replacement/
ネットワークパッケージ
https://velog.io/@bigbrothershin/Webpack-JS-ES6-%EB%AA%A8%EB%93%88%EC%8B%9C%EC%8A%A4%ED%85%9C-%EC%9D%B4%ED%95%B4
DataURL
https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
SourceMap
https://minhyeong-jang.github.io/2019/05/24/sourcemap
https://joshua1988.github.io/webpack-guide/devtools/source-map.html#%EC%86%8C%EC%8A%A4-%EB%A7%B5
Webpackプロパティ
https://berkbach.com/%EC%9B%B9%ED%8C%A9-webpack-%EA%B3%BC-%EB%B0%94%EB%B2%A8-babel-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-fb87d0027766
Webpack関連ドキュメント-Runebook
https://runebook.dev/ko/docs/webpack/configuration/entry-context
※WebpackでReactを作成
https://berkbach.com/%EC%9B%B9%ED%8C%A9-webpack-%EA%B3%BC-%EB%B0%94%EB%B2%A8-babel-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-fb87d0027766