ไฟล์จำนวนมากที่สร้างขึ้นสำหรับทุกโครงการเชิงมุม


594

ฉันต้องการเริ่มต้นแอพ Hello World ที่เรียบง่ายสำหรับ Angular

เมื่อฉันทำตามคำแนะนำอย่างเป็นทางการเริ่มต้นอย่างรวดเร็วการติดตั้งได้สร้างไฟล์ 32,000 ไฟล์ในโครงการของฉัน

ฉันคิดว่านี่เป็นความผิดพลาดหรือพลาดอะไรไปฉันก็เลยตัดสินใจใช้angi-cliแต่หลังจากตั้งค่าโปรเจคแล้วฉันนับ 41,000 ไฟล์

ฉันไปผิดที่ไหน ฉันขาดอะไรบางอย่างที่ชัดเจนจริง ๆ หรือไม่


98
เป็นเรื่องปกติสำหรับโครงการที่ขับเคลื่อนโดย NPM
Everettss

115
@hendrix เพราะการใช้งานของฉัน (google เครื่องยนต์แอป) ช่วยให้เพียง 10K ไฟล์
Moshe Shaham

49
สำหรับใครที่อยากรู้จำนวนโหวตในคำถามนี้และคำตอบคำถามนี้ทำให้หน้าแรกของ HN news.ycombinator.com/item?id=12209028
ceejayoz

50
@hendrix - ฉันพนันได้เลยว่าคุณยอมรับไฟล์. DS_Store เพื่อคอมไพล์เช่นกัน
Martin Konecny

61
ฉันคิดว่า "หากแอปสวัสดีโลกของคุณทำงานทุกอย่างเรียบร้อย" ไม่ใช่ปรัชญาที่ดีในการติดตามโดยเฉพาะอย่างยิ่งสำหรับคนที่กำลังเรียนรู้ OP เป็นคำถามที่ถูกต้องว่าเหตุใดจึงมีการสร้างไฟล์จำนวนมาก ตัวอย่างเองอ้างอิงเพียง 5 ไฟล์ และตามจริงแล้วแอปพลิเคชั่นใด ๆ ที่มีไฟล์มากกว่าตัวอักษรในเอาต์พุตควรถูกตั้งคำถาม
Shawn

คำตอบ:


362

ไม่มีอะไรผิดปกติกับการกำหนดค่าของคุณ

Angular (ตั้งแต่รุ่น 2.0) ใช้โมดูล npm และการพึ่งพาสำหรับการพัฒนา นั่นเป็นเหตุผลเดียวที่คุณเห็นไฟล์จำนวนมาก

การตั้งค่าพื้นฐานของ Angular มี transpiler การพึ่งพาการพิมพ์ที่จำเป็นสำหรับการพัฒนาเท่านั้น

เมื่อเสร็จสิ้นการพัฒนาสิ่งที่คุณต้องทำก็คือการรวมแอปพลิเคชันนี้เข้าด้วยกัน

หลังจากรวมแอปพลิเคชันของคุณแล้วจะมีเพียงbundle.jsไฟล์เดียวที่คุณสามารถปรับใช้บนเซิร์ฟเวอร์ของคุณ

'transpiler'เป็นเพียงคอมไพเลอร์ขอขอบคุณ @omninonsense สำหรับการเพิ่ม


7
โดยทั่วไปแล้วจะนำข้อมูลการทดสอบและการทดสอบและสร้างเครื่องมือสำหรับการอ้างอิงและการอ้างอิงของพวกเขาและอื่น ๆ
Benjamin Gruenbaum

63
"transpiler" เป็นเพียงคอมไพเลอร์
omninonsense

32
แต่คอมไพล์เป็นภาษาอื่นแทนที่จะเป็นรหัสไบต์หรือรหัสเครื่อง
Hunter McMillen

32
@HunterMcMillen รหัส Byte และ / หรือรหัสเครื่องเป็นภาษาอื่น คำว่า "transpiler" ไม่มีความหมายเพิ่มเติมนอกเหนือจาก "compiler"
แบรนดอนบั

76
ด้วยความเคารพต่อผู้ที่เกี่ยวข้องทั้งหมดฉันไม่แน่ใจว่าการโต้แย้งความหมายเกี่ยวข้องกับคำถามของ OP อย่างไร ^^
Dan Pantry

144
                                Typical Angular2 Project

                       ไฟล์                   แพคเกจ NPM (การพัฒนา) ไฟล์โลกแห่งความจริง (การปรับใช้)

@angular                       3,236                             1
rxJS                           1,349                             1*
core-js                        1,341                             2
typings                        1,488                             0
gulp                           1,218                             0
gulp-typescript                1,243                             0
lite-server                    5,654                             0
systemjs-builder               6,470                             0
__________________________________________________________________
Total                         21,999                             3  

*: bundled with @angular

[ ดูสิ่งนี้สำหรับกระบวนการบันเดิล⇗ ]


24
ฉันเดาว่า-3จะไม่ได้รับเงิน แต่ตอนนี้ฉันมีแล้ว :)
Ankit Singh

1
ไฟล์ในโลกแห่งความจริงหมายถึงอะไร
Yeahman

1
@yeahman ไฟล์ "โลกแห่งความจริง"คือจำนวนของไฟล์เมื่อโครงการของคุณจะถูกนำไปใช้งานหรือในการผลิต
ติ

ขนาดก็นับได้เพียง 3 ไฟล์ แต่อาจจะมีขนาดใหญ่มาก (สำหรับเว็บ)
pdem

51

ไม่มีอะไรผิดปกติกับการกำหนดค่าการพัฒนาของคุณ

มีบางอย่างผิดปกติกับการกำหนดค่าการผลิตของคุณ

เมื่อคุณพัฒนา "Angular 2 Project" หรือ "Any Project ซึ่งเป็นพื้นฐานของ JS" คุณสามารถใช้ไฟล์ทั้งหมดคุณสามารถลองไฟล์ทั้งหมดคุณสามารถนำเข้าไฟล์ทั้งหมด แต่ถ้าคุณต้องการที่จะให้บริการโครงการนี้คุณต้องรวมไฟล์ที่มีโครงสร้างทั้งหมดและกำจัดไฟล์ที่ไม่มีประโยชน์

มีตัวเลือกมากมายสำหรับการรวมไฟล์เหล่านี้เข้าด้วยกัน:


2
คุณไม่ควรทำการต่อไฟล์เข้าด้วยกันบนเซิร์ฟเวอร์ อย่างมากฉันจะใช้ transpiler
Dan Pantry

1
@DanPantry Transpilers เป็นคอมไพเลอร์ต้นทางกับซอร์ส ฉันคิดว่าพวกเขาสามารถเปลี่ยน "X" เป็น "JS" เท่านั้น จำนวนไฟล์เหมือนกัน
พายุเฮอริเคน

1
.. ใช่ แต่ฉันไม่แน่ใจในประเด็นของคุณ ประเด็นของฉันคือคุณไม่ควรพยายามลดรหัสเซิร์ฟเวอร์ (โดยการต่อไฟล์เข้าด้วยกันและทำให้ขนาดไฟล์ลดลง) อย่างมากที่สุดคุณควรใช้ Babel กับรหัสของคุณหากคุณใช้คุณสมบัติที่มีเลือดออกเช่น async / await
Dan Pantry

2
@DanPantry ฉันเห็นด้วยกับคุณ แต่ในความคิดเห็นผู้ถามกล่าวว่า "เพราะการปรับใช้ของฉัน (เครื่องมือ Google app) อนุญาตให้ใช้ไฟล์ 10K เท่านั้น" ในเงื่อนไขเหล่านี้เราจำเป็นต้องลดจำนวนไฟล์ลง
พายุเฮอริเคน

4
ฉันเห็นด้วยกับคุณ แต่ OP ดูเหมือนว่าจะมีปัญหา XY ที่นี่
Dan Pantry

30

อย่างที่หลายคนพูดถึงแล้ว: ไฟล์ทั้งหมดในไดเรกทอรี 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 จริงๆ


1
ไม่จำเป็นว่าตั้งแต่ OP ที่กล่าวถึงการใช้angular-cliซึ่งมาพร้อมกับ Bundler (webpack ที่แนะนำเดียวกัน)
mattarau

2
@mdentinho ใช่ในรุ่นที่ใหม่กว่า แต่ในปี 2559 SystemJS และ CLI เป็นวิธีการที่จะไป (ดีใจที่เรามี
webpack

21

คุณต้องให้แน่ใจว่าคุณเพียงแค่การปรับใช้ DIST (สั้นสำหรับแจกจ่าย) โฟลเดอร์จากโครงการของคุณสร้างขึ้นโดยCLI เชิงมุม สิ่งนี้ช่วยให้เครื่องมือสามารถนำซอร์สโค้ดของคุณและมันขึ้นอยู่กับการพึ่งพาและให้สิ่งที่คุณต้องการเพื่อเรียกใช้แอปพลิเคชันของคุณ

ที่ถูกกล่าวว่ามี / เป็นปัญหากับ Angular CLI ในส่วนที่เกี่ยวกับการผลิตสร้างผ่าน `ng build --prod

เมื่อวานนี้ (2 สิงหาคม 2016) เป็นรุ่นที่ได้กระทำซึ่งเปลี่ยนสร้างกลไกจากผักชนิดหนึ่ง + systemjsเพื่อwebpackซึ่งประสบความสำเร็จในการผลิตสร้างจัดการ

ตามขั้นตอนเหล่านี้:

ng new test-project
ng build --prod

ฉันเห็นdistขนาดโฟลเดอร์1.1 MBจาก14 ไฟล์ที่แสดงอยู่ที่นี่:

./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js

หมายเหตุในขณะนี้เพื่อติดตั้ง webpack cli เชิงมุมรุ่นคุณต้องรันnpm install angular-cli@webpack -g


14

Angular มีการพึ่งพาจำนวนมากและรุ่นเบต้าของ CLI จะดาวน์โหลดไฟล์เพิ่มขึ้นสี่เท่า

นี่คือวิธีการสร้างโครงการอย่างง่ายจะมีไฟล์น้อยลง ("เฉพาะ" ไฟล์ 10K) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/


12

ดูเหมือนว่าไม่มีใครพูดถึงการรวบรวมเวลาล่วงหน้าตามที่อธิบายไว้ที่นี่: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

ประสบการณ์ของฉันกับ Angular จนถึงตอนนี้คือ AoT สร้างงานสร้างที่เล็กที่สุดโดยแทบไม่มีเวลาโหลด และที่สำคัญที่สุดคือคำถามที่นี่เป็นเรื่องเกี่ยวกับ - คุณจะต้องจัดส่งไฟล์ไม่กี่ไฟล์เพื่อการผลิต

สิ่งนี้น่าจะเป็นเพราะคอมไพเลอร์ Angular จะไม่ถูกส่งมาพร้อมกับบิลด์โปรดักชั่นเนื่องจากเทมเพลตจะถูกคอมไพล์ "Ahead of Time" นอกจากนี้ยังเป็นเรื่องที่ยอดเยี่ยมมากเมื่อเห็นว่ามาร์กอัป HTML เทมเพลตของคุณเปลี่ยนเป็นคำสั่ง javascript ซึ่งยากที่จะแปลงวิศวกรกลับเป็น HTML ดั้งเดิม

ฉันสร้างวิดีโออย่างง่ายที่แสดงขนาดการดาวน์โหลดจำนวนไฟล์และอื่น ๆ สำหรับแอพพลิเคชั่น Angular ใน dev vs AoT build ซึ่งคุณสามารถดูได้ที่นี่:

https://youtu.be/ZoZDCgQwnmQ

คุณจะพบซอร์สโค้ดสำหรับการสาธิตได้ที่นี่:

https://github.com/fintechneo/angular2-templates

และ - ตามที่คนอื่น ๆ พูดที่นี่ - ไม่มีอะไรผิดปกติเมื่อมีไฟล์มากมายในสภาพแวดล้อมการพัฒนาของคุณ นั่นเป็นวิธีที่มันขึ้นอยู่กับการพึ่งพาทั้งหมดที่มาพร้อมกับ Angular และกรอบงานสมัยใหม่อื่น ๆ อีกมากมาย แต่ความแตกต่างที่นี่คือเมื่อจัดส่งไปยังการผลิตคุณควรจะสามารถบรรจุลงในไฟล์ไม่กี่ไฟล์ นอกจากนี้คุณไม่ต้องการไฟล์อ้างอิงทั้งหมดเหล่านี้ในที่เก็บ git ของคุณ


8

นี่ไม่ใช่เฉพาะเชิงมุมจริงๆมันเกิดขึ้นกับเกือบทุกโครงการที่ใช้ระบบนิเวศ NodeJs / npm สำหรับเครื่องมือ

โปรเจ็กต์เหล่านั้นอยู่ในโฟลเดอร์ node_modules ของคุณและเป็นการอ้างอิง Transititve ที่การพึ่งพาโดยตรงของคุณต้องรัน

ในโมดูลระบบนิเวศของโหนดมักจะมีขนาดเล็กซึ่งหมายความว่าแทนที่จะพัฒนาสิ่งต่าง ๆ ด้วยตนเองเรามักจะนำเข้าสิ่งที่เราต้องการส่วนใหญ่ภายใต้รูปแบบของโมดูล สิ่งนี้อาจรวมถึงสิ่งเล็ก ๆ เช่นฟังก์ชั่นแผ่นซ้ายที่มีชื่อเสียงทำไมเราต้องเขียนมันด้วยตัวเองถ้าไม่ใช่การออกกำลังกาย?

ดังนั้นการมีไฟล์จำนวนมากมันเป็นสิ่งที่ดีจริง ๆ แล้วมันหมายความว่าทุกอย่างเป็นมอดุลาร์และผู้เขียนโมดูลมักนำโมดูลอื่นมาใช้ซ้ำ ความง่ายในการแยกส่วนนี้อาจเป็นหนึ่งในสาเหตุหลักที่ระบบนิเวศของโหนดเติบโตอย่างรวดเร็ว

โดยหลักการแล้วสิ่งนี้ไม่ควรทำให้เกิดปัญหาใด ๆ แต่ดูเหมือนว่าคุณจะมีข้อ จำกัด ในการนับจำนวนไฟล์ของแอพ Google Engine ในกรณีที่ฉันแนะนำให้อัปโหลด node_modules ไปยังแอพเอ็นจิ้น

แทนที่จะสร้างแอปพลิเคชันในเครื่องและอัปโหลดไปยังเครื่องมือของแอป Google เท่านั้นไฟล์ที่รวมมา แต่ไม่ต้องสร้างในแอพกลไกของตัวเอง


8

หากคุณกำลังใช้รุ่นที่ใหม่กว่าของเชิงมุม cli ng build --prod

มันจะสร้างโฟลเดอร์distที่มีไฟล์น้อยลงและความเร็วของโครงการจะเพิ่มขึ้น

สำหรับการทดสอบในพื้นที่ด้วยประสิทธิภาพที่ดีที่สุดของ cli เชิงมุมที่คุณสามารถใช้ได้ ng serve --prod


6

ถ้าคุณใช้ Angular CLI คุณสามารถใช้ - ธงน้อยที่สุดเมื่อคุณสร้างโครงการ

ng new name --minimal

ฉันเพิ่งเรียกใช้ด้วยการตั้งค่าสถานะและจะสร้าง 24 600 ไฟล์และng build --prodสร้างโฟลเดอร์ 212 KB

ดังนั้นหากคุณไม่ต้องการน้ำพุในโครงการของคุณหรือเพียงแค่ต้องการทดสอบสิ่งนี้อย่างรวดเร็วฉันคิดว่ามันมีประโยชน์ทีเดียว


5

การสร้างโครงการใหม่ด้วย angi cli เมื่อเร็ว ๆ นี้และโฟลเดอร์ node_modules คือ 270 mb ดังนั้นใช่นี่เป็นเรื่องปกติ แต่ฉันแน่ใจว่า devs ใหม่ส่วนใหญ่สำหรับโลกเชิงมุมถามคำถามนี้และถูกต้อง สำหรับโครงการใหม่ที่เรียบง่ายมันจะสมเหตุสมผลที่จะตัดการพึ่งพาลงไปสักหน่อย;) การไม่รู้ว่าแพ็กเกจทั้งหมดขึ้นอยู่กับอะไรบ้างสามารถทำให้ตกใจโดยเฉพาะกับ devs ใหม่ที่พยายาม cli out เป็นครั้งแรก เพิ่มข้อเท็จจริงที่ว่าบทเรียนพื้นฐานส่วนใหญ่ไม่ได้กล่าวถึงการตั้งค่าการปรับใช้เพื่อให้ได้ไฟล์ที่ส่งออกที่จำเป็นเท่านั้น ฉันไม่เชื่อแม้แต่การสอนที่นำเสนอบนเว็บไซต์อย่างเป็นทางการเชิงมุมพูดถึงวิธีการปรับใช้โครงการง่าย ๆ

ดูเหมือนว่าโฟลเดอร์ node_modules คือผู้ร้าย



3

หากระบบไฟล์ของคุณรองรับลิงก์สัญลักษณ์อย่างน้อยที่สุดคุณก็สามารถลดไฟล์เหล่านี้ทั้งหมดไปยังโฟลเดอร์ที่ซ่อนอยู่เพื่อให้เครื่องมืออัจฉริยะเช่นtreeจะไม่แสดงไฟล์เหล่านั้นตามค่าเริ่มต้น

mv node_modules .blergyblerp && ln -s .blergyblerp node_modules

การใช้โฟลเดอร์ที่ซ่อนอยู่สำหรับสิ่งนี้อาจกระตุ้นให้เกิดความเข้าใจว่าไฟล์เหล่านี้เป็นไฟล์ที่เกี่ยวข้องกับบิลด์ที่ไม่จำเป็นต้องบันทึกไว้ในการควบคุมการแก้ไขหรือใช้โดยตรงในการปรับใช้ของคุณ


breadcrumb ของฉันหายไปแล้ว แต่นี่คือสิ่งที่มันอ้างถึง: web.archive.org/web/20150216184318/https://docs.npmjs.com/misc/ …
ขุนนาง

2

ไม่มีอะไรผิด. นี่คือการขึ้นต่อกันของโหนดทั้งหมดที่คุณกล่าวถึงใน package.json

เพียงแค่ระวังถ้าคุณได้ดาวน์โหลดโครงการ git hub บางตัวมันอาจมีการอ้างอิงอื่น ๆ มากมายที่ไม่จำเป็นต้องใช้กับแอป Hello world 2 เป็นครั้งแรก :)

  • ให้แน่ใจว่าคุณมีการพึ่งพาเชิงมุม -rxjs -gulp -typescript -tslint -docker
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.