为每个 Angular 项目生成的大量文件

IT技术 javascript angular
2021-02-18 22:27:29

我想为 Angular 启动一个简单的 hello world 应用程序。

当我按照官方快速入门中的说明进行安装时，在我的项目中创建了 32,000 个文件。

我认为这是一些错误或者我错过了一些东西，所以我决定使用angular-cli，但在设置项目后我计算了 41,000 个文件。

我哪里做错了？我错过了一些非常明显的东西吗？

6个回答

您的配置没有任何问题。

Angular（从 2.0 版开始）使用 npm 模块和依赖项进行开发。这是您看到如此大量文件的唯一原因。

角的基本设置中包含transpiler，分型依赖它们是必不可少仅用于开发。

完成开发后，您需要做的就是捆绑此应用程序。

捆绑您的应用程序后，将只有一个bundle.js文件可以部署在您的服务器上。

'transpiler'只是一个编译器，感谢 @omninonsense 添加它。

它还通常为依赖项及其依赖项等带来测试数据和测试和构建工具。
2021-04-19 22:27:29
关于所有相关人员，我不确定语义论点是否与 OP 的问题真的相关 ^^
2021-04-19 22:27:29
但编译成另一种语言而不是字节码或机器码
2021-04-24 22:27:29
“转译器”只是一个编译器。
2021-05-09 22:27:29
@HunterMcMillen 字节码和/或机器码是另一种语言。术语“转译器”除了“编译器”之外没有其他含义。
2021-05-10 22:27:29 
                                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

[请参阅此捆绑过程 ⇗ ]

@yeahman "real world files"是项目部署或生产时的文件数。
2021-04-25 22:27:29
你说的真实世界文件是什么意思？
2021-04-27 22:27:29
我猜-3是因为没有做总和，但现在我有:)
2021-04-28 22:27:29
还有大小计数，只有 3 个文件，但它们可能很大（用于网络）
2021-05-02 22:27:29

您的开发配置没有任何问题。

您的生产配置有问题。

当您开发“Angular 2 项目”或“任何基于 JS 的项目”时，您可以使用所有文件，您可以尝试所有文件，您可以导入所有文件。但是如果你想为这个项目服务，你需要组合所有结构化文件并摆脱无用的文件。

有很多选项可以将这些文件组合在一起：

您不应该（需要引用）在服务器上将文件连接在一起。最多，我会使用转译器。
2021-04-15 22:27:29
@DanPantry 我同意你的看法。但在评论中提问者说“因为我的部署（谷歌应用引擎）只允许 10K 文件”。在这些情况下，我们需要减少文件数。
2021-04-15 22:27:29
我同意你的看法，但 OP 在这里似乎有一个 XY 问题
2021-05-03 22:27:29
..是的，但我不确定你的观点。我的观点是您可能不应该尝试缩小服务器代码（通过连接文件从而减小文件大小）。如果您使用 async/await 之类的出血功能，您最多应该在代码中使用 Babel。
2021-05-07 22:27:29
@DanPantry Transpilers 是源到源编译器。我认为他们只能将“X”更改为“JS”。文件数相同。
2021-05-10 22:27:29

正如一些人已经提到的： node_modules 目录（包的 NPM 位置）中的所有文件都是项目依赖项（所谓的直接依赖项）的一部分。除此之外，您的依赖项也可以有自己的依赖项等等（所谓的传递依赖项）。几万个文件没什么特别的。

因为你只被允许上传 10'000 个文件（见评论），我会使用打包引擎。该引擎将捆绑您所有的 JavaScript、CSS、HTML 等，并创建一个捆绑包（或更多，如果您指定它们）。您的 index.html 将加载这个包，就是这样。

我是 webpack 的粉丝，所以我的 webpack 解决方案将创建一个应用程序包和一个供应商包（有关完整的工作应用程序，请参见此处https://github.com/swaechter/project-collection/tree/master/web-angular2-示例）：

索引.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 开销（更少的 Http 往返）。

但它和 IPv6 一样：人们真正使用 Http 2 还需要几年时间

@mdentinho 是的，在更现代的版本中。但是在 2016 年 SystemJS 和 CLI 是要走的路（很高兴我们现在有了 webpack）
2021-04-20 22:27:29
虽然没有必要，因为 OP 提到 using angular-cliwhich 已经带有捆绑器（建议使用相同的 webpack）。
2021-05-06 22:27:29

您需要确保您只是从Angular CLI生成的项目中部署 dist（distributable 的缩写）文件夹。这允许该工具获取您的源代码及其依赖项，并且只为您提供运行应用程序所需的内容。

话虽如此，在通过`ng build --prod 进行生产构建方面，Angular CLI 存在/存在问题

昨日（2016年8月2日）释放已完成其切换的构建机制，从西兰花+ systemjs到的WebPack成功地处理产品构建。

基于这些步骤：

ng new test-project
ng build --prod

我看到此处列出的14 个文件中的文件dist夹大小为1.1 MB：

./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

注意当前要安装 angular cli 的 webpack 版本，您必须运行...npm install angular-cli@webpack -g

其它你可能感兴趣的问题
上一篇如何在 x 轴上获取 highcharts 日期？ 下一篇双感叹号？