클라이언트 스크립트를 복합 스크립트로 결합

아티클
10/22/2014

업데이트: 2007년 11월

ASP.NET AJAX 응용 프로그램에서 컨트롤의 클라이언트 동작은 JavaScript 파일을 사용하여 정의됩니다. 일반적으로 JavaScript 파일 하나가 컨트롤 하나의 클라이언트 동작을 정의합니다. 웹 페이지에 여러 컨트롤이 포함된 경우 브라우저에서는 JavaScript 파일 여러 개를 다운로드해야 합니다. 파일 하나를 다운로드하는 데 걸리는 시간은 적지만 웹 페이지에 많은 컨트롤이 포함된 경우 파일 여러 개를 다운로드하는 데 필요한 시간이 페이지에 대해 사용자가 인식하는 성능에 영향을 미칠 수 있습니다.

해결책은 JavaScript 파일 여러 개를 복합 스크립트라고 하는 파일 하나로 합치는 것입니다. 이렇게 하면 브라우저 요청 수가 줄어듭니다. 결과적으로 사용자가 느끼는 다운로드 시간이 더 빨라지고 웹 서버의 부하가 줄어듭니다.

ASP.NET AJAX에서는 ScriptManager 컨트롤이나 ScriptManagerProxy 컨트롤의 복합 스크립트 참조를 사용하여 JavaScript 파일 여러 개를 복합 스크립트 하나로 결합할 수 있습니다. 스크립트에 다른 스크립트의 함수를 호출하는 것과 같은 종속성이 있는 경우 적절한 순서로 스크립트가 등록되도록 스크립트를 관리해야 합니다.

브라우저가 스크립트 압축을 지원하는 경우 자동으로 복합 스크립트가 압축되어 브라우저로 전송됩니다. 유일한 예외는 ASP.NET에서 항상 스크립트를 압축하지 않은 상태로 전송하는 Microsoft Internet Explorer 6.0입니다.

복합 스크립트 만들기

ASP.NET AJAX 응용 프로그램에서는 ScriptManager 컨트롤을 사용하여 자동으로 복합 스크립트를 만들 수 있습니다. 스크립트를 결합하려면 CompositeScript 요소를 추가하고 복합 스크립트에 포함할 순서대로 스크립트 참조를 나열합니다.

다음 예제에서는 ScriptManager 컨트롤에서 ComposteScript 요소를 사용하여 클라이언트 스크립트를 결합하는 방법을 보여 줍니다. 사용자가 단추 중 하나를 클릭하면 복합 스크립트의 함수가 호출되고 해당하는 span 요소가 업데이트됩니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Combining Scripts</title>
</head>
<body>
    <form id="form1" >
    <asp:ScriptManager ID="ScriptManager1" >
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/Script1.js" />
                <asp:ScriptReference Path="~/Scripts/Script2.js" />
                <asp:ScriptReference Path="~/Scripts/Script3.js" />
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>
    <h2>Combining Scripts</h2>
    <p>This example shows how to combine multiple client scripts into
    a single composite script.</p>
    <div>
        <input id="Button1" type="button" value="Button 1" onclick="buttonClick1()" />
        <span id="Span1"></span><br /><br />
        <input id="Button2" type="button" value="Button 2" onclick="buttonClick2()" />
        <span id="Span2"></span><br /><br />
        <input id="Button3" type="button" value="Button 3" onclick="buttonClick3()" />
        <span id="Span3"></span>
    </div>
    </form>
</body>
</html>

이 예제를 간단하게 하려면 다음과 같이 매우 유사한 스크립트를 사용합니다. 다음 스크립트는 모두 span 요소를 찾아 짧은 메시지를 씁니다.

function buttonClick1()
{
    var text = Sys.UI.DomElement.getElementById("Span1");
    text.innerHTML = "You clicked Button 1. (Script1)";
}

function buttonClick2()
{
    var text = Sys.UI.DomElement.getElementById("Span2");
    text.innerHTML = "You clicked Button 2. (Script2)";
}

function buttonClick3()
{
    var text = Sys.UI.DomElement.getElementById("Span3");
    text.innerHTML = "You clicked Button 3. (Script3)";
}

복합 스크립트의 소스

복합 스크립트는 로컬 경로에 기반하거나 어셈블리를 참조하는 스크립트 참조를 포함할 수 있습니다. 로컬 경로 기반 스크립트 참조는 ScriptReference 요소의 Path 특성으로 식별됩니다. 어셈블리 기반 참조는 Name 특성으로 식별됩니다. 서버에 없는 스크립트, 즉 네트워크 경로를 참조하는 로컬 스크립트 참조는 사용할 수 없습니다.

복합 스크립트는 다른 복합 스크립트를 포함할 수 없습니다. 복합 스크립트가 웹 페이지에 사용되는 모든 스크립트를 포함할 필요는 없지만 MicrosoftAjax.js와 같은 ASP.NET AJAX 프레임워크 스크립트를 포함할 수 있습니다.

다음 예제에서는 프레임워크 스크립트, 로컬 경로 기반 스크립트 및 여러 개의 어셈블리 기반 extender 스크립트를 결합하는 복합 스크립트를 보여 줍니다.

<asp:ScriptManager id="SM1" >
  <Scripts>
    <asp:CompositeScript>
      <Scripts>
        <asp:ScriptReference Name="MicrosoftAjax.js"/>
        <asp:ScriptReference Name="Custom.Extender.1.js" 
             Assembly="Custom" />
        <asp:ScriptReference Path="Scripts/Custom2.js" />
        <asp:ScriptReference Name="Custom.Extender.2.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.3.js" 
             Assembly="Custom" />
      </Scripts>
    </asp:CompositeScript>
  </Scripts>
</asp: ScriptManager>

이전 예제에서 ScriptManager 컨트롤은 다음과 같은 개별 스크립트를 표시된 순서대로 포함하는 복합 스크립트를 다운로드합니다.

MicrosoftAjax.js
Custom.Extender.1.js
Custom2.js
Custom.Extender.2.js
Custom.Extender.3.js

ScriptManager 컨트롤의 ScriptPath 특성은 결과 복합 스크립트가 아니라 그룹으로 묶인 개별 스크립트에 적용됩니다. 복합 스크립트의 스크립트 경로는 CompositeScript 요소의 Path 특성을 사용하여 정의됩니다.

복합 스크립트에 파일 이름 할당

다음 예제에서 볼 수 있는 것처럼 CompositeScript 요소에 Path 특성을 추가하여 복합 스크립트에 파일 이름을 선택적으로 할당할 수 있습니다.

<asp:CompositeScript Path="~/Scripts/MyCompositeScript.js">

참고:
스크립트 이름에는 쉼표(,)나 파이프 문자(\|)를 사용하지 마십시오.

동적으로 스크립트 참조 수정

스크립트 결합은 ResolveScriptReference 이벤트가 발생한 후에 실행됩니다. 즉, 스크립트 참조를 수정하는 이벤트 처리기를 작성할 수 있습니다. 하지만 스크립트가 등록되는 순서는 수정할 수 없습니다.

페이지 간의 복합 스크립트 공유

여러 페이지에서 복합 스크립트를 공유하여 여러 번 다운로드하지 않게 하려면 마스터 페이지에 복합 스크립트를 추가합니다. 마찬가지로 테마를 사용하여 스크립트 결합을 정의할 수 있습니다.

지역화된 스크립트 결합

EnableScriptLocalization 속성이 true(기본값)로 설정되어 있으면 프레임워크에서 스크립트의 지역화된 버전(사용할 수 있는 경우)을 결합합니다. 지역화된 스크립트는 원래 버전과 동일한 순서와 동일한 모델을 사용하여 결합됩니다.

UpdatePanel 컨트롤로 복합 스크립트 사용

UpdatePanel 컨트롤에 있는 컨트롤이나 사용자 지정 구성 요소의 스크립트를 포함하는 복합 스크립트를 만들 수 있습니다. UpdatePanel의 비동기 포스트백 중에 컨트롤이 복합 스크립트의 일부로 이미 다운로드된 스크립트를 등록하려고 시도할 수 있습니다. 이런 경우 프레임워크에서 단일 스크립트 참조를 제거하고 해당 참조를 이전에 다운로드한 복합 스크립트에 대한 참조로 대체합니다.

다음 예제에서는 UpdatePanel 컨트롤에 정의된 사용자 지정 구성 요소를 지원하는 복합 스크립트 참조를 보여 줍니다.

<asp:ScriptManager id="SM1" >
  <Scripts>
    <asp:CompositeScript>
      <Scripts>
        <asp:ScriptReference Name="MicrosoftAjax.js"/>
        <asp:ScriptReference Name="Custom.Extender.1.js" 
             Assembly="Custom" />
        <asp:ScriptReference Path="~/Scripts/Custom2.js" />
        <asp:ScriptReference Name="Custom.Extender.2.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.3.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.4.js" 
             Assembly="Custom" />
      </Scripts>
    </asp:CompositeScript>
  </Scripts>
</asp: ScriptManager>

<asp:UpdatePanel ...>
  <ContentTemplate>
    ...
    <cc:custom4  id="cc4"... />
    ...
  </ContentTemplate>
</asp:UpdatePanel>

참고 항목

개념

AJAX 및 클라이언트 기능 추가

다음을 통해 공유