关于gulp中concat的疑惑。

Question

问题一：如果有10来个js文件的引入，并且有类似jquery或者更多更大的库做依赖，那么合并成一个js文件岂不是很大，加载不是很慢吗？（如果异步加载，页面渲染完了，许多依赖js的效果迟迟不出现用户体验岂不是很差。）

问题二：js合并的顺序问题，之前看到平台上有这样的解决方案：

gulp.task('scripts', function() {

  gulp.src(['a.js', 'b.js', 'c.js'])

    .pipe(concat('main.js'))

});

那如果超多的js这个数组岂不是很长，怎么解决这个问题呢？

我今天才看到gulp，所以有很多还不太理解，请各位指教。

Answer 1

js的引入需要你的一定的取舍，并且必须要减少大小与个数，一般最后会选择打包为2-3个js文件，或是1+n的模式，这可能是每个项目都不太相同。一般来说一个是vender.js，用来打包全部的运行工具库，例如jquery或是loadsh之类的基本每个页面都会用到的，然后其他的就是单个文件内引用到的或是仅仅是某几个页面才使用到的js代码，分别打包并且分别引用。一般来说，js引用最多的都是首页之类的多内容形式页，例如这种如果实在是引入的太多，可以从优先加载首屏使用到的js文件，以及优先加载首屏渲染效果用的js文件这两个方面去思考加载顺序，而不是简单粗暴的全部打包成一个。其实一般也不会超过5个，以我上面回答的架构来说，只有vender.js才有可能会用到concat，也就没有那么多了。