Huge number of files generated for every Angular project

后端未结

关注

 14  1028

旧时难觅i

I wanted to start a simple hello world app for Angular.

When I followed the instructions in the official quickstart the installation created 32,000 files in my proje

相关标签:

14条回答

一个人的身影

2020-11-28 01:06

Creating a new project with angular cli recently and the node_modules folder was 270 mb, so yes this is normal but I'm sure most new devs to the angular world question this and is valid. For a simple new project it would make sense to pare the dependencies down maybe a bit;) Not knowing what all the packages depend on can be a bit unnerving especially to new devs trying the cli out for the first time. Add to the fact most basic tutorials don't discuss the deployment settings to get the exported files only needed. I don't believe even the tutorial offered on the angular official website talks about how to deploy the simple project.

0 讨论(0)
发布评论:

提交评论
- 加载中...
清歌不尽

2020-11-28 01:08

There is nothing wrong with your configuration.

Angular (since version 2.0) uses npm modules and dependencies for development. That's the sole reason you are seeing such a huge number of files.

A basic setup of Angular contains transpiler, typings dependencies which are essential for development purposes only.

Once you are done with development, all you will need to do is to bundle this application.

After bundling your application, there will be only one bundle.js file which you can then deploy on your server.

'transpiler' is just a compiler, thanks @omninonsense for adding that.

0 讨论(0)
发布评论:

提交评论
- 加载中...
囚心锁ツ

2020-11-28 01:08

Angular itself has lots of dependencies, and the beta version of CLI downloads four times more files.

This is how to create a simple project will less files ("only" 10K files) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

0 讨论(0)
发布评论:

提交评论
- 加载中...
故里飘歌

2020-11-28 01:08

If you are using angular cli's newer version use ng build --prod

It will create dist folder which have less files and speed of project will increased.

Also for testing in local with best performance of angular cli you can use ng serve --prod

0 讨论(0)
发布评论:

提交评论
- 加载中...

伪装坚强ぢ

2020-11-28 01:09

As several people already mentioned: All files in your node_modules directory (NPM location for packages) are part of your project dependencies (So-called direct dependencies). As an addition to that, your dependencies can also have their own dependencies and so on, etc. (So-called transitive dependencies). Several ten thousand files are nothing special.

Because you are only allowed to upload 10'000 files (See comments), I would go with a bundler engine. This engine will bundle all your JavaScript, CSS, HTML, etc. and create a single bundle (or more if you specify them). Your index.html will load this bundle and that's it.

I am a fan of webpack, so my webpack solution will create an application bundle and a vendor bundle (For the full working application see here https://github.com/swaechter/project-collection/tree/master/web-angular2-example):

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));
}

Advantages:

Full build line (TS linting, compiling, minification, etc.)
3 files for deployment --> Only a few Http requests

Disadvantages:

Higher build time
Not the best solution for Http 2 projects (See disclaimer)

Disclaimer: This is a good solution for Http 1.*, because it minimizes the overhead for each Http request. You only have a request for your index.html and each bundle - but not for 100 - 200 files. At the moment, this is the way to go.

Http 2, on the other hand, tries to minimize the Http overhead, so it's based on a stream protocol. This stream is able to communicate in both direction (Client <--> Server) and as a reason of that, a more intelligent resource loading is possible (You only load the required files). The stream eliminates much of the Http overhead (Less Http round trips).

But it's the same as with IPv6: It will take a few years until people will really use Http 2

0 讨论(0)

陌清茗

2020-11-28 01:09
You need to ensure that you're just deploying the dist (short for distributable) folder from your project generated by the Angular CLI. This allows the tool to take your source code and it's dependencies and only give you what you need in order to run your application.

That being said there is/was an issue with the Angular CLI in regards to production builds via `ng build --prod

Yesterday (August 2, 2016) a release was done which switched the build mechanism from broccoli + systemjs to webpack which successfully handles production builds.

Based upon these steps:
```
ng new test-project
ng build --prod
```
I am seeing a dist folder size of 1.1 MB across the 14 files listed here:
```
./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
```
Note Currently to install the webpack version of the angular cli, you must run... npm install angular-cli@webpack -g
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 3 下一页