อย่างที่หลายคนพูดถึงแล้ว: ไฟล์ทั้งหมดในไดเรกทอรี node_modules ของคุณ (ตำแหน่ง NPM สำหรับแพ็คเกจ) เป็นส่วนหนึ่งของการอ้างอิงโครงการของคุณ (ที่เรียกว่าการพึ่งพาโดยตรง) นอกเหนือจากนั้นการพึ่งพาของคุณยังสามารถมีการพึ่งพาของตนเองและอื่น ๆ เป็นต้น (เรียกว่าการพึ่งพาสกรรมกริยา) หลายหมื่นไฟล์ไม่มีอะไรพิเศษ
เนื่องจากคุณได้รับอนุญาตให้อัปโหลดไฟล์ 10,000 ไฟล์เท่านั้น (ดูความคิดเห็น) ฉันจะไปกับเอ็นจิ้น Bundler เอ็นจินนี้จะรวม JavaScript, CSS, HTML ฯลฯ ทั้งหมดของคุณและสร้างบันเดิลเดี่ยว (หรือมากกว่านั้นถ้าคุณระบุ) index.html ของคุณจะโหลดมัดนี้และนั่นคือ
ฉันเป็นแฟนตัวยงของ webpack ดังนั้นโซลูชัน webpack ของฉันจะสร้างกลุ่มแอปพลิเคชันและกลุ่มผู้จำหน่าย (สำหรับแอปพลิเคชันที่ทำงานได้อย่างสมบูรณ์ดูที่นี่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));
}
ข้อดี:
- สายต่อเต็ม (TS linting, คอมไพล์, การลดขนาด ฯลฯ )
- 3 ไฟล์สำหรับการปรับใช้ -> ร้องขอ Http เพียงเล็กน้อยเท่านั้น
ข้อเสีย:
- เวลาสร้างที่สูงขึ้น
- ไม่ใช่ทางออกที่ดีที่สุดสำหรับโครงการ Http 2 (ดูข้อจำกัดความรับผิดชอบ)
คำเตือน:นี่เป็นทางออกที่ดีสำหรับ Http 1 * เนื่องจากลดค่าใช้จ่ายสำหรับการร้องขอ Http แต่ละครั้ง คุณมีเพียงคำขอสำหรับ index.html ของคุณและแต่ละชุด - แต่ไม่ใช่สำหรับ 100 - 200 ไฟล์ ในขณะนี้เป็นวิธีที่จะไป
Http 2 ตรงกันข้ามพยายามลดค่าใช้จ่าย Http ให้น้อยที่สุดดังนั้นจึงเป็นไปตามโปรโตคอลสตรีม สตรีมนี้สามารถสื่อสารได้ทั้งสองทิศทาง (ไคลเอนต์ <--> เซิร์ฟเวอร์) และด้วยเหตุผลดังกล่าวทำให้สามารถโหลดทรัพยากรอัจฉริยะได้มากขึ้น (คุณโหลดไฟล์ที่จำเป็นเท่านั้น) กระแสข้อมูลกำจัดค่าใช้จ่าย Http จำนวนมาก (การเดินทางแบบรอบต่อนาทีน้อยกว่า)
แต่มันก็เหมือนกับ IPv6: จะใช้เวลาสองสามปีกว่าที่ผู้คนจะใช้ Http 2 จริงๆ