বেশ কয়েকটি ব্যক্তি ইতিমধ্যে উল্লিখিত হিসাবে: আপনার নোড_মডিউল ডিরেক্টরি ডিরেক্টরি (প্যাকেজগুলির জন্য এনপিএম অবস্থান) এর সমস্ত ফাইলগুলি আপনার প্রকল্প নির্ভরতার (তথাকথিত প্রত্যক্ষ নির্ভরতা) অংশ। এটির সংযোজন হিসাবে, আপনার নির্ভরতাগুলির নিজস্ব নিজস্ব নির্ভরতা ইত্যাদিও থাকতে পারে ইত্যাদি So তথাকথিত ট্রানজিটিভ নির্ভরতা। বেশ কয়েকটি দশ হাজার ফাইল বিশেষ কিছু নয়।
আপনাকে কেবল 10'000 ফাইল আপলোড করার অনুমতি দেওয়া হয়েছে (মন্তব্য দেখুন), তাই আমি একটি বান্ডলার ইঞ্জিন নিয়ে যেতে চাই with এই ইঞ্জিনটি আপনার সমস্ত জাভাস্ক্রিপ্ট, সিএসএস, এইচটিএমএল ইত্যাদি বান্ডিল করবে এবং একটি একক বান্ডিল তৈরি করবে (বা যদি আপনি সেগুলি নির্দিষ্ট করেন তবে আরও)। আপনার সূচি html এই বান্ডিলটি লোড করবে এবং এটিই।
আমি ওয়েবপ্যাকের একজন অনুরাগী, সুতরাং আমার ওয়েবপ্যাক সমাধানটি একটি অ্যাপ্লিকেশন বান্ডেল এবং একটি বিক্রেতার বান্ডিল তৈরি করবে (সম্পূর্ণ কার্যকারী অ্যাপ্লিকেশনটির জন্য এখানে দেখুন https://github.com/swaechter/project-collection/tree/master/web-angular2- উদাহরণ ):
index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Webcms</title>
</head>
<body>
<webcms-application>Applikation wird geladen, bitte warten...</webcms-application>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
webpack.config.js
var webpack = require("webpack");
var path = require('path');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
/*
* Configuration
*/
module.exports = {
devtool: 'source-map',
debug: true,
entry: {
'main': './app/main.ts'
},
// Bundle configuration
output: {
path: root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
// Include configuration
resolve: {
extensions: ['', '.ts', '.js', '.css', '.html']
},
// Module configuration
module: {
preLoaders: [
// Lint all TypeScript files
{test: /\.ts$/, loader: 'tslint-loader'}
],
loaders: [
// Include all TypeScript files
{test: /\.ts$/, loader: 'ts-loader'},
// Include all HTML files
{test: /\.html$/, loader: 'raw-loader'},
// Include all CSS files
{test: /\.css$/, loader: 'raw-loader'},
]
},
// Plugin configuration
plugins: [
// Bundle all third party libraries
new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}),
// Uglify all bundles
new UglifyJsPlugin({compress: {warnings: false}}),
],
// Linter configuration
tslint: {
emitErrors: false,
failOnHint: false
}
};
// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
সুবিধাদি:
- সম্পূর্ণ বিল্ড লাইন (টিএস আবরণ, সংকলন, মিনিফিকেশন ইত্যাদি)
- মোতায়েনের জন্য 3 টি ফাইল -> কেবলমাত্র কয়েকটি এইচটিপিপি অনুরোধ
অসুবিধা:
- উচ্চ বিল্ড সময়
- এইচটিটিপি 2 প্রকল্পের জন্য সেরা সমাধান নয় (অস্বীকৃতি দেখুন)
দাবি অস্বীকার: এটি এইচটিটিপি ১ এর জন্য একটি ভাল সমাধান * * কারণ এটি প্রতিটি এইচটিটিপি অনুরোধের জন্য ওভারহেডকে ছোট করে দেয়। আপনার কাছে কেবল আপনার সূচিপত্রের জন্য একটি অনুরোধ আছে html এবং প্রতিটি বান্ডিল - তবে 100 - 200 ফাইলের জন্য নয়। এই মুহুর্তে, এই পথে যেতে হবে।
অন্যদিকে, এইচটিটিপি 2, এইচটিটিপি ওভারহেডকে হ্রাস করার চেষ্টা করে, তাই এটি স্ট্রিম প্রোটোকলের উপর ভিত্তি করে। এই স্ট্রিমটি উভয় দিকেই (ক্লায়েন্ট <--> সার্ভার) যোগাযোগ করতে সক্ষম এবং এর কারণ হিসাবে আরও বুদ্ধিমান রিসোর্স লোড করা সম্ভব (আপনি কেবলমাত্র প্রয়োজনীয় ফাইলগুলি লোড করুন)। স্ট্রিমটি এইচটিটিপি ওভারহেডের অনেকগুলি সরিয়ে দেয় (কম এইচটিটিপি রাউন্ড ট্রিপস)।
তবে এটি আইপিভি 6 এর মতোই: লোকেরা সত্যিই এইচটিপিপি 2 ব্যবহার না করা পর্যন্ত কয়েক বছর সময় লাগবে