weixin_39572794
weixin_39572794
2020-12-08 20:37

Huge bundle size

2MB without minification. With a quick look, it seems that angular2, (literally) cryptographic stuff and polyfills have huge portions. Track down unnecessary modules.

该提问来源于开源项目:shuhei/babel-angular2-app

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • weixin_39572794 weixin_39572794 5月前

    Now it's 1.4MB without minification.

    点赞 评论 复制链接分享
  • weixin_39572794 weixin_39572794 5月前

    With angular2 beta.17, it's 1.4MB without minification.

    
    $ ls -lh public/
    total 7704
    -rw-r--r--  1 shuhei  staff   230K Apr 29 21:32 angular2-polyfills.js
    -rw-r--r--  1 shuhei  staff    29K Apr 29 21:32 angular2-polyfills.min.js
    -rw-r--r--  1 shuhei  staff   1.4M Apr 29 21:33 bundle.js
    -rw-r--r--  1 shuhei  staff   2.1M Apr 29 21:33 bundle.js.map
    -rw-r--r--  1 shuhei  staff   369B Apr 29 21:32 index.html
    

    Most of the built file is from angular2. So we cannot reduce the bundle size until angular2's offline compilation is finished.

    
    # List browserify dependencies
    $ ./node_modules/.bin/browserify -t babelify --list src/index.js > deps.txt
    
    # Large files
    $ cat deps.txt | xargs stat -f "%z %N" | sort -nr | head
    142469 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/linker/element.js
    129640 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/di/injector.js
    128361 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/compiler/template_parser.js
    97656 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/change_detection/parser/parser.js
    97584 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/compiler/view_compiler.js
    89995 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/change_detection/differs/default_iterable_differ.js
    84577 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/metadata/directives.js
    82614 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/metadata.js
    81478 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/compiler/html_lexer.js
    78188 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/change_detection/proto_change_detector.js
    
    # Total size (angular2 files have inline source maps)
    $ cat deps.txt | xargs stat -f "%z" | awk '{x+=$0}END{print x}'
    4621015
    $ cat deps.txt | grep '/angular2/' | xargs stat -f "%z" | awk '{x+=$0}END{print x}'
    4584326
    $ cat deps.txt | grep -v '/angular2/' | xargs stat -f "%z" | awk '{x+=$0}END{print x}'
    36689
    
    点赞 评论 复制链接分享
  • weixin_39964899 weixin_39964899 5月前

    It's ~700kB minified and ~200kB gzipped so it isn't that bad

    点赞 评论 复制链接分享
  • weixin_39572794 weixin_39572794 5月前

    Sounds reasonable. Thanks! It's gonna be improved further by offline compilation in the future.

    点赞 评论 复制链接分享

相关推荐