37

そのため、さまざまな場所 (サイト マスターおよびいくつかのビューでの追加の参照) で多数の javascript ファイルを参照する ASP.NET MVC アプリがあります。

可能であれば、そのような参照を単一の .js ファイルに圧縮して最小化する自動化された方法があるかどうかを知りたいです。このような...

<script src="<%= ResolveUrl("~") %>Content/ExtJS/Ext.ux.grid.GridSummary/Ext.ux.grid.GridSummary.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.rating/ext.ux.ratingplugin.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext-starslider/ext-starslider.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.dollarfield.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.combobox.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.datepickerplus/ext.ux.datepickerplus-min.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/SessionProvider.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/TabCloseMenu.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/ActivityForm.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/UserForm.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/SwappedGrid.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/Tree.js" type="text/javascript"></script>

...このようなものに減らすことができます...

<script src="<%= ResolveUrl("~") %>Content/MyViewPage-min.js" type="text/javascript"></script>

ありがとう

4

8 に答える 8

24

個人的には、開発中にファイルを分離しておくことは非常に貴重であり、本番中にこのようなことが重要になると考えています。そのため、上記を行うために展開スクリプトを変更しました。

次のセクションがあります。

<Target Name="BeforeDeploy">

        <ReadLinesFromFile File="%(JsFile.Identity)">
            <Output TaskParameter="Lines" ItemName="JsLines"/>
        </ReadLinesFromFile>

        <WriteLinesToFile File="Scripts\all.js" Lines="@(JsLines)" Overwrite="true"/>

        <Exec Command="java -jar tools\yuicompressor-2.4.2.jar Scripts\all.js -o Scripts\all-min.js"></Exec>

    </Target>

私のマスターページファイルでは、次を使用します。

if (HttpContext.Current.IsDebuggingEnabled)
   {%>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery-1.3.2.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery-ui-1.7.2.min.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.form.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.metadata.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.validate.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/additional-methods.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/form-interaction.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/morevalidation.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/showdown.js") %>"></script>
<%
   }  else  {%> 
  <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/all-min.js")%>"></script>
<% } %>

ビルド スクリプトは、セクション内のすべてのファイルを取得し、それらをすべて結合します。次に、YUI のミニファイヤを使用して、javascript の縮小版を取得します。これは IIS によって提供されるため、IIS で圧縮をオンにして gzip 圧縮を取得します。**** 追加 **** デプロイ スクリプトは MSBuild スクリプトです。また、優れた MSBuild コミュニティ タスク ( http://msbuildtasks.tigris.org/ ) を使用して、アプリケーションの展開を支援しています。

スクリプト ファイル全体をここに掲載するつもりはありませんが、関連する行をいくつか示して、スクリプト ファイルのほとんどの動作を示します。

次のセクションでは、asp.net コンパイラでビルドを実行して、アプリケーションを宛先ドライブにコピーします。(前のステップでは、exec net use コマンドを実行して、ネットワーク共有ドライブをマップしただけです)。

<Target Name="Precompile" DependsOnTargets="build;remoteconnect;GetTime">

        <MakeDir Directories="%(WebApplication.SharePath)\$(buildDate)" />

        <Message Text="Precompiling Website to %(WebApplication.SharePath)\$(buildDate)" />

        <AspNetCompiler
            VirtualPath="/%(WebApplication.VirtualDirectoryPath)"
            PhysicalPath="%(WebApplication.PhysicalPath)"
            TargetPath="%(WebApplication.SharePath)\$(buildDate)"
            Force="true"
            Updateable="true"
            Debug="$(Debug)"
            />
        <Message Text="copying the correct configuration files over" />

        <Exec Command="xcopy $(ConfigurationPath) %(WebApplication.SharePath)\$(buildDate) /S /E /Y" />

     </Target>

すべてのソリューション プロジェクトがコピーされた後、これを実行します。

    <Target Name="_deploy">
        <Message Text="Removing Old Virtual Directory" />
        <WebDirectoryDelete
            VirtualDirectoryName="%(WebApplication.VirtualDirectoryPath)"
            ServerName="$(IISServer)"
            ContinueOnError="true"
            Username="$(username)"  
            HostHeaderName="$(HostHeader)"
            />

        <Message Text="Creating New Virtual Directory" />

        <WebDirectoryCreate 
            VirtualDirectoryName="%(WebApplication.VirtualDirectoryPath)" 
            VirtualDirectoryPhysicalPath="%(WebApplication.IISPath)\$(buildDate)"
            ServerName="$(IISServer)"
            EnableDefaultDoc="true"
            DefaultDoc="%(WebApplication.DefaultDocument)"
            Username="$(username)"
            HostHeaderName="$(HostHeader)"
            />
</Target>

デプロイメントの自動化を開始するには、これで十分です。これらすべてを Aspnetdeploy.msbuild という別のファイルに入れました。環境にデプロイする必要があるときはいつでも、msbuild /t:Target だけです。

于 2009-08-03T20:04:40.287 に答える
8

実際には、Web 配置プロジェクト(WDP) を使用すると、はるかに簡単な方法があります。WDP は、aspnet__compilerおよびaspnet__mergeツールの複雑さを管理します。Visual Studio 内の UI でプロセスをカスタマイズできます。

js ファイルの圧縮に関しては、すべての js ファイルをそのままにして、ビルド プロセス中にこれらのファイルを圧縮するだけです。したがって、WDP では次のように宣言します。

<Project>
   REMOVE CONTENT HERE FOR WEB

<Import 
  Project="$(MSBuildExtensionsPath)\MSBuildCommunityTasks\MSBuild.Community.Tasks.Targets" />
<!-- Extend the build process -->
<PropertyGroup>
  <BuildDependsOn>
    $(BuildDependsOn);
    CompressJavascript
  </BuildDependsOn>
</PropertyGroup>

<Target Name="CompressJavascript">
  <ItemGroup>
    <_JSFilesToCompress Include="$(OutputPath)Scripts\**\*.js" />
  </ItemGroup>
  <Message Text="Compresing Javascript files" Importance="high" />
  <JSCompress Files="@(_JSFilesToCompress)" />
</Target>
</Project>

これは、JSMinに基づいていると思われるMSBuild Community Tasksの JSCompress MSBuild タスクを使用します。

アイデアは、すべてのjsファイルをそのままにしておくことです(つまり、デバッグ可能/人間が読める形式)。WDP をビルドすると、最初に js ファイルがOutputPathにコピーされ、次にCompressJavascriptターゲットが呼び出されて js ファイルが最小化されます。これにより、元のソース ファイルは変更されず、WDP プロジェクトの出力フォルダーにあるファイルのみが変更されます。次に、コンパイル済みのサイトを含む WDPs 出力パスにファイルを展開します。この正確なシナリオについては、私の本(私の名前の下のリンク)で取り上げました。

仮想ディレクトリの作成も WDP に処理させることができます。チェックボックスをオンにして、仮想ディレクトリの名前を入力するだけです。

MSBuild に関するいくつかのリンク:

サイード・イブラヒム・ハシミ

My Book: Microsoft Build Engine の内部 : MSBuild と Team Foundation Build の使用

于 2009-08-05T03:15:38.110 に答える
4

Scott Hanselman は最近、基本的に参照と属性を使用して、スクリプトを結合して静的ファイルに移動することについてブログに書いています。ScriptManagerCompositeScriptPath

<asp:ScriptManager runat="server">
    <CompositeScript path="http://www.example.com/1.js">
        <Scripts>
            <asp:ScriptReference />
            <asp:ScriptReference />
            <!-- etc. -->
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

静的ファイルの縮小に関しては、おそらくビルド/デプロイ時に縮小ツールを使用する必要があります (そして使用する必要があります)。

于 2009-08-03T20:02:58.170 に答える
4

MvcContrib.IncludeHandlingは、この状況でうまく機能します。この例では、スタイル (文字列) のコレクションを持つモデルがあります。また、ページにカスタム スタイル/JS を追加する必要がある場合は、それも実行できます。次に、Html.RenderCss を呼び出すと、すべてのスタイル/js が 1 つのファイルにまとめられ、縮小されます。

<head>
<% foreach (var styleSheet in Model.Styles) {%>
<% Html.IncludeCss(styleSheet)); 

<% } %>
<% Html.IncludeCss("~/Scripts/jquery.1.4.2.js")); 

<%= Html.RenderCss() %>
</head>

JavaScript の場合も同様です。

<%
Html.IncludeJs("~/scripts/ConsoleLogger.js");
Html.IncludeJs("~/scripts/jquery.log.js");
Html.IncludeJs("~/Scripts/2010.1.416/jquery.validate.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.calendar.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.datepicker.js");
Html.IncludeJs("~/scripts/jquery.ui.datepicker-en-GB.js");
%>

これがクライアントにレンダリングされると、出力は次のようになります (結合された 1 つのファイルを縮小)

<link rel='stylesheet' type='text/css' href='/include/css/-QdUg9EnX5mpI0e4aKAaOySIbno%40'/>

API はデバッグ フラグも提供します。これは、オンの場合、設定時にスクリプトを縮小または結合しないため、非常に便利です。

ほんの数分で、私は Yslow スコア F から B になりました (24 スクリプトが 2 に減少)... すごい! そして40kbsのドロップ。

明らかな欠点は、サーバーがオンザフライで圧縮を行っていることです。結合されたスクリプトを定義された期間キャッシュするオプションがあると思いますが、これはすぐに軽減されます。

于 2010-05-05T22:53:41.450 に答える
2

他の人が示唆しているように、静的な縮小ビルドを作成することをお勧めします。または、.NET で使用できる YUICompressor のバージョンがhttp://www.codeplex.com/YUICompressorにあります。

于 2009-08-03T22:16:24.437 に答える
2

MvcContrib.IncludeHandling を使用できます。これ:

  • CSSとJSをサポート
  • 1 つのリクエストに結合
  • ミニファイ
  • Gzip/Deflate 圧縮
  • キャッシュ ヘッダーを設定する
  • HTMLHelper 拡張メソッドを使用してインクルードを登録し、実行時にそれらを結合します
  • IoC 経由でプラグ可能

内部では、YUICompressor を使用しています。

于 2010-01-14T09:28:06.800 に答える
0

これを自動的に処理するための何かを書きました。Google のクロージャ コンパイラを使用します。ここでコードを読むことができます:

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

ありがとう

グイド

于 2009-12-10T03:17:27.333 に答える