www.msyz188.com中小型项目有需要吞并 JS 和 CSS 吗?

如今大约三十个页面,五大模块
做的时分是把统统的 JS 文件和到一同了~ 保存了一个 config 给后端去配置
CSS 异样也是合到一同…

大约独一的好处便是只需求加载一次。。。

也看了很多说模块化之类的东西,但是都是知其但是不知其以是然
共用的东西很少~~~
以是也不知道怎样分 >_<

以是说, what can i do ?

—————— >_< —————————-

单说分模块的题目吧~~~
还是需求大家的高兴啊 >_< 23333

如今文件大小来说,还是比较小的, 紧缩后才 30 KB ~~~~
那些第三方库一定是不会打包的哟 ~

Gulp

由于我用的 gulp 嘛 俺的文章 https://www.lilonghe.net/arch…
如今是开辟的时分 JS 比较多的页面单分出来
别的的都写在一个 JS 里面,然后有很多个 initXXXXPage
由于写的时分每个页面的 class 差别, 比如 “page-wrapper page-index”
以是会在 init 里面判别这个 class

最后分歧调用统统

$function{
    initXXXPage;
    initXXX1Page;
    initXXX2Page;
    ....
};

啊啊啊啊 好烦呐!好纠结啊!

有条件就把静态资源放CDN,没条件就吞并,或许在自己效力器对静态文件做缓存

应该是把这个页面需求的文件吞并一同吧
不是都放在一个文件吧

30个页面一定不克不及把统统的js,css打包在一同,如许文件体积比较大,资源糜费比较多,不太合适多页面使用,比较公道的做法应该是将每个页面依赖的js,css打包在一同,产品是一个页面对应一个私有js,一个私有css,固然群众的js就没需要打包出来了,比如你的项目依赖了jquery,没需要将jquery打包进私有js,如许做的好处是可以使用缓存,一个页面加载了jquery,其他页面就不需求再加载了。

我集团来说,有两层吞并层级。
第一层文件上的通用化
base、common、特别模块/服从模块/子模块。这种文件定名方法可以运用在资源、脚本、配置等。

第二层代码上的模块化
如一个母版页面,其骨架是

    // 中央框架
    $body.prepend
        + <div id="wrapper">
        +     <div class="header"></div>
        +     <div class="main"></div>
        +  <div class="footer"></div>
        +  <div class="nav"></div>
        + </div>
    ;

然后经过url param来判别以后表现的是什么页面,需求哪些模块(但这里还需求设计职员的辛苦)。如

            // 目标页渲染    
            switchHGP.urlParam.sPage[1] {
                case loading:
                    HGP.fillHtml{unit: loading};
                    break;

                case pay:
                    HGP.fillHtml{unit: pay};
                    break;

                case game_info:
                    HGP.fillHtml{unit: ad_game|game_info|game_guessLike|common_nav};
                    break;

                case game_box:
                    HGP.fillHtml{unit: game_box};
                    break;

                case account_home:
                    HGP.fillHtml{unit: account_info|account_game|common_nav};
                    break;

                case index_typeAppList:
                    HGP.fillHtml{unit: ad_index|game_recentList|index_tab|game_hotList|news_allList|game_newList|game_typeAppList|common_nav};
                    break;

                case index:
                default:
                    HGP.urlParam.sPage[1] = index;    // 更新缺省值
                    HGP.fillHtml{unit: ad_index|game_recentList|index_tab|game_hotList|news_allList|game_newList|game_typeList|common_nav};
            }
            

这里再细分,则可以把纯静态、半静态、及时,以及接口调用、本身调用等按照服从模块分开,如许可以极大的优化代码加载量、央求次数、以及代码重用次数。

以是,普通默许按照3个层级来把服从模块化后,再看哪些服从需求提拔影响范畴的等级。

效力器有吞并js,css的服从,不用手工合。

激活吞并办法:static.boss.com/js/??a.js,b.js?ver=2016

(看完/读完)这篇文章有何感想! www.msyz188.com的分享…

发表评论

姓名 *
电子邮件 *
站点