• 请不要在回答技术问题时复制粘贴 AI 生成的内容
nooper
V2EX  ›  程序员

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

  •  
  •   nooper · Feb 26, 2016 · 2781 views
    This topic created in 3772 days ago, the information mentioned may be changed or developed.

    对于一整个网站单独的 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
    
    Supplement 1  ·  Feb 27, 2016
    压缩大小不要超过 100kb
    6 replies    2016-02-27 15:54:31 +08:00
    zhuangzhuang1988
        1
    zhuangzhuang1988  
       Feb 26, 2016
    webpac + typescript(候选 babel) 结果就几个 js 文件了。。
    nooper
        2
    nooper  
    OP
       Feb 26, 2016 via iPad
    @zhuangzhuang1988 不不样式没有加载出来
    hantsy
        4
    hantsy  
       Feb 27, 2016
    我开始用 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
        5
    clijiac  
       Feb 27, 2016
    r#3 @Jeremial 有一个叫 AngularAMD 的库
    ik0r
        6
    ik0r  
       Feb 27, 2016
    @clijiac 嗯, 看了代码, 原理和我写的是一样的.

    其实关键代码只有一小部分. 但是 angularAMD 为用户作了一些所谓的语法糖, 却引入了更多的复杂度.
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3137 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 60ms · UTC 12:59 · PVG 20:59 · LAX 05:59 · JFK 08:59
    ♥ Do have faith in what you're doing.