[比較]ウェブパックや小包、どちらが良いですか?
9982 ワード
おい、コミュニティ.
ほとんどすべての近代的なWeb開発者は、いずれかのWebパックを使用して、いずれかの故意に、または使用してフレームワークを使用せずに、Webパックからアプリケーションをバンドルする助けを得ることを知らず.
もう一つのバンドルとして、1つのパッケージがあります.
これらの2つの行動を見ましょう.
私はこの記事を書いているとき、私は最新の安定版を使用しているウェブパックと小包.WebPackバージョンは4.41.5で、小包版は1.12.4です.
これはポイントを追跡することができますので、最後に良い参照してくださいポインティングベースの記事になる.
各セクションには10のマークがあり、これらのバンドルのいずれかは0と10の間の任意の数を得ることができます.
これは私の意見だけです、そして、あなたのものは異なるかもしれません.したがって、これは個人的な見解です.(何か理由も含めますが)
何がバンドルですか？
ほとんどすべての近代的なWeb開発者は、いずれかのWebパックを使用して、いずれかの故意に、または使用してフレームワークを使用せずに、Webパックからアプリケーションをバンドルする助けを得ることを知らず.
もう一つのバンドルとして、1つのパッケージがあります.
これらの2つの行動を見ましょう.
私はこの記事を書いているとき、私は最新の安定版を使用しているウェブパックと小包.WebPackバージョンは4.41.5で、小包版は1.12.4です.
これはポイントを追跡することができますので、最後に良い参照してくださいポインティングベースの記事になる.
各セクションには10のマークがあり、これらのバンドルのいずれかは0と10の間の任意の数を得ることができます.
これは私の意見だけです、そして、あなたのものは異なるかもしれません.したがって、これは個人的な見解です.(何か理由も含めますが)
何がバンドルですか？
あなたがバンドルが何であるかを知らない場合、バンドルは単純なコンセプトに従います:あなたはあなたのファイルをそれを与えます.あなたのCSSのプリプロセッサをコンパイルすることができますし、さらに動作せずに含まれます.
始める
これらのバンドルから始めたい場合は、まずインストールしなければなりません(何が素晴らしいですか?しかし、いくつかのより多くのステップがあり、それらを開始します.
Webpackをインストールした後、webpack.config.js , そして、ここでは、あなたの設定を含める必要がありますので、Webpackはどのようにバンドルを処理する方法を知っている.
非常に基本的なWebpackの設定はこのようになります.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
その後、あなたのファイルを見てwebpackを起動することができます.
しかし、小包で何が起こるかは、あなたがindex.html ファイルは、以下のように通常の相対パスでスクリプトをインクルードします.
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
そして、あなたのindex.html ファイル、それです.小包はまた、HTMLファイルではなく、JavaScriptファイルを見ても可能です.
私は小包10をマークします、しかし、Webpackはここで8と固執しなければなりません.
webpack : 8
小包:10
依存関係とプリプロセッサのインストール
私たちは、バンドルを使用することについての次の主要なものは、SASS以下のようなあなたのプリプロセッサで必要な助けです.
さて、これはあなたのプリプロセッサを認識するためにwebpackを設定する方法です.
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
};
NPMパッケージが必要です.
npm i --save style-loader css-loader sass-loader
これは怖く見えるかもしれませんが、正直であることはそんなに難しくありません.
包みは?小包の請求を覚えていますか.ゼロ設定!だから何もする必要はありません.必要なすべてのものは努力なしで自動的にインストールされます.
小包は別の10を取得し、webpackは8を取得します.
Webpack : 16
小包:20
スピード
この記事にあなたを魅了したかもしれない最も重要なことの一つはパフォーマンステストです.
簡単なバンドルを試してみましょう.
私は各バンドルを3回、ゼロから3つの束の要求を実行します.
The app.js はバンドルされているファイルです.それはVueである1つの依存性しか持っていません.jsとaconsole.log .app.js :
import Vue from 'vue';
console.log('I\'m a bundle');
以下のチャートは、これらのバンドルが初めてバンドルされているときにどのように働くかを示します.
バンドル
ファーストラン
二塁
三塁
平均
Webpack
272 ms
261 ms
262 ms
265 ms
小包
2440 ms
2510 MS
2470 ms
2473.33 ms
あなたが見ることができるように、WebPackは、あなたが初めての束になっているとき、小包より非常により良い(X 9倍)を実行します.
あなたが見ていて、再び同じファイルを束ねているとき、結果が何であるかについて見ましょう.
このテストのために、私は2回Lorem IPSUMコメントを加えて、取り除きます、したがって、それは4回です.
バンドル
ファーストラン
二塁
三塁
フォースラン
平均
Webpack
202 MS
二百四十六
130 ms
104 ms
170.5 ms
小包
71 ms
69 ms
67 ms
54 ms
65.25 ms
この1つでは、小包はウェブパックを引き継ぎ、ウェブパックより速く(ほぼX 2.5倍)実行します.
パーセルは見ているときにウェブパックよりも速く実行されますが、これは初期のバンドルよりも重要です.ほとんどの場合、初期のバンドルを一度だけ見て実行するので、初期のバンドルの違いはあまりにも多いです.
私は、このセクションでウェブパック10と小包を9に与えます.
Webpack : 26
荷物:29
devサーバ
アプリケーションを構築するときは、おそらくdevサーバを探しているでしょう.
これらのバンドルは両方ともdevサーバを提供しますが、別のパッケージとしてwebpackをインストールして設定しなければなりません.
これはあなたのwebpack.config.json ファイル
var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
WebPackはここで9を取得し、小包は10を取得します.
Webpack : 35
荷物:39
コード分割
現実世界に到達すると、コードの分割は本物です.巨大で重いファイルを高速にロードすることはできませんし、ウェブサイトは、低速であることはあなたのクライアントまたは訪問者が持っているものではありません.
前のセクションとして、小包はゼロ構成でコード分割を支持すると主張します、そして、それは本当です.
しかし、Webpackはいくつかの設定を必要とします.
どちらもダイナミックなインポートをサポートしています.
しかし、ここでは文字通り迷惑な問題です.
あなたのコードを束ねた後に、これはWebpackdist フォルダは以下のようになります:
これは非常にきちんとしてきれいです、あなたのダイナミックなコンポーネントを分割するけれども、それは若干の構成を必要とします、しかし、それはそれほど難しくありません.
すべては、適切なフォルダー、画像、CSS、JavaScript、さらにはフォントです.
そして、これはどのようにパーセルのdist フォルダのようです.あなたは、小包がこれらのファイルを管理する方法とあなたのdist フォルダが完全に平坦化され、さらに悪い、あなたのindex.html これらのファイルの中にもあります.これは巨大な混乱!
設定機能のために公平であるために、小包は私にそれに2を与えます、そして、Webpackはこのセクションで9を得ます.
Webpack : 44
荷物:41
コミュニティと使用
Webpackは有名です、そして、フレームワークの多くは私の最愛のNuxtのような彼らのバンドルとしてWebPackを使用します.jsこれまで、私は小包を使用するフレームワークを知りません.
Webpackは、小包を比較する方法の背後にある大きなコミュニティを持っています.したがって、WebPackを使用するときにあなたの問題のためのより多くの解決策を見つけるでしょう.
Webpackには多くの拡張機能があり、素晴らしい構成を使用する準備ができています.
これは、小包は不明なバンドルですが、意味しません.
私はここでWebpack 10を与えます、そして、小包は7を得ます.
Webpack : 54
小包:48
オプションとカスタマイズ
このセクションで何が起こるか既に知っています.
Webpackは王がカスタマイズになるときです.小包はゼロコンフィギュレーションバンドルであると主張します.そして、それは非常に良いです、しかし、あなたはそれがエンタープライズ・レベル・アプリケーションでそれを必要とする場合、その多くのカスタマイズを得ません.
WebPackはあなたが本当にあなたが望むようにそれを設定するオプションの何千もを提供します.
Webpackは完全な10を得ます、そして、小包は2(残念ながら)を得ます.
Webpack : 64
小包:50
結論
Webpackはここの勝者です、そして、私はあなたが後でトラブルで取得したくない場合にはWebpackを使用することを提案します.Webpackは非常に安定し、信頼性の高い私は何度もそれを使用している.
私はその簡単さのために小包を愛しましたが、すべてのそれらのオプションを犠牲にして、Webpackは私にちょうど1つのプロジェクトの後に小包を使わせませんでした.小包が平らになるなら多分dist フォルダの問題が解決し、私は再び小包を使用する設定にオプションを提供します.
私は、ビルド時間を比較して、チャートを作りました.フォルダーの構造と、この記事の写真とコンテキストのすべてが本物です.あなたが問題を引き起こさない場合には、このページへのリンクを使用する場合は、それを使用します.
この記事をお楽しみください.
コメント欄で何を考えているか教えてください.
Reference
この問題について([比較]ウェブパックや小包、どちらが良いですか?), 我々は、より多くの情報をここで見つけました
https://dev.to/adnanbabakan/comparison-webpack-or-parcel-which-one-is-better-43jo
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
これらのバンドルから始めたい場合は、まずインストールしなければなりません(何が素晴らしいですか?しかし、いくつかのより多くのステップがあり、それらを開始します.
Webpackをインストールした後、
webpack.config.js , そして、ここでは、あなたの設定を含める必要がありますので、Webpackはどのようにバンドルを処理する方法を知っている.非常に基本的なWebpackの設定はこのようになります.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
しかし、小包で何が起こるかは、あなたが
index.html ファイルは、以下のように通常の相対パスでスクリプトをインクルードします.<html>
<body>
<script src="./index.js"></script>
</body>
</html>
index.html ファイル、それです.小包はまた、HTMLファイルではなく、JavaScriptファイルを見ても可能です.私は小包10をマークします、しかし、Webpackはここで8と固執しなければなりません.
webpack : 8
小包:10
依存関係とプリプロセッサのインストール
私たちは、バンドルを使用することについての次の主要なものは、SASS以下のようなあなたのプリプロセッサで必要な助けです.
さて、これはあなたのプリプロセッサを認識するためにwebpackを設定する方法です.
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
};
NPMパッケージが必要です.
npm i --save style-loader css-loader sass-loader
これは怖く見えるかもしれませんが、正直であることはそんなに難しくありません.
包みは?小包の請求を覚えていますか.ゼロ設定!だから何もする必要はありません.必要なすべてのものは努力なしで自動的にインストールされます.
小包は別の10を取得し、webpackは8を取得します.
Webpack : 16
小包:20
スピード
この記事にあなたを魅了したかもしれない最も重要なことの一つはパフォーマンステストです.
簡単なバンドルを試してみましょう.
私は各バンドルを3回、ゼロから3つの束の要求を実行します.
The app.js はバンドルされているファイルです.それはVueである1つの依存性しか持っていません.jsとaconsole.log .app.js :
import Vue from 'vue';
console.log('I\'m a bundle');
以下のチャートは、これらのバンドルが初めてバンドルされているときにどのように働くかを示します.
バンドル
ファーストラン
二塁
三塁
平均
Webpack
272 ms
261 ms
262 ms
265 ms
小包
2440 ms
2510 MS
2470 ms
2473.33 ms
あなたが見ることができるように、WebPackは、あなたが初めての束になっているとき、小包より非常により良い(X 9倍)を実行します.
あなたが見ていて、再び同じファイルを束ねているとき、結果が何であるかについて見ましょう.
このテストのために、私は2回Lorem IPSUMコメントを加えて、取り除きます、したがって、それは4回です.
バンドル
ファーストラン
二塁
三塁
フォースラン
平均
Webpack
202 MS
二百四十六
130 ms
104 ms
170.5 ms
小包
71 ms
69 ms
67 ms
54 ms
65.25 ms
この1つでは、小包はウェブパックを引き継ぎ、ウェブパックより速く(ほぼX 2.5倍)実行します.
パーセルは見ているときにウェブパックよりも速く実行されますが、これは初期のバンドルよりも重要です.ほとんどの場合、初期のバンドルを一度だけ見て実行するので、初期のバンドルの違いはあまりにも多いです.
私は、このセクションでウェブパック10と小包を9に与えます.
Webpack : 26
荷物:29
devサーバ
アプリケーションを構築するときは、おそらくdevサーバを探しているでしょう.
これらのバンドルは両方ともdevサーバを提供しますが、別のパッケージとしてwebpackをインストールして設定しなければなりません.
これはあなたのwebpack.config.json ファイル
var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
WebPackはここで9を取得し、小包は10を取得します.
Webpack : 35
荷物:39
コード分割
現実世界に到達すると、コードの分割は本物です.巨大で重いファイルを高速にロードすることはできませんし、ウェブサイトは、低速であることはあなたのクライアントまたは訪問者が持っているものではありません.
前のセクションとして、小包はゼロ構成でコード分割を支持すると主張します、そして、それは本当です.
しかし、Webpackはいくつかの設定を必要とします.
どちらもダイナミックなインポートをサポートしています.
しかし、ここでは文字通り迷惑な問題です.
あなたのコードを束ねた後に、これはWebpackdist フォルダは以下のようになります:
これは非常にきちんとしてきれいです、あなたのダイナミックなコンポーネントを分割するけれども、それは若干の構成を必要とします、しかし、それはそれほど難しくありません.
すべては、適切なフォルダー、画像、CSS、JavaScript、さらにはフォントです.
そして、これはどのようにパーセルのdist フォルダのようです.あなたは、小包がこれらのファイルを管理する方法とあなたのdist フォルダが完全に平坦化され、さらに悪い、あなたのindex.html これらのファイルの中にもあります.これは巨大な混乱!
設定機能のために公平であるために、小包は私にそれに2を与えます、そして、Webpackはこのセクションで9を得ます.
Webpack : 44
荷物:41
コミュニティと使用
Webpackは有名です、そして、フレームワークの多くは私の最愛のNuxtのような彼らのバンドルとしてWebPackを使用します.jsこれまで、私は小包を使用するフレームワークを知りません.
Webpackは、小包を比較する方法の背後にある大きなコミュニティを持っています.したがって、WebPackを使用するときにあなたの問題のためのより多くの解決策を見つけるでしょう.
Webpackには多くの拡張機能があり、素晴らしい構成を使用する準備ができています.
これは、小包は不明なバンドルですが、意味しません.
私はここでWebpack 10を与えます、そして、小包は7を得ます.
Webpack : 54
小包:48
オプションとカスタマイズ
このセクションで何が起こるか既に知っています.
Webpackは王がカスタマイズになるときです.小包はゼロコンフィギュレーションバンドルであると主張します.そして、それは非常に良いです、しかし、あなたはそれがエンタープライズ・レベル・アプリケーションでそれを必要とする場合、その多くのカスタマイズを得ません.
WebPackはあなたが本当にあなたが望むようにそれを設定するオプションの何千もを提供します.
Webpackは完全な10を得ます、そして、小包は2(残念ながら)を得ます.
Webpack : 64
小包:50
結論
Webpackはここの勝者です、そして、私はあなたが後でトラブルで取得したくない場合にはWebpackを使用することを提案します.Webpackは非常に安定し、信頼性の高い私は何度もそれを使用している.
私はその簡単さのために小包を愛しましたが、すべてのそれらのオプションを犠牲にして、Webpackは私にちょうど1つのプロジェクトの後に小包を使わせませんでした.小包が平らになるなら多分dist フォルダの問題が解決し、私は再び小包を使用する設定にオプションを提供します.
私は、ビルド時間を比較して、チャートを作りました.フォルダーの構造と、この記事の写真とコンテキストのすべてが本物です.あなたが問題を引き起こさない場合には、このページへのリンクを使用する場合は、それを使用します.
この記事をお楽しみください.
コメント欄で何を考えているか教えてください.
Reference
この問題について([比較]ウェブパックや小包、どちらが良いですか?), 我々は、より多くの情報をここで見つけました
https://dev.to/adnanbabakan/comparison-webpack-or-parcel-which-one-is-better-43jo
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
};
npm i --save style-loader css-loader sass-loader
この記事にあなたを魅了したかもしれない最も重要なことの一つはパフォーマンステストです.
簡単なバンドルを試してみましょう.
私は各バンドルを3回、ゼロから3つの束の要求を実行します.
The
app.js はバンドルされているファイルです.それはVueである1つの依存性しか持っていません.jsとaconsole.log .app.js :import Vue from 'vue';
console.log('I\'m a bundle');
バンドル
ファーストラン
二塁
三塁
平均
Webpack
272 ms
261 ms
262 ms
265 ms
小包
2440 ms
2510 MS
2470 ms
2473.33 ms
あなたが見ることができるように、WebPackは、あなたが初めての束になっているとき、小包より非常により良い(X 9倍)を実行します.
あなたが見ていて、再び同じファイルを束ねているとき、結果が何であるかについて見ましょう.
このテストのために、私は2回Lorem IPSUMコメントを加えて、取り除きます、したがって、それは4回です.
バンドル
ファーストラン
二塁
三塁
フォースラン
平均
Webpack
202 MS
二百四十六
130 ms
104 ms
170.5 ms
小包
71 ms
69 ms
67 ms
54 ms
65.25 ms
この1つでは、小包はウェブパックを引き継ぎ、ウェブパックより速く(ほぼX 2.5倍)実行します.
パーセルは見ているときにウェブパックよりも速く実行されますが、これは初期のバンドルよりも重要です.ほとんどの場合、初期のバンドルを一度だけ見て実行するので、初期のバンドルの違いはあまりにも多いです.
私は、このセクションでウェブパック10と小包を9に与えます.
Webpack : 26
荷物:29
devサーバ
アプリケーションを構築するときは、おそらくdevサーバを探しているでしょう.
これらのバンドルは両方ともdevサーバを提供しますが、別のパッケージとしてwebpackをインストールして設定しなければなりません.
これはあなたのwebpack.config.json ファイル
var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
WebPackはここで9を取得し、小包は10を取得します.
Webpack : 35
荷物:39
コード分割
現実世界に到達すると、コードの分割は本物です.巨大で重いファイルを高速にロードすることはできませんし、ウェブサイトは、低速であることはあなたのクライアントまたは訪問者が持っているものではありません.
前のセクションとして、小包はゼロ構成でコード分割を支持すると主張します、そして、それは本当です.
しかし、Webpackはいくつかの設定を必要とします.
どちらもダイナミックなインポートをサポートしています.
しかし、ここでは文字通り迷惑な問題です.
あなたのコードを束ねた後に、これはWebpackdist フォルダは以下のようになります:
これは非常にきちんとしてきれいです、あなたのダイナミックなコンポーネントを分割するけれども、それは若干の構成を必要とします、しかし、それはそれほど難しくありません.
すべては、適切なフォルダー、画像、CSS、JavaScript、さらにはフォントです.
そして、これはどのようにパーセルのdist フォルダのようです.あなたは、小包がこれらのファイルを管理する方法とあなたのdist フォルダが完全に平坦化され、さらに悪い、あなたのindex.html これらのファイルの中にもあります.これは巨大な混乱!
設定機能のために公平であるために、小包は私にそれに2を与えます、そして、Webpackはこのセクションで9を得ます.
Webpack : 44
荷物:41
コミュニティと使用
Webpackは有名です、そして、フレームワークの多くは私の最愛のNuxtのような彼らのバンドルとしてWebPackを使用します.jsこれまで、私は小包を使用するフレームワークを知りません.
Webpackは、小包を比較する方法の背後にある大きなコミュニティを持っています.したがって、WebPackを使用するときにあなたの問題のためのより多くの解決策を見つけるでしょう.
Webpackには多くの拡張機能があり、素晴らしい構成を使用する準備ができています.
これは、小包は不明なバンドルですが、意味しません.
私はここでWebpack 10を与えます、そして、小包は7を得ます.
Webpack : 54
小包:48
オプションとカスタマイズ
このセクションで何が起こるか既に知っています.
Webpackは王がカスタマイズになるときです.小包はゼロコンフィギュレーションバンドルであると主張します.そして、それは非常に良いです、しかし、あなたはそれがエンタープライズ・レベル・アプリケーションでそれを必要とする場合、その多くのカスタマイズを得ません.
WebPackはあなたが本当にあなたが望むようにそれを設定するオプションの何千もを提供します.
Webpackは完全な10を得ます、そして、小包は2(残念ながら)を得ます.
Webpack : 64
小包:50
結論
Webpackはここの勝者です、そして、私はあなたが後でトラブルで取得したくない場合にはWebpackを使用することを提案します.Webpackは非常に安定し、信頼性の高い私は何度もそれを使用している.
私はその簡単さのために小包を愛しましたが、すべてのそれらのオプションを犠牲にして、Webpackは私にちょうど1つのプロジェクトの後に小包を使わせませんでした.小包が平らになるなら多分dist フォルダの問題が解決し、私は再び小包を使用する設定にオプションを提供します.
私は、ビルド時間を比較して、チャートを作りました.フォルダーの構造と、この記事の写真とコンテキストのすべてが本物です.あなたが問題を引き起こさない場合には、このページへのリンクを使用する場合は、それを使用します.
この記事をお楽しみください.
コメント欄で何を考えているか教えてください.
Reference
この問題について([比較]ウェブパックや小包、どちらが良いですか?), 我々は、より多くの情報をここで見つけました
https://dev.to/adnanbabakan/comparison-webpack-or-parcel-which-one-is-better-43jo
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
現実世界に到達すると、コードの分割は本物です.巨大で重いファイルを高速にロードすることはできませんし、ウェブサイトは、低速であることはあなたのクライアントまたは訪問者が持っているものではありません.
前のセクションとして、小包はゼロ構成でコード分割を支持すると主張します、そして、それは本当です.
しかし、Webpackはいくつかの設定を必要とします.
どちらもダイナミックなインポートをサポートしています.
しかし、ここでは文字通り迷惑な問題です.
あなたのコードを束ねた後に、これはWebpack
dist フォルダは以下のようになります: これは非常にきちんとしてきれいです、あなたのダイナミックなコンポーネントを分割するけれども、それは若干の構成を必要とします、しかし、それはそれほど難しくありません.
すべては、適切なフォルダー、画像、CSS、JavaScript、さらにはフォントです.
そして、これはどのようにパーセルの
dist フォルダのようです.あなたは、小包がこれらのファイルを管理する方法とあなたのdist フォルダが完全に平坦化され、さらに悪い、あなたのindex.html これらのファイルの中にもあります.これは巨大な混乱!設定機能のために公平であるために、小包は私にそれに2を与えます、そして、Webpackはこのセクションで9を得ます.
Webpack : 44
荷物:41
コミュニティと使用
Webpackは有名です、そして、フレームワークの多くは私の最愛のNuxtのような彼らのバンドルとしてWebPackを使用します.jsこれまで、私は小包を使用するフレームワークを知りません.
Webpackは、小包を比較する方法の背後にある大きなコミュニティを持っています.したがって、WebPackを使用するときにあなたの問題のためのより多くの解決策を見つけるでしょう.
Webpackには多くの拡張機能があり、素晴らしい構成を使用する準備ができています.
これは、小包は不明なバンドルですが、意味しません.
私はここでWebpack 10を与えます、そして、小包は7を得ます.
Webpack : 54
小包:48
オプションとカスタマイズ
このセクションで何が起こるか既に知っています.
Webpackは王がカスタマイズになるときです.小包はゼロコンフィギュレーションバンドルであると主張します.そして、それは非常に良いです、しかし、あなたはそれがエンタープライズ・レベル・アプリケーションでそれを必要とする場合、その多くのカスタマイズを得ません.
WebPackはあなたが本当にあなたが望むようにそれを設定するオプションの何千もを提供します.
Webpackは完全な10を得ます、そして、小包は2(残念ながら)を得ます.
Webpack : 64
小包:50
結論
Webpackはここの勝者です、そして、私はあなたが後でトラブルで取得したくない場合にはWebpackを使用することを提案します.Webpackは非常に安定し、信頼性の高い私は何度もそれを使用している.
私はその簡単さのために小包を愛しましたが、すべてのそれらのオプションを犠牲にして、Webpackは私にちょうど1つのプロジェクトの後に小包を使わせませんでした.小包が平らになるなら多分dist フォルダの問題が解決し、私は再び小包を使用する設定にオプションを提供します.
私は、ビルド時間を比較して、チャートを作りました.フォルダーの構造と、この記事の写真とコンテキストのすべてが本物です.あなたが問題を引き起こさない場合には、このページへのリンクを使用する場合は、それを使用します.
この記事をお楽しみください.
コメント欄で何を考えているか教えてください.
Reference
この問題について([比較]ウェブパックや小包、どちらが良いですか?), 我々は、より多くの情報をここで見つけました
https://dev.to/adnanbabakan/comparison-webpack-or-parcel-which-one-is-better-43jo
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
このセクションで何が起こるか既に知っています.
Webpackは王がカスタマイズになるときです.小包はゼロコンフィギュレーションバンドルであると主張します.そして、それは非常に良いです、しかし、あなたはそれがエンタープライズ・レベル・アプリケーションでそれを必要とする場合、その多くのカスタマイズを得ません.
WebPackはあなたが本当にあなたが望むようにそれを設定するオプションの何千もを提供します.
Webpackは完全な10を得ます、そして、小包は2(残念ながら)を得ます.
Webpack : 64
小包:50
結論
Webpackはここの勝者です、そして、私はあなたが後でトラブルで取得したくない場合にはWebpackを使用することを提案します.Webpackは非常に安定し、信頼性の高い私は何度もそれを使用している.
私はその簡単さのために小包を愛しましたが、すべてのそれらのオプションを犠牲にして、Webpackは私にちょうど1つのプロジェクトの後に小包を使わせませんでした.小包が平らになるなら多分dist フォルダの問題が解決し、私は再び小包を使用する設定にオプションを提供します.
私は、ビルド時間を比較して、チャートを作りました.フォルダーの構造と、この記事の写真とコンテキストのすべてが本物です.あなたが問題を引き起こさない場合には、このページへのリンクを使用する場合は、それを使用します.
この記事をお楽しみください.
コメント欄で何を考えているか教えてください.
Reference
この問題について([比較]ウェブパックや小包、どちらが良いですか?), 我々は、より多くの情報をここで見つけました
https://dev.to/adnanbabakan/comparison-webpack-or-parcel-which-one-is-better-43jo
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について([比較]ウェブパックや小包、どちらが良いですか?), 我々は、より多くの情報をここで見つけました https://dev.to/adnanbabakan/comparison-webpack-or-parcel-which-one-is-better-43joテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol