Angular 2,开发环境中非常慢(我是否需要捆绑开发包?)

丁香杆菌

我刚刚使用Angular 2启动了一个新应用程序。我只是在angular.io快速入门之后创建了它。该应用程序确实很慢,经过一些研究,我遇到了一些使用SystemJS + Gulp的解决方案。我做了类似https://stackoverflow.com/a/37082199/3067873的内容,非常适合生产。非常快。但是从另一方面来说,这确实不利于开发。太慢了(捆绑包需要很长时间才能完成)。而且,如果我不使用捆绑软件,速度也会很慢(数百个请求)。我试图创建一个没有我的应用程序转译文件的捆绑软件,但是它不起作用。

一个简短的问题是:设置开发环境的最佳方法是如何避免数百个请求并生成没有我的应用程序转译文件的捆绑包?或任何其他有助于我提高生产力的想法/配置。

gulpfile.js

    var gulp = require('gulp'),
        path = require('path'),
        Builder = require('systemjs-builder');

    var appDev = './app'; 
    var appProd = './app';

    gulp.task('bundle', function() {
        var builder = new Builder('', 'systemjs.config.js');

        return builder
            .buildStatic(appDev + '/main.js', appProd + '/bundle.js', { minify: true, sourceMaps: true})
            .then(function() {
                console.log('Build complete');
            })
            .catch(function(err) {
                console.log('Build error');
                    console.log(err);
                });
        });

    gulp.task('default', ['bundle']);

systemjs.config.js

    /**
     * System configuration for Angular samples
     * Adjust as necessary for your application needs.
     */
    (function (global) {
      System.config({
        paths: {
          // paths serve as alias
          'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
          // our app is within the app folder
          app: 'app',
          // angular bundles
          '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
          '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
          '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
          '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
          '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
          '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
          '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
          '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
          // other libraries
          'rxjs':                       'npm:rxjs',
          'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
          'primeng':                    'node_modules/primeng'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          'angular2-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
          },
          primeng : { defaultExtension: 'js' }
        }
      });
    })(this);
亚历山大·切耶斯基(Alexander Ciesielski)

https://github.com/angular/angular-cli上查看官方的angular-cli

它使用webpack 2,并且针对不同的环境具有不同的设置。开发构建时间相当快。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

是否有必要构建自己的angular 2开发环境?

来自分类Dev

如何在Angular 2应用中配置不同的开发环境

来自分类Dev

我需要Angular CLI来开发Angular应用程序吗?

来自分类Dev

Angular 2拖放指令非常慢

来自分类Dev

对Angular2响应进行局部开发

来自分类Dev

对Angular2响应进行局部开发

来自分类Dev

Angular 2+ 开发框架组件

来自分类Dev

Angular.js本地开发环境设置问题

来自分类Dev

Angular 2捆绑包

来自分类Dev

我正在开发Angular WebApp,但似乎无法使* ngFor正常工作

来自分类Dev

在本地开发时,Angular 会代理我的服务吗?

来自分类Dev

有TS但没有NPM的Angular2上的开发

来自分类Dev

Angular 2 开发和浏览器缓存

来自分类Dev

Angular 2 生产构建错误。在开发中工作正常

来自分类Dev

如何使用我自己的开发服务器运行 Angular 5?有或没有 Angular CLI

来自分类Dev

Angular 2 中的服务捆绑

来自分类Dev

为什么Symfony在产品环境中会丢失开发包?

来自分类Dev

在AWS上将Angular和Django分开(同时仍具有便利的本地开发环境)

来自分类Dev

部署机器上的 Asp.Net Core 2.1 Angular 模板将环境检测为“开发”

来自分类Dev

如何为多个开发人员设置 Angular + Web API 环境

来自分类Dev

Angular2:慢吗?

来自分类Dev

安装libnotify开发包

来自分类Dev

breeze-brideg-angular2:我是否需要创建我的微风实体类

来自分类Dev

在 Angular 模板中检查开发模式

来自分类Dev

是否需要单开发?

来自分类Dev

使用Angular 2时,是否需要在Typescript中复制我的Entity Framework类?

来自分类Dev

为什么我不能安装ncurses开发包?

来自分类Dev

Internet Explorer(10,11)加载Angular 2应用程序非常慢

来自分类Dev

Internet Explorer(10,11)加载Angular 2应用程序非常慢

Related 相关文章

  1. 1

    是否有必要构建自己的angular 2开发环境?

  2. 2

    如何在Angular 2应用中配置不同的开发环境

  3. 3

    我需要Angular CLI来开发Angular应用程序吗?

  4. 4

    Angular 2拖放指令非常慢

  5. 5

    对Angular2响应进行局部开发

  6. 6

    对Angular2响应进行局部开发

  7. 7

    Angular 2+ 开发框架组件

  8. 8

    Angular.js本地开发环境设置问题

  9. 9

    Angular 2捆绑包

  10. 10

    我正在开发Angular WebApp,但似乎无法使* ngFor正常工作

  11. 11

    在本地开发时,Angular 会代理我的服务吗?

  12. 12

    有TS但没有NPM的Angular2上的开发

  13. 13

    Angular 2 开发和浏览器缓存

  14. 14

    Angular 2 生产构建错误。在开发中工作正常

  15. 15

    如何使用我自己的开发服务器运行 Angular 5?有或没有 Angular CLI

  16. 16

    Angular 2 中的服务捆绑

  17. 17

    为什么Symfony在产品环境中会丢失开发包?

  18. 18

    在AWS上将Angular和Django分开(同时仍具有便利的本地开发环境)

  19. 19

    部署机器上的 Asp.Net Core 2.1 Angular 模板将环境检测为“开发”

  20. 20

    如何为多个开发人员设置 Angular + Web API 环境

  21. 21

    Angular2:慢吗?

  22. 22

    安装libnotify开发包

  23. 23

    breeze-brideg-angular2:我是否需要创建我的微风实体类

  24. 24

    在 Angular 模板中检查开发模式

  25. 25

    是否需要单开发?

  26. 26

    使用Angular 2时,是否需要在Typescript中复制我的Entity Framework类?

  27. 27

    为什么我不能安装ncurses开发包?

  28. 28

    Internet Explorer(10,11)加载Angular 2应用程序非常慢

  29. 29

    Internet Explorer(10,11)加载Angular 2应用程序非常慢

热门标签

归档