本文共 2092 字，大约阅读时间需要 6 分钟。

我做的是基于HTML5的项目，在手机端浏览器中运行。当开发的模块越来越多时打包生成的app.js会越来越大，如何提高加载速度是后期增加新功能的关键

思路1、基础模块打包在一个app.js中 并且 运行其中的某个模块时实现类的动态加载 2、新增加的高级功能  不再打包到app.js中 而是实行动态加载文件的形式完成

架构如下

具体做法

     写一个公共controller，起到路由的作用：

Ext.define('Order.controller.redirectManage', {

    extend: 'Ext.app.Controller',     requires: [         'Ext.app.Route'     ],     config: {         routes: {             'redirectRefundDetail/:refundId': 'redirectRefundDetail',             'redirectTradeDetail/:tid/:dt': 'redirectTradeDetail',             'detail/:utilList/:tid': 'detail',             'toRateManage/:obj': 'toRateManage',             'toPersonalCenter/:param': 'toPersonalCenter',             'menu2List/:param': 'menu2List'         }     },     redirectRefundDetail: function(refundId) {         var obj = {};         obj.refundId = refundId;         Order.app.loadController('Order.controller.RefundDetailManage',obj);     },     redirectTradeDetail: function(tid, dt) {         var obj = {};         obj.tid = tid;         Order.app.loadController('Order.controller.TradeDetailManage',obj);     },     detail: function(utilList, tid) {         var obj = {};         obj.tid = tid;         Order.app.loadController('Order.controller.TradeDetailManage',obj);     },     toRateManage: function(obj) {         Order.app.loadController('Order.controller.rateManage',obj);     },     toPersonalCenter: function(param) {         Order.app.loadController('Order.controller.PersonalCenter',param);     },     menu2List: function(param) {         Order.app.loadController('Order.controller.TradeListManage',param);     } });

一个公共方法用来实例化controller

 loadController: function(controllerName, obj) {

            if (Ext.isEmpty(Order.app.getController(controllerName))) {             var instances = Order.app.getControllerInstances(),                 controller = Ext.create(controllerName, {                     application: Order.app                 });                                   instances[controllerName]=controller;                                     Order.app.setControllerInstances(instances);                        Order.app.setStores(controller.getStores());             var classes=[];             classes = classes.concat(controller.getModels().concat(controller.getViews()).concat(controller.getStores()));             Ext.require(classes,function(){                 Order.app.instantiateStores();                 controller.toInit(obj);             },Order.app);                     }else{             Order.app.getController(controllerName).toInit(obj);                 }     }

A,B,C等controller中包含一个toInit方法，用来初始化进入该模块

如下

    toInit: function(obj) {         location.href="#menu2refund";     }