向 Angular 4 添加第三方资源

一般来说，我更喜欢添加第三方资源.angular-cli.json

{
  "styles"           : [
    "../bower_components/animate.css/animate.css",
    "../bower_components/chosen/chosen.css",
    "../bower_components/cropper/dist/cropper.css",
    "../bower_components/font-awesome/css/font-awesome.min.css",
    "../bower_components/nprogress/nprogress.css"
  ],
  "scripts"          : [
    "../bower_components/jquery/dist/jquery.js",
    "../bower_components/bootstrap/dist/js/bootstrap.js",
    "../bower_components/bootstrap-progressbar/bootstrap-progressbar.js",
    "../bower_components/chosen/chosen.jquery.js",
    "../bower_components/cropper/dist/cropper.js",
    "../bower_components/fastclick/lib/fastclick.js",
    "../bower_components/nprogress/nprogress.js"
  ]
}

这种方法帮助我在 Angular 2/4 旁边使用 Bower，并且构建过程将所有依赖项整合到一个包中。但大量的依赖关系导致应用程序初始化时间延迟。那么像这样定义所有组件是否比在需要的地方使用组件中的资源更有效呢？

例如：我们在联系人和公司页面中使用日期选择器组件。做“从contacts.component.css和companys.component.css操作导入日期选择器样式”通过牺牲大小来减少加载时间？