每个Angular项目生成大量文件

最新推荐文章于 2022-03-02 09:30:27 发布

xfxf996

最新推荐文章于 2022-03-02 09:30:27 发布

阅读量723

点赞数

文章标签： javascript angular

原文链接：https://oldbug.net/q/2cSV0/Huge-number-of-files-generated-for-every-Angular-project

版权

本文翻译自：Huge number of files generated for every Angular project

I wanted to start a simple hello world app for Angular. 我想为Angular启动一个简单的hello world应用程序。

When I followed the instructions in the official quickstart the installation created 32,000 files in my project. 当我按照官方快速入门中的说明进行操作时，安装程序在我的项目中创建了32,000个文件。

I figured this is some mistake or I missed something, so I decided to use angular-cli , but after setting up the project I counted 41,000 files. 我认为这是一个错误，或者我错过了一些东西，所以我决定使用angular-cli ，但是在设置项目后，我计算了41,000个文件。

Where did I go wrong? 我哪里做错了？ Am I missing something really really obvious? 我是否错过了一些确实很明显的东西？

#1楼

参考：https://stackoom.com/question/2cSV0/每个Angular项目生成大量文件

#2楼

There is nothing wrong with your configuration. 您的配置没有错。

Angular (since version 2.0) uses npm modules and dependencies for development. Angular（从2.0版开始）使用npm模块和依赖项进行开发。 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. Angular的基本设置包含编译器，键入依赖项，这些依赖项仅对开发目的至关重要 。

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. 捆绑您的应用程序后，将只有一个bundle.js文件，您可以将其部署在服务器上。

'transpiler' is just a compiler, thanks @omninonsense for adding that. 'transpiler' 只是一个编译器，谢谢@omninonsense的添加。

#3楼

There is nothing wrong with your development configuration. 您的开发配置没有错。

Something wrong with your production configuration. 您的生产配置有问题。

When you develop a "Angular 2 Project" or "Any Project Which is based on JS" you can use all files, you can try all files, you can import all files. 当您开发“ Angular 2项目”或“基于JS的任何项目”时，您可以使用所有文件，可以尝试所有文件，也可以导入所有文件。 But if you want to serve this project you need to COMBINE all structured files and get rid of useless files. 但是，如果您想为该项目提供服务，则需要合并所有结构化文件并清除无用的文件。

There are a lot of options for combine these files together: 有很多选项可以将这些文件组合在一起：

YUI Compressor YUI压缩机
Google Closure Compiler Google Closure编译器
For server side (I think it is best) GULP 对于服务器端（我认为是最好的） GULP

#4楼

Angular itself has lots of dependencies, and the beta version of CLI downloads four times more files. Angular本身具有很多依赖性，Beta版的CLI下载的文件多四倍。

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/ 这是一个创建简单项目的方法，该文件将减少文件（“仅” 10K文件） https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

#5楼

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). 正如已经提到的几个人：node_modules目录中的所有文件（软件包的NPM位置）都是项目依赖项（所谓的直接依赖项）的一部分。 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. 因为只允许您上传10,000个文件（请参阅评论），所以我将使用捆绑程序引擎。 This engine will bundle all your JavaScript, CSS, HTML, etc. and create a single bundle (or more if you specify them). 该引擎将捆绑您的所有JavaScript，CSS，HTML等，并创建一个捆绑（如果指定了捆绑，则更多）。 Your index.html will load this bundle and that's it. 您的index.html将加载此捆绑包，仅此而已。

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 ): 我是webpack的爱好者，因此我的webpack解决方案将创建一个应用程序捆绑包和一个供应商捆绑包（有关完整的工作应用程序，请参见此处https://github.com/swaechter/project-collection/tree/master/web-angular2-示例）：

index.html 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 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.) 完整的生产线（TS整理，编译，缩小等）
3 files for deployment --> Only a few Http requests 3个部署文件->仅几个Http请求

Disadvantages: 缺点：

Higher build time 建造时间更长
Not the best solution for Http 2 projects (See disclaimer) 不是Http 2项目的最佳解决方案（请参阅免责声明）

Disclaimer: This is a good solution for Http 1.*, because it minimizes the overhead for each Http request. 免责声明：这对于Http 1. *是一个很好的解决方案，因为它可以最大程度地减少每个Http请求的开销。 You only have a request for your index.html and each bundle - but not for 100 - 200 files. 您只需要索取index.html和每个捆绑包-而不是100-200个文件。 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. 另一方面，Http 2试图最小化Http开销，因此它基于流协议。 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). 该流消除了许多Http开销（减少Http往返）。

But it's the same as with IPv6: It will take a few years until people will really use Http 2 但这与IPv6相同：直到人们真正使用Http 2还要花几年的时间。

#6楼

                                Typical Angular2 Project

NPM Package Files (Development) Real World Files (Deployment) 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 * ： bundled with @angular

[ see this for bundling process ⇗ ] [ 有关捆绑过程，请参阅此内容⇗ ]