angular2项目、Js和Html的捆绑和压缩

Bundling and minification of angular2 project, Js and Html

本文关键字：压缩 Html Js angular2 项目      更新时间：2023-09-26

从angular1(顺便说一下，我喜欢angular2)更新了一个angular2项目，现在已经有一段时间了。

现在我想捆绑项目，但不确定使用什么是最好的捆绑器?我还看到一些帖子说，他们把bundle分成多个文件(如app.bundle.js和vendor .bundle.js)，而其他人则有一个大文件。最好的方法是什么?我一直认为多文件更好，因为浏览器可以同时下载多个文件。你是需要一次性完成这些任务，还是完全使用其他方法?

另外，我如何在angular2应用程序中最小化HTML模板?

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

现在我想捆绑项目，但不确定什么是最好的捆绑器使用?

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

我也看到一些帖子说他们把bundle分成多个文件(如app.bundle.js和vendor .bundle.js)，而其他人则有一个大文件。最好的方法是什么?

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

你的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完全可以在Angular2项目中取代Gulp。

另外，我如何在angular2应用程序中最小化HTML模板?

Webpack有一个HTML迷你插件。

你可以这样使用:

loaders: [
        {
                test: /'.html$/,
                name: "mandrillTemplates",
                loader: 'raw!html-minify' // raw is another loader
        }
    ]
相关文章：