将多个JavaScript文件合并到一个JS文件中


90

我在Web应用程序中使用jquery,我需要将更多jquery脚本文件加载到单个页面中。

Google建议我将所有的jquery脚本文件合并为一个文件。

我怎样才能做到这一点?

Answers:


52

在Linux上,您可以使用简单的Shell脚本https://github.com/dfsq/compressJS.sh将多个javascript文件合并为一个。它利用了Closure Compiler在线服务,因此生成的脚本也得到了有效压缩。

$ ./compressJS.sh some-script.js another-sctipt.js onemore.js

1
可以与把手一起使用吗?
丹·贝克

3
最好使用任务管理器(例如Grunt,Gulp和其他类似的工具)自动执行此操作。使用Grunt,我将我的less,打字稿,车把编译到一个生成的文件夹中,然后将js / css文件也复制到生成的文件夹中,最后我还将所有.js文件和一个css fille缩小到一个js文件中。所有.css文件。而且我有一个观察者,可以在文件更改时重新运行该配置,以便可以保存文件并刷新浏览器,并且所有更改已在1-3秒内应用。
Vadorequest,2015年


18

只需合并文本文件,然后使用诸如YUI Compressor之类的工具即可

文件可以使用命令容易地组合cat *.js > main.js和main.js然后可以通过YUI压缩机使用中运行java -jar yuicompressor-x.y.z.jar -o main.min.js main.js

2014年8月更新

我现在已经迁移到使用Gulp进行javascript串联和压缩,就像使用各种插件和一些最小配置一样,您可以执行诸如设置依赖项,编译coffeescript等以及压缩JS的操作。


YUI压缩机链接已死。
改革

11

您可以通过

  • 一个。手动:将所有Javascript文件复制到一个文件中,在其上运行压缩程序(可选,但建议使用),然后上传到服务器并链接到该文件。
  • b。使用PHP:只需创建所有JS文件及其include所有数组,然后将其输出到<script>标记中

1
不建议使用选项B,因为它会使您的浏览器对所有较小的单个.js文件(较慢)发出许多请求,而不是对较大的.js文件(较快)发出一个请求。
Mikepote

5
@Mikepote,是的...因此,我使用了一个词,include即不要将<script src =“ ....”>链接到多个文件,只需将它们包含在一个script元素中即可。理想情况下,应使用带有适当缓存的CDN。
加里·格林

抱歉,我看错了您的答案。
Mikepote

3
你能在这里举一些例子吗?
Anand Solanki 2014年

最好使用readfile()以避免解析开销并意外地解释某些内容。
Chinoto Vokro'3

9

我通常在Makefile

# All .js compiled into a single one.
compiled=./path/of/js/main.js

compile:
    @find ./path/of/js -type f -name "*.js" | xargs cat > $(compiled)

然后运行:

make compile

希望对您有所帮助。


8

我在Linux https://github.com/eloone/mergejs上使用此shell脚本。

与上述脚本相比,它具有使用非常简单的优点,并且最大的优点是您可以在输入文本文件中而不是在命令行中列出要合并的js文件,因此您的列表可重复使用并且您不必每次要合并文件时都键入它。这非常方便,因为您每次要投入生产时都会重复此步骤。您也可以注释不想合并到列表中的文件。您最有可能键入的命令行是:

$ mergejs js_files_list.txt output.js

并且如果您还想压缩生成的合并文件:

$ mergejs -c js_files_list.txt output.js

这将output-min.js通过Google的闭包编译器来创建。要么 :

$ mergejs -c js_files_list.txt output.js output.minified.js

如果您要为缩小文件指定一个特定名称,即 output.minified.js

我发现它对于一个简单的网站确实很有帮助。


7

脚本分组会适得其反,您应该使用http://yepnopejs.com/http://headjs.com之类的东西并行加载它们


5
合并javascript文件有充分的理由。例如,请求20个2kb的文件比请求一个40 kb的文件花费的时间更长。
2015年

1
每千次发生几次?
胶囊

4
比您想像的更多。甚至看一下stackoverflow的源代码:“ ...不建议使用选项B,因为它会使您的浏览器对所有小的.js文件(慢)发出许多请求,而不仅仅是对更大的.js发出一个请求。文件(更快)。”
Joel B

4
@Capsule我不想告诉你,但是互联网正在迅速从jQuery转移到MVC JavaScript,加载一个文件总是比触发多个HTTP请求更快。
Foxhoundn

1
@Foxhoundn互联网也正在迅速转移到HTTP2,因此不再重要。无论如何,jQuery只是一个示例,您可能会遇到与MVC JS完全相同的问题
Capsule

7

将此脚本复制到记事本并另存为.vbs文件。在此脚本上拖放.js文件。

ps。这仅适用于Windows。

set objArgs = Wscript.Arguments
set objFso = CreateObject("Scripting.FileSystemObject")
content = ""

'Iterate through all the arguments passed
for i = 0 to objArgs.count  
    on error resume next
    'Try and treat the argument like a folder
    Set folder = objFso.GetFolder(objArgs(i))
    'If we get an error, we know it is a file
    if err.number <> 0 then
        'This is not a folder, treat as file
        content = content & ReadFile(objArgs(i))
    else
        'No error? This is a folder, process accordingly
        for each file in folder.Files
            content = content & ReadFile(file.path)
        next
    end if
    on error goto 0
next

'Get system Temp folder path
set tempFolderPath = objFso.GetSpecialFolder(2)
'Generate a random filename to use for a temporary file
strTempFileName = objFso.GetTempName
'Create temporary file in Temp folder
set objTempFile = tempFolderPath.CreateTextFile(strTempFileName)
'Write content from JavaScript files to temporary file
objTempFile.WriteLine(content)
objTempFile.Close

'Open temporary file in Notepad
set objShell = CreateObject("WScript.Shell")
objShell.Run("Notepad.exe " & tempFolderPath & "\" & strTempFileName)


function ReadFile(strFilePath)
    'If file path ends with ".js", we know it is JavaScript file
    if Right(strFilePath, 3) = ".js" then       
        set objFile = objFso.OpenTextFile(strFilePath, 1, false)
        'Read entire contents of a JavaScript file and returns it as a string
        ReadFile = objFile.ReadAll & vbNewLine
        objFile.Close
    else
        'Return empty string
        ReadFile = ""
    end if  
end function

5

您可以按照orangutancloud的建议使用Closure编译器。值得指出的是,您实际上不需要编译/缩小JavaScript,应该可以将JavaScript文本文件简单地串联为单个文本文件。只需按照页面中通常包含的顺序加入即可。


是的,很好。如果您或插件作者没有遵循良好的语法,或者尝试调试,则关闭编译器可能会很棘手。但是,如果您以最基本的模式使用它,可能会有所帮助。我个人非常喜欢Dojo,并将其构建系统与dojo项目一起使用,这确实有助于将所有内容保存在一个文件中。但这仅对部署有用,对开发无用。
汤姆·格鲁纳

4

如果您运行的是PHP,我建议您使用Minify,因为它确实可以同时组合和最小化CSS和JS。配置完毕后,就可以正常工作了,它会处理所有事情。



2

您可以使用我制作的脚本。但是,您需要JRuby来运行它。 https://bitbucket.org/ardee_aram/jscombiner(JSCombiner)。

区别在于它可以监视javascript中的文件更改,并将其自动组合到您选择的脚本中。因此,无需在每次测试时手动“构建” JavaScript。希望它能对您有所帮助,我目前正在使用此功能。


0

这可能需要一些努力,但是您可以从Codeplex下载我的开源Wiki项目:

http://shuttlewiki.codeplex.com

它包含一个使用http://yuicompressor.codeplex.com/项目的CompressJavascript项目(和CompressCSS)。

该代码应该是不言自明的,但是无论如何,对于我来说,合并和压缩文件都非常简单--- :)

ShuttleWiki项目显示了如何在构建后事件中使用它。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.