关于 iuap_portal_fe 工程几个优化工作的建议

@GuoYongfeng 2018-11-26 09:05:33发表于 iuap-design/blog

关于 iuap_portal_fe 工程几个优化工作的建议

优化工作一:解决第三方资源重构引入的问题

以下三种方式都会引入第三方资源,出现重复引用和加载的情况。

1、html 引入的第三方

<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/jquery/jquery-1.11.2.min.js"></script>
<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/jquery-mousewheel/jquery.mousewheel.min.js"></script>
<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/knockout/knockout-3.2.0.debug.js"></script>
<!--<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/shindig/container.js"></script>-->
<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/uui/js/u.js"></script>
<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/uui/js/u-tree.js"></script>
<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/uui/js/u-grid.js"></script>
<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/uui/js/u-polyfill.js"></script>
<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/swiper/swiper-3.3.1.min.js"></script>
<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/swiper/swiper.animate1.0.2.min.js"></script>
<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/i18next/i18next.min.js"></script>
<script src="{%=o.htmlWebpackPlugin.options.webContext%}/trd/common.js"></script>
<script src="{%=o.htmlWebpackPlugin.files.chunks['index'].entry %}"></script>

2、gulp打包第三方进 common.js

gulp.task('copyDist' ,function(){
        return gulp.src('./src/trd/**/*.*')
            .pipe(gulp.dest('./dist/trd/'));  //输出
        console.log('copy ok!')
    });

以下为 trd 目录资源:

wechatfe18168cc10d5f40eca4b76dba4b1db7

3、index.js 加载的第三方资源

require('./css/widget/widget.css');
require('./trd/jquery-placeholder/jquery.placeholder.js');
require('./trd/jquery-cookie/jquery-cookie.js');
require('bootstrap');
require('./trd/pubsub/pubsub.js');
window.designer = require('./js/ext/layout.js');
window.widgets = require('./js/ext/widget.js');
require('./components/messenger.js');
require('./components/viewutil.js');
require('./components/interactor.js');
//扩展图标
require('./fonts/icon.config.js');
//skintools
require('./css/skintools.css');
//Router
var directors = require('./trd/director/director');

解决方案

1、src/trd 目录下的 requireconfigwidget 等自定义业务逻辑的代码要从 src/trd 下面移出来,可以在 src 下建一个 core 目录,相关逻辑进行拆分。
2、单独维护一个文件来管理第三方资源的引用,src/index.js 中的相关代码也得移过去。

优化工作二:简化项目的构建配置

1、不再使用 iweb-tool ,工具封装较多不再适用。
2、保留 config 中将前端资源推送到 maven 的部分配置
3、新构建机制以 webpack 4 为基础,也可以采用 uba ,或者采用基础的webpack4的配置向上封装:http://git.yonyou.com/yonyou2018/webpack-course/tree/chapter7

优化工作三:梳理 src/index.js 的业务逻辑

以下五类逻辑都杂糅在一起,可以考虑拆分和优化:

1、资源引用相关的逻辑
2、路由配置相关的逻辑
3、工具类封装
4、公共业务逻辑
5、国际化逻辑

...
// 1、资源引用相关的逻辑
require('./fonts/web-icons/web-icons.css');
require('./fonts/iconfont/iconfont.css');
require('./fonts/portalfont/iconfont.css');
require('./fonts/enterprisefont/iconfont.css');
require('./css/navbar.css');
....
// 2、路由配置相关的逻辑
.....
router.on('/sidebar/:id',function(id){
    initLayout(contextRoot + "/data:layout/" + id, []);
});
router.on('/layout/template', function (id, viewid) {
    var layout = require('./js/ext/template.js');
    layout.init();
});
....

// 3、工具类封装
....
function getParamUrl(name,url) {
    url=url.split('?')[1];
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var str=url.match(reg);
    if(str!=null)return str[2];
    return null;
}
....

// 4、业务逻辑
...
$("body").on('click',function (e) {
    if($(e.target).parents('div.site-skintools').length==0){
        $('.site-skintools').remove();
    }
    if($(e.target).attr('id')=='modelSave'||$(e.target).parents('button').attr('id')=='modelSave'){
        var aryForm = $(e.target).parents('form').serializeArray();
        var ary=[];
...


// 5、国际化逻辑
...
var language = $.cookie('u_locale') || 'zh';
    i18n.init({
        'lng': language,
        'resStore': sources
    }, function (t) {
        $(document).i18n();
    });
...