angular 应用拆分问题，如果压缩代码，减少 js 体积和数量

[nooper]

对于一整个网站单独的 angular 如果只有一个 app 入口，前端的代码会非常的庞大，会显得比较臃肿，所以考虑到 app 进行拆分，但是对于 app 拆分应当尽可能考虑到代码的结构和压缩后代码的大小。
我考虑到拆分后的 angular 目录结构应该是尽可能精简。

部署的 dist 目录结构.

-- dist
   -- css
     -- common.css
     -- app.css
     -- app2.css
     -- app3.css
   -- images
   -- js
     -- common.js
     -- vender
        -- jquery.js
        -- angular.js
        -- angular-common.js
        -- packages.js
        -- packages2.js
     -- bundle
      -- app
        -- app.template.js
        -- app.vender.js
        -- app.router.js
      -- app2
        -- app.template.js
        -- app.vender.js
        -- app.router.js
   -- font

   -- app.html
   -- app2.html
   -- app3.html

[zhuangzhuang1988]

webpac + typescript(候选 babel) 结果就几个 js 文件了。。

[nooper]

@zhuangzhuang1988 不不样式没有加载出来

[Jeremial]

本人正好这两天在写在 angular.js 其中中使用异步加载的文章, 如果感兴趣的话, 可以看看

http://isay.me/2016/02/angular-used-project-from-requirejs-to-webpack-1.html
http://isay.me/2016/02/angular-used-project-from-requirejs-to-webpack-2.html
http://isay.me/2016/02/angular-used-project-from-requirejs-to-webpack-3.html

[hantsy]

我开始用 AngularJS 的时候（ 1.0.x ）， webpack 应该还没出来。

不过 Browserify 倒是关注了一段时间，一直找不到一个好的切入点。

我目前使用的方案相对比较简单，开发和生产环境 build 分开，**开发时几乎不作转换**，大大提高了开发效率。目前我看到的方案不管是 browerify, 还是 webpack 都是开发时任何修改要进行转换，只是开发时不压缩而已。

两年前的一个项目，我们用两个关键的 gulp 插件，
1. gulp-usemin ， 合并最终的资源文件（ JS ， CSS 等）
2. wiredep 自动加入依赖资源

最终我们项目的产出，只有一个 index.html(所有 Angular templates 通过一个 gulp angular template 转换成 JS 合并到一个 JS 文件), 一个第三方 JS vendor.js ，一个项目 JS app.js ，一个第三方 CSS vendor.css ，一个项目 CSS app.css, 其它一些字体图片等.

目前这部分的作法已经放在我 Github 中，代码基于较新的官方 AngularSeed ， 结构上与旧的 AngularSeed 1.0.x 有些差别，请查看 GULP 目录。

https://github.com/hantsy/angularjs-springmvc-sample-boot

1. 测试代码没补上。
2. 没抽出 Service 。

**欢迎 contribute 上面的问题**

现在如果新项目准备转向 Angular2/IONIC 2 了，来个彻底的转变。

[clijiac]

r#3 @Jeremial 有一个叫 AngularAMD 的库

[Jeremial]

@clijiac 嗯, 看了代码, 原理和我写的是一样的.

其实关键代码只有一小部分. 但是 angularAMD 为用户作了一些所谓的语法糖, 却引入了更多的复杂度.