前端js文件合并的三种方式推荐

 更新时间:2016年05月19日 11:54:35   投稿:jingxian  
下面小编就为大家带来一篇前端js文件合并的三种方式推荐。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式。

三个方式如下:

1. 一个大文件,所有js合并成一个大文件,所有页面都引用它。

2. 各个页面大文件,各自页面合并生成自己所需js的大文件。

3. 合并多个共用大文件,根据实践情况合并出多个共用js文件,每个页面引用多个共用大文件。

另外在我看来,合并有两个目的:

1. 为了减少请求数。

2. 代码安全考虑(文件分得越多,越容易被人看清)。

PS:注意我说的不是压缩混淆,只是合并

1. 一个大文件

这种方式就是不管三七二十一,所有js合并成一个大文件,所有页面都引用它,即使某些代码可能不会用到。

优点:

(1). 合并简单,使用也简单。

(2). 其他页面可利用缓存优化加载。

缺点:

(1). 页面可能会加载到本页面不使用的代码。

不适用场景:

(1). 这种方式肯定不适用于大型的Web应用,且不论单文件代码量,业务的复杂性也不允许我们这样干(我没见过那个网站这样做的)。

适用场景:

(1). Hybrid应用,无论是Mobile的Hybrid应用,还是PC的Hybrid应用(桌面应用,类似有道团队开发框架hex+chromium +nodejs),都非常适合,本身就不会有请求速度问题,这种位于客户端代码的应用的代码安全更为重要。

PS:当然最重要的还是后端的安全,无论前端是否被破解,后端是否完善输入校验,是否防止越权,后端才是关键,也就是常说一句话“不要相信用户的任何输入”。

2. 各个页面大文件

各个页面合并生成自己所需js的大文件,生成多份js合并。

优点:

(1). 每个页面都用到最精确的js,不会有不相关代码。

缺点:

(1). 有多少个页面,就会生成多个js,导致存在大量共同js代码的冗余。

(2). 共用部分无法使用缓存优化加载。

(3). 合并和使用会相对比较复杂。

这种方式我始终觉得不对劲,小应用直接单个大文件搞定,而大应用更不会这样去做,更不能用在Hybrid应用上,在这样讲究安装包大小的情形下,不能容忍冗余代码。我在思考各种场景时候,都发现能用上面或下面方式解决,而且是更优,所以我觉得这种方式是个鸡肋。

3. 合并多个共用大文件

根据实践情况合并多个共用大文件(例如依赖库分类),再合并本页面所需js文件(例如以业务分类),每个页面引用一个或多个共用大文件和本页面的js文件。

优点:

(1). 共用部分得到加载优化,每个页面引用的也尽可能的做到了不冗余。

缺点:

(1). 多多少少还是会存在某些页面会引用到不需要的代码,共用不并不是完完全全的共用。

适用场景:

(1). 大小型应用都比较适用,每个页面可能存在许多共用部分,合理的分文件合并将非常关键。

总结

这一篇文件只是思考,也只算泛泛之谈。文件合并方法挺多,由后端动态生成或工具直接生成(grunt+requirejs),合并的方式也就以上三种,也取决于我们实践需要。

合并很重要,但不是提倡所有文件都合并起来,有不能合并的,有些单独文件更优的,还是要看具体场景。

以上这篇前端js文件合并的三种方式推荐就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于不同页面之间实现参数传递的几种方式讨论

    关于不同页面之间实现参数传递的几种方式讨论

    下面小编就为大家带来一篇关于不同页面之间实现参数传递的几种方式讨论。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 简单谈谈javascript中this的隐式绑定

    简单谈谈javascript中this的隐式绑定

    在JavaScript中,this 的概念比较复杂。除了在面向对象编程中,this 还是随处可用的。这篇文章介绍了this的隐式绑定,希望大家能够喜欢。
    2016-02-02
  • 荐书|您有一份JavaScript书单待签收

    荐书|您有一份JavaScript书单待签收

    ​学习是一个持续不断的过程,在互联网技术里畅游的程序员们,对学习的渴望更是难以穷尽,下面这篇文章主要给大家分享了关于Javascript相关的书籍,对大家学习Javascript具有一定的参考学习价值,下面来一起看看吧。
    2017-07-07
  • JavaScript稀疏数组示例教程

    JavaScript稀疏数组示例教程

    这篇文章主要为大家介绍了JavaScript稀疏数组的使用示例教程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • JavaScript获取tr td 的三种方式全面总结(推荐)

    JavaScript获取tr td 的三种方式全面总结(推荐)

    这篇文章主要介绍了JavaScript获取tr td 的三种方式,具体操作步骤大家可查看下文详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • 详解js加减乘除精确计算

    详解js加减乘除精确计算

    这篇文章主要介绍了js加减乘除精确计算,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 在Javascript中处理字符串之big()方法的使用

    在Javascript中处理字符串之big()方法的使用

    这篇文章主要介绍了在Javascipt中处理字符串之big()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • JS Attribute属性操作详解

    JS Attribute属性操作详解

    下面小编就为大家带来一篇JS Attribute属性操作详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 深入分析JSONP跨域的原理

    深入分析JSONP跨域的原理

    这篇文章主要介绍了深入分析JSONP跨域的原理,需要的朋友可以参考下
    2014-12-12
  • js技巧收集(200多个) 超强推荐

    js技巧收集(200多个) 超强推荐

    [红色]js技巧收集(200多个) 超强推荐...
    2007-02-02

最新评论