Why Bundler? Why Webpack?

4715 ワード
webpack テキストリンク

Bundler


多くの依存ファイルを大きなファイルにマージします.JSファイルとサードパーティの依存性を1つのファイルにバンドルします.

Why Bundler?


なぜバンドルバッグを使うのですか?まず、バンドルパッケージの使用前の状況を見てみましょう.
<head>
  <script src="./function_1.js"></script>
  <script src="./function_2.js"></script>
  <script src="./function_3.js"></script>
  <script src="./function_4.js"></script>
</head>
  • Webの規模が拡大するにつれて、多くのスクリプトがロードされます.<script>には複数のラベルが存在し、その数に応じてネットワーク要求が発生し、ネットワークボトルネックをもたらした.
  • 以上のスクリプトがあっても、これらはグローバルScopeに属します.このため,変数名などの識別子名が重複する現象(名称衝突)が発生し,開発者を困惑させる.多くのスクリプトの変数名をユニークにするのは難しいからです.
    • もちろん,識別子重複問題はJSのモジュールを用いて解決できる.なぜなら、各スクリプトをモジュールに分割すると、異なるScopeがあるからです.実際、Bundlerはネットワークのボトルネック問題を解決するために現れた.

    Why Webpack ?


    Benfit of using Webpack


    Webpackはモジュールbundlerです.Webpackは、複数のスクリプトを1つのファイルに結合します.したがって,最小の<script>ラベルを記入するだけでネットワークボトルネックの問題を解決できる.また、各ファイルをモジュールとして処理することで、識別子の重複問題を解決することもできる.
  • で初めてwebpackが出た時はJS自体のモジュールシステムがなかったそうです.だからWebpackが注目されました(推定)
    • まとめてみると、Webpackのメリットは次のとおりです.
    1.ネットワーク要求を最小化してボトルネックを解決する
    2.モジュール化システムの利用
    3.圧縮コード
    4.ホットプラグ対応
    5.Babelなどのロードシステムを使用して、Third-partyをバンドルすることもできます.
    上記の内容に加えて、WebpackはWepの開発を簡単で信頼性の高いものにする多くの利点を提供しています.

    Another Bundler(推定)


    世界にはWebpack以外にも様々なモジュールバインディングが存在する.Snowpack、Parcel、Rollupなどがあります.このほか、Webpackと比較することが多いのはGulpとGrentです.
    Webpackしか使ったことがないので、モジュールごとの違いがわかりません.資料もなかなか見つからない.だから内容は100%事実ではなく大脳皮質だということです.

    推測を始めます...私心


  • Gulp, Grunt VS Webpack
    GulpとGruntはTask Runnerと呼ばれている.WebpackはModule Bundlerでしょう.GulpとGruntもWebpackのように圧縮可能であり,GulpとGruntの主な目的は自動化テストであるようだ.Jestのようなライブラリを使用してテストを作成することができますが、これらのテストの実行と構築はGulpのようなTask Runnerで自動的に完了するようです.

  • Parcel VS Webpack
    最近注目されているモジュールバインドParcelParcelはzero-configの特徴を有する.Webpack configファイルを作成するには、多くの学習時間がかかります.(個人的には)逆に、Parcelは自分で完了し、loaderやconfigオプションを設定する必要はありません.ランニングカーブが低いのでメリットがありますまた、Parcelは必ずしもentry pointをJSファイルとして使用する必要はありません.そしてBUILDもスピードが速い
    現在、Parcelを使用する必要があるかもしれませんが、Webpackとして構築されているプロジェクトはまだたくさんあります.これは、Webpack 안정성のためです.個人的なプロジェクトでの煩雑なWebpack Config操作を避けるには、Parcelを使用し、サービスが必要な大規模なプロジェクトでWebpackを使用することをお勧めします.もう少しParcelをアップグレードすればParcelはBudlerキャプテンになると思います
    • JMeterの記録
    [Kotlin]高次関数とRamda式について