项目分包

发布时间:2015-10-29

1.JS代码文件混淆和压缩

  为了减小H5项目的代码文件体积,一定程度保护源码,LayaFlash IDE提供了对JS代码文件进行混淆和压缩的功能。打开LayaFlash IDE,点击菜单栏里的“工具”|“JS压缩”选项:

1c.png

  选择H5目录里需要混淆的JS代码文件,拖拽到弹出的窗口中,然后点击“开始压缩”等待提示压缩即可

2c.png

  进度读取100%后压缩混淆完成:

1_3.png

  打开压缩过的JS文件就会看到文件的所有代码都经工具去除了空格和段落缩进,部分变量名和类名被修改成与原始代码不一样的内容。下图展示了压缩混淆后的部分代码:

1_4.png

  需要注意的是,JS代码压缩混淆工具一次操作一个JS文件。


2.AS3项目下的分包方式

  对项目分包可以减少编译成JS文件后的文件体积,提升首次加载游戏的加载速度。

  分包示例示例源码下载:layaFlashSubpack.rar

  缩减项目体积的另一个方式是使用PNGoo工具压缩项目中的png图片,点击这里下载PNGoo工具。

2.1.创建分包总目录

  建立一个分包专用目录layaFlashSplitJS_HomeModule,在这个分包目录里开发属于此分包的模块代码,或者将原项目中,想通过分包引用的文件放到分包目录内。

111.png

  上图的layaFlashSplitJS是AS3项目的目录,layaFlashSplitJS_HomeModule是以后所有分包目录的as3代码总目录,在这个目录下,每一个目录下的as文件,包括这个子目录中的文件,在后面的编译环节里,单独编译成一个JS文件,从而实现分包,layaFlashSplitJS_HomeModule这个目录的名字,开发者可以自行定义,这里的命名仅作参考。

2.2.创建分包实际目录

  在layaFlashSplitJS_HomeModule目录中,创建实际的分包目录,如果是已有项目,可以直接把要分包的目录copy过来。如图:

2.png

2.3.将分包目录导入项目

  将总的分包目录导入到项目中,让分包目录中的代码与项目成为一个整体。不同的工具下导外的方式不同,这里以Flash Builder和FlashDevelop进行举例。

2.3.1.FlashBuilder

  在项目属性中依次点击“ActionScript构建路径”|“源路径”|“添加文件夹”,在打开的文件浏览器中把这个分包目录设置进来就可以了:

3c.png

2.3.2.FlashDevelop

  A.点击右边项目栏上方的“项目属性”:

3.png

  B.点击“添加类路径”,在随后打开的文件浏览器中定位至分包代码所在的目录,然后点击“确定”,完成分包目录的导入。

3_1.png

  提示:在添加分包目录的文件夹路径时,可以直接添加所有分包目录的总目录。

2.4.AS3分包环节结束

  至此AS3项目的分包环节结束,建议每一个大型项目,项目研发之初就规划好分包环节。接下来是分包编译配置环节。


3.分包编译配置环节

  规划好分包目录后,必须要对“module.def”进行配置,LayaFlash IDE正是通过检测此分包配置文件来确定编译时是否需要把H5项目编译成多个JS文件,实现分包的。下面针对这个环节详细说明。

3.1.创建“module.def”文件

  “module.def”是一个对分包名描述的配置文件,由开发者自行创建。需要注意的是,此文件必须保存在项目源码目录(“src”文件夹)的同级目录下:

1.png

3.2.配置“module.def”文件

module:"homeModule"
path:"D://projects/layaDocument/developerCenter/demos/
layaFlashSplitJS_HomeModule/homeModule"

3.2.1.module:"homeModule"

  homeModule是编译分包后的JS文件名,这个名字自己可以随意定义,也可以与目录名或AS文件名对应。

3.2.2.path:"路径"

  "路径"对应的是AS3项目中要编译成JS文件的分包目录绝对路径。编译器在编译时,会将该目录中的代码,包括其子目录内的代码,编译成一个JS文件,而这个JS文件的名字就是通过module属性来定义命名的。

3.2.3.多个分包文件的配置方式

  如果要配置多个分包目录,生成多个分包文件,只需复制多份module与path进行对应的配置即可。比如:

module:"分包对应分包目录1的JS文件名,自己定义"
path:"分包目录所在的绝对路径/分包目录1"
module:"分包对应分包目录2的JS文件名,自己定义"
path:"分包目录所在的绝对路径/分包目录2"

3.3.生成JS分包文件

  “module.def”配置完成后,使用LayaFlash IDE编译项目后即可按分包配置生成JS文件。生成的 JS文件统一被保存在H5项目输出目录(bin/h5/)下一个名为“js”的文件夹中:

4_1.png

4_2.png

3.4.分包文件的引入和调用

  分包的JS文件生成后,需要采用LayaFlash提供的importJS()方法引用分包文件,才可以正常运行。具体使用方法请参考如下代码:

package login
{
    import flash.display.Sprite;
    import flash.events.Event;
    import home.HomeView;
    import iflash.method.importJS;
    
    public class LoginView extends Sprite
    {
        public function LoginView()
        {
            super();
            addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void
        {
            importJS("js/homeModule.js", homeModuleComplete);
            //导入编译后的JS分包文件 "homeModule.js"       
        }
        
        private function homeModuleComplete():void
        {
            var homeView:HomeView = new HomeView();
            this.stage.addChild(homeView);
            trace("首页模块加载完毕!");
        }
    }
}

3.5.分包引入方法importJS()介绍

  importJS是LayaFlash提供的API,第一个参数是引入目标JS的完整路径。第二个参数是JS文件引入完成后的回调函数。通常在回调函数中编写JS文件引入后的执行逻辑。

3.6.压缩JS分包文件

  除了能对单个JS文件进行压缩混淆操作,也可以对分包后的JS代码文件进行这个操作。

  打开LayaFlashIDE,点击菜单栏里的“工具”|“分包压缩JS文件”选项,弹出分包压缩工具弹出:

5c.png

5.png

  与压缩单个JS文件的操作类似,将需要分包的目录拖入弹窗,点击开始压缩按钮即可开始JS分包代码的压缩混淆。与单个文件的压缩混淆不同,“分包压缩JS文件”功能支持对一个目录下的JS文件进行操作。

3.7.加速器高效压缩JS文件

  与另外两种压缩混淆功能都不同的地方在于,“加速器JS高效压缩”工具是针对需要运行在LayaPlayer(运行器)上的代码进行压缩,压缩后的文件是一个二进制文件,可以极大的提升LayaPlayer载入游戏代码文件的速度。,操作步骤与分包文件的压缩混淆相同,点击“工具”|“加速器JS高效压缩”选项,将JS代码目录拖入弹出的弹窗中,即可自动对目录下的JS文件进行压缩:

7.png

7_1.png