angular2项目、Js和Html的捆绑和缩小答案

【问题标题】：Bundling and minification of angular2 project, Js and Htmlangular2项目、Js和Html的捆绑和缩小
【发布时间】：2016-08-12 09:31:37
【问题描述】：

在从 angular1 更新它之后，现在已经在 angular2 项目上工作了一段时间（顺便说一句，喜欢 angular2）。

现在我想捆绑项目，但不确定最好使用什么捆绑器？我还看到一些帖子说他们将捆绑包拆分为多个文件（如 app.bundle.js 和 vendor.bundle.js），而其他人则有 1 个大文件。最好的方法是什么？我总是认为很多文件会更好，因为浏览器可以同时下载多个文件？您是否需要使用 gulp 任务来完成所有这些任务，或者完全使用其他任务？

另外，如何在 angular2 应用程序中缩小 HTML 模板？

【问题讨论】：

标签： javascript angularjs angular

【解决方案1】：

您可以使用 Webpack 或 Systemjs-Builder 来捆绑您的应用程序。有大量的种子项目可以从中获取提示，例如this 和 this，您可以在 gulp 任务中使用 this 将模板内联到您的构建中。

【讨论】：

【解决方案2】：

现在我想打包项目，但不确定什么是最好的打包工具？

您的问题的所有答案都是主观的，但事实上，Webpack 提供了插件和配置设置来满足您的需求。

我还看到一些帖子说他们将捆绑包拆分为多个文件（如 app.bundle.js 和 vendor.bundle.js），而其他人则有 1 个大文件。最好的方法是什么？

拆分成多个文件绝对是最常用的方法。它允许您将应用程序代码与依赖项分开，从而使调试不再是一场噩梦。

您的 Webpack 配置文件中处理此问题的部分可能如下所示：

  // our angular app
  entry: { 'vendor': './src/vendor.ts', 'main': './src/main.ts' },

  // Config for our build files
  output: {
    path: '',
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
  },

您需要使用 gulp 任务来完成所有这些任务，还是完全使用其他任务？

如果您使用 Webpack，则根本不需要 Gulp。我建议只使用 NPM 脚本。不要引用我的话，但我认为 Webpack 可以完全取代 Gulp 用于 Angular2 项目。

另外，如何在 angular2 应用程序中缩小 HTML 模板？

Webpack 对此有一个 HTML minify plugin。

你可以这样使用它：

loaders: [
        {
                test: /\.html$/,
                name: "mandrillTemplates",
                loader: 'raw!html-minify' // raw is another loader
        }
    ]

【讨论】：