怎么实现同一个工程内分包?

分包.png


laya目前的分包,只是相当于一个工程生成的JS去调用另一个工程的JS包,而不能像原生AS那样把同一个工程里的代码,分拆成一个主应用程序包和若干个模块程序包。
已邀请:

layabox

赞同来自: 15068753667

先纠正一下,LayaFlash的分包,并非是一个工程的js去调用另一个工程的js包。
 
完全可以根据自己的需求,将项目的若干个模块进行分包。只是,LayaFlash的分包方案与原生的Flash项目的分包方案有所不同。请参考如下分包介绍!


分包过程大体如下:
一、AS3项目的分包
1、建立一个分包专用目录,在这个分包目录里开发,或者将原项目要想通过分包引用的文件放到分包目录内。
如图:
 

说明:上图layaFlashSplitJS是AS3项目的目录,layaFlashSplitJS_HomeModule是以后所有分包目录的总目录,在这个目录下,每一个目录下的as文件,包括这个子目录中的文件,在后面的编译环节里,单独编译成一个JS文件,从而实现分包,layaFlashSplitJS_HomeModule这个目录的名字,开发者可以自行定义,这里的命名仅作参考。
2、在layaFlashSplitJS_HomeModule目录中,创建实际的分包目录,如果是已有项目,可以直接把要分包的目录copy过来。如图:
 
3、将总的分包目录导入到项目中,让分包目录中的代码与项目成为一个整体。不同的工具下导外的方式不同,这里以Flash Builder和FlashDevelop进行举例。
A、Flash Builder
 
B、FlashDevelop
点击右边项目栏上方的“项目属性”:
 
再点击“添加类路径”,在随后打开的文件浏览器中定位至分包代码所在的目录:
 

至此AS3项目的分包环节结束,建议每一个大型项目,项目研发之初就规划好分包环节。

二、使用layaFlash引擎的方法去引入分包
1、采用LayaFlash提供的importJS方法引入包文件,比如HomeView.as类是“外部路径”目录下的一个类文件,以在AS3项目中调用这个类为例,我们来看看如何让AS3项目在编译成H5后调用分包文件中的代码。
A、先看看入口文件Main类的代码:
package
{

import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import login.LoginView;
public class Main extends Sprite
{

public function Main():void
{
if (stage)
init();
else
addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{

removeEventListener(Event.ADDED_TO_STAGE, init);
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;

IFlash.setSize(1000, 600); //2D项目中设置场景尺寸
IFlash.setOrientationEx(1); //是否为横屏模式
IFlash.setBgcolor("#000000"); //背景色
IFlash.showInfo(false); //是否显示帧率

var loginView:LoginView = new LoginVie();
this.addChild(loginView);

}

}
}

B、LoginView类是第一个界面,这个类展示如何引入分包文件:
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("homeModule.js", homeModuleComplete);
//导入包文件 "homeModule.js"
}

private function homeModuleComplete():void
{
var homeView:HomeView = new HomeView();
this.stage.addChild(homeView);
trace("首页模块加载完毕!");
}
}
}

这里的代码通过调用importJS方法引入了分包文件“homeModule.js”,这里的homeModule.js是通过LayaFlash编译分包目录的代码生成,一会再详细讲一下分包编译配置环节。

三、分包编译配置环节
1、创建一个名为“module.def”的配置文件,此文件需保存在项目源码目录(“src”文件夹)的同级目录下,
如图:
 
2、定义“module.def”文件时的内容如下:
module:"分包对应分包目录1的JS文件名,自己定义"
path:"分包目录所在的绝对路径/分包目录1"
module:"分包对应分包目录2的JS文件名,自己定义"
path:"分包目录所在的绝对路径/分包目录2"
(如果还要继续分包,按照module,path,继续定义即可)
3、完成以上两步后,再进行编译项目的时候,就不会是只有一个完整的全包项目JS,而是除了一个主JS之外,还会编译生成出来各个不同的分包JS,从而实现HTML5项目的JS分包。
如图:
 
该图内,就是分包后,编译出的多个JS文件。
 

cuixueying

赞同来自: WLDragon

分包的目的是:
(1)、为了减小主JS文件的体积,加快文件的载入速度;
(2)、实现动态热更新;

你的问题:


laya目前的分包,只是相当于一个工程生成的JS去调用另一个工程的JS包,而不能像原生AS那样把同一个工程里的代码,分拆成一个主应用程序包和若干个模块程序包?


分包之前,转换后会生成一个主的js文件,由于该主js文件体积较大,导致载入速度缓慢。
为了加快文件的载入速度,我们通过分包的方法,减小主js文件的体积,加快载入速度。
分包后,将原来较大的主js文件分成若干个小的js文件,通过在初始化函数中使用importJS()方法对分包后的js文件直接进行调用,而并非是一个工程的js去调用另一个工程的js包。
至于怎么分包,完全是根据自己的需求,你可以将你项目的若干个模块进行分包,完全可以做到。

mylukelu

赞同来自:

已经明白怎么分包了。哈哈!

erwer8363

赞同来自:

有没有例子啊,关于分包的?现在项目遇到一个问题,主文件编译出来1.5兆,太大了。。想用分包试试

要回复问题请先

商务合作
商务合作