yog-view - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

lib/layer.js

@@ -137,77 +137,96 @@ var path = require('path');
 
-    var asyncToSync = {};
+    var depScaned = {};
 
-    var handledPkg = {};
+    var addedAsync = {
+        async:true
+    };
 
-    var loadDeps = function(res, async) {
-        if (res['deps']) {
-            res['deps'].forEach(function (id) {
-                load(id, async);
-            });
-        }
-
-        if (res['extras'] && res['extras']['async']) {
-            res['extras']['async'].forEach(function (id) {
-                load(id, true);
-            });
-        }
+    var addedSync = {
+        sync:true
     };
 
-    var load = function(id, async) {
-        var uri = '';
-        var info, pkgInfo, url, type;
-        //异步资源即使因为pkg.has引入过，也需要重新处理，向asyncs中添加
-        if (loaded[id] && !async) {
-            if (!async && asyncs[id] && !asyncToSync[id]) {
-                info = asyncs[id];
-                loadDeps(info, async);
-                syncs[info['type']] = syncs[info['type']] || [];
-                syncs[info['type']].push(info['uri']);
-                asyncToSync[id] = info['uri'];
-            }
-            return loaded[id];
-        } else {
-            info = fis.getInfo(id, true);
+    var jsList = [];
 
-            if (info) {
-                type = info['type'];
-                //不重复对同一个pkg处理，避免死循环
-                if (info['pkg'] && !handledPkg[info.pkg]) {
-                    handledPkg[info.pkg] = true;
-                    pkgInfo = fis.getPkgInfo(info['pkg']);
-                    uri = pkgInfo['uri'];
+    var cssList = [];
 
-                    if (pkgInfo['has']) {
-                        pkgInfo['has'].forEach(function (id) {
-                            loaded[id] = uri;
-                        });
+    var timeused = 0;
 
-                        pkgInfo['has'].forEach(function (id) {
-                            loadDeps(fis.getInfo(id, true), async);
-                        });
-                    }
-                } else {
-                    uri = info['uri'];
-                    loaded[id] = uri;
-                    loadDeps(info, async);
-                }
+    /**
+     * 获取同步资源依赖
+     * @param file
+     * @param added 已经处理过的同步资源
+     * @returns {Array}
+     */
+    function getDepList(file, added) {
+        var depList = [];
+        added = added || {};
+        file.deps && file.deps.forEach(function (depId) {
+            if (added[depId]) {
+                return false;
+            }
+            added[depId] = true;
+            var dep = fis.getInfo(depId, true);
+            dep.id = depId;
+            if (!dep){
+                return false;
+            }
+            depList = depList.concat(getDepList(dep, added));
+            depList.push(dep);
+        });
+        return depList;
+    }
 
-                //only the javascript file maybe is a async file.
-                if (!async || type == 'css') {
-                    //skip framework load
-                    if (uri === framework){
-                        return uri;
-                    }
-                    syncs[type] = syncs[type] || [];
-                    syncs[type].push(uri);
-                } else {
-                    asyncs[id] = info;
-                }
+    /**
+     * 获得指定文件的异步资源依赖
+     * @param file
+     * @param added 已经处理过的异步资源
+     * @param depScaned 已经处理过的同步资源
+     * @returns {Array}
+     */
+    function getAsyncList(file, added, depScaned) {
+        var asyncList = [];
+        added = added || {};
+        depScaned = depScaned || {};
+        //对同步依赖进行异步依赖检查
+        file.deps && file.deps.forEach(function (depId) {
+            if (depScaned[depId]) {
+                return false;
+            }
+            depScaned[depId] = true;
+            var dep = fis.getInfo(depId, true);
+            dep.id = depId;
+            if (!dep){
+                return false;
+            }
+            asyncList = asyncList.concat(getAsyncList(dep, added, depScaned));
+        });
+        file.extras && file.extras.async && file.extras.async.forEach(function (asyncId) {
+            if (added[asyncId]) {
+                return false;
+            }
+            added[asyncId] = true;
+            var async = fis.getInfo(asyncId, true);
+            async.id = asyncId;
+            if (!async){
+                return false;
+            }
+            asyncList = asyncList.concat(getAsyncList(async, added, depScaned));
+            //异步资源依赖需要递归添加所有同步依赖
+            asyncList = asyncList.concat(getDepList(async, added));
+            asyncList.push(async);
+        });
+        return asyncList;
+    }
 
-                return uri;
-            } else {
-                // log.warning('not found resource, resource `id` = ' + id);
-            }
+    function load(id){
+        var file = fis.getInfo(id, true);
+        if (file){
+            file.id = id;
+            var depList = getDepList(file, addedSync);
+            var asyncList = getAsyncList(file, addedAsync, depScaned);
+            syncs = syncs.concat(depList);
+            syncs.push(file);
+            asyncs = asyncs.concat(asyncList);
         }
-    };
+    }
 
@@ -250,4 +269,3 @@ if (bigpipe && !hasEventLinstener(bigpipe, 'pagelet:render:before',
             } else {
-                syncs.js = syncs.js || [];
-                ~syncs.js.indexOf(url) || syncs.js.push(url);
+                ~jsList.indexOf(url) || jsList.push(url);
             }
@@ -261,3 +279,9 @@ },
         getJs: function() {
-            return syncs.js;
+            var js = [];
+            syncs.forEach(function(item){
+                if (item.type === 'js'){
+                    js.push(item.uri);
+                }
+            });
+            return js;
         },
@@ -287,4 +311,3 @@
             } else {
-                syncs.css = syncs.css || [];
-                ~syncs.css.indexOf(url) || syncs.css.push(url);
+                ~cssList(url) || cssList.push(url);
             }
@@ -298,3 +321,9 @@ },
         getCss: function() {
-            return syncs.css;
+            var css = [];
+            syncs.forEach(function(item){
+                if (item.type === 'css'){
+                    css.push(item.uri);
+                }
+            });
+            return css;
         },
@@ -347,2 +376,46 @@
 
+        preparePageResource: function(){
+            var depList = syncs;
+            asyncs = asyncs.filter(function (async, index) {
+                //将样式表资源强制设定为同步加载，避免异步加载样式表
+                if (async.type === 'css') {
+                    depList.push(async);
+                    return false;
+                }
+                return true;
+            });
+
+            //生成同步资源引用列表
+            var usedPkg = {};
+            var usedSync= {};
+            depList.forEach(function (dep) {
+                var res = dep;
+                usedSync[res.id] = true;
+                if (res.pkg){
+                    var pkg = fis.getPkgInfo(res.pkg);
+                    if (usedPkg[res.pkg] || !pkg){
+                        return true;
+                    }
+                    pkg.has.forEach(function(has){
+                        usedSync[has] = true;
+                    });
+                    usedPkg[res.pkg] = true;
+                    res = pkg;
+                }
+                if (dep.type === 'js')
+                    jsList.push(res.uri);
+                else if (dep.type === 'css')
+                    cssList.push(res.uri);
+            });
+
+
+            asyncs = asyncs.filter(function (async, index) {
+                //剔除同步资源
+                if (usedSync[async.id]){
+                    return false;
+                }
+                return true;
+            });
+        },
+
         getResourceMap: function() {
@@ -353,2 +426,3 @@ var id, rMap, res, pkg;
                 res = asyncs[id];
+                id = res.id;
 
@@ -386,5 +460,5 @@ if (res['type'] != 'js') {
 
-                if (asyncs[id]['pkg'] && this.fis) {
-                    pkg = fis.getPkgInfo(asyncs[id]['pkg']);
-                    rMap['pkg'][asyncs[id]['pkg']] = {
+                if (res['pkg'] && this.fis) {
+                    pkg = fis.getPkgInfo(res['pkg']);
+                    rMap['pkg'][res['pkg']] = {
                         'url': pkg['uri']
@@ -398,2 +472,5 @@ }
         filter: function(content) {
+
+            this.preparePageResource();
+
             if(~content.indexOf(this.JS_HOOK)) {
@@ -411,5 +488,6 @@ content = this.filterJs(content);
         filterJs: function(content) {
+
             var resourceMap = this.getResourceMap();
             var scripts = this.getScripts();
-            var jses = this.getJs();
+            var jses = jsList;
             var data = {};
@@ -436,3 +514,3 @@
             var styles = this.getStyles();
-            var csses = this.getCss();
+            var csses = cssList;
             var data = {};
@@ -458,3 +536,3 @@
         views: views
-    }
+    };
 };

package.json

 {
   "name": "yog-view",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "An express.js middleware for optimizing the order of js\\css output, and enabling render template in bigpipe mode.",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

22541

increased by9.65%

Lines of code

567

increased by14.55%

No dependency changes