关于gulp中concat的疑惑。

发布于 2022-09-06 00:28:40 字数 350 浏览 14 评论 0

问题一:如果有10来个js文件的引入,并且有类似jquery或者更多更大的库做依赖,那么合并成一个js文件岂不是很大,加载不是很慢吗?(如果异步加载,页面渲染完了,许多依赖js的效果迟迟不出现用户体验岂不是很差。)
问题二:js合并的顺序问题,之前看到平台上有这样的解决方案:

gulp.task('scripts', function() {
  gulp.src(['a.js', 'b.js', 'c.js'])
    .pipe(concat('main.js'))
});

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

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

var gulp = require('gulp'),

concat = require('gulp-concat');

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

gulp.src('src/js/*.js')
    .pipe(concat('all.js'))//合并后的文件名
    .pipe(gulp.dest('dist/js'));

});

写上你的js路径,"*"代表所有后缀为js的文件都会被合并

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文