首頁 web前端 js教程 前端js文件合并的三种方式推荐_基础知识

前端js文件合并的三种方式推荐_基础知识

May 23, 2016 pm 01:15 PM

最近在思考前端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文件合并的三种方式推荐就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

HTTP與節點和HTTP-Console調試 HTTP與節點和HTTP-Console調試 Mar 01, 2025 am 01:37 AM

HTTP與節點和HTTP-Console調試

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

See all articles