この記事はバンドリングに関するものです。好きです、このように理解できますが、私はまだバンドルまたはバンドルするのが好きです。
バンドルを使用すると、同じ種類のファイルを結合して圧縮し、Web サイトのパフォーマンスを向上させることができます。
Web Essentials のバンドル ファイルは、同じ種類のファイルのグループを結合して圧縮するためのレシピであり、ブラウザがダウンロードするデータ量を制限します。
Web Essentials には 2 つのバンドル タイプがあります:
バンドルを作成する手順は、すべての種類のファイルで同じです。
基本的に、バンドルされたアセット (バンドルに配置されたリソース ファイル) を更新するには 2 つの方法があります:
デフォルトで MyBundle という名前のバンドル ファイルを作成しました。生成した XML ファイルの内容を以下に置きます。ご覧のとおり、生成された XML ファイルにはそれ自体で注釈が付けられていますが、英語で注釈が付けられているだけです。
<?xml version="1.0" encoding="utf-8"?><bundle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/bundle.xsd"> <settings> <!--Determines if the bundle file should be automatically optimized after creation/update.--> <minify>true</minify> <!--Determine whether to generate/re-generate this bundle on building the solution.--> <runOnBuild>false</runOnBuild> <!--Use absolute path in the generated CSS files. By default, the URLs are relative to generated bundled CSS file.--> <adjustRelativePaths>true</adjustRelativePaths> <!--Specifies a custom subfolder to save files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectory /> </settings> <!--The order of the <file> elements determines the order of the files in the bundle.--> <files> <file>/Content/themes/base/jquery-ui.css</file> <file>/Content/themes/base/jquery.ui.accordion.css</file> <file>/Content/themes/base/jquery.ui.all.css</file> </files></bundle>
以下のスプライト ファイルを作成しています:
対応する XML タイプのスプライト ファイルの内容は次のとおりです:
<?xml version="1.0" encoding="utf-8"?><sprite xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/sprite.xsd"> <settings> <!--Determines if the sprite image should be automatically optimized after creation/update.--> <optimize>true</optimize> <!--Determines the orientation of images to form this sprite. The value must be vertical or horizontal.--> <orientation>vertical</orientation> <!--The margin (in pixel) around and between the constituent images.--> <margin>1</margin> <!--File extension of sprite image.--> <outputType>png</outputType> <!--Determine whether to generate/re-generate this sprite on building the solution.--> <runOnBuild>false</runOnBuild> <!--Use full path to generate unique class or mixin name in CSS, LESS and SASS files. Consider disabling this if you want class names to be filename only.--> <fullPathForIdentifierName>true</fullPathForIdentifierName> <!--Use absolute path in the generated CSS-like files. By default, the URLs are relative to sprite image file (and the location of CSS, LESS and SCSS).--> <useAbsoluteUrl>false</useAbsoluteUrl> <!--Specifies a custom subfolder to save files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectory /> <!--Specifies a custom subfolder to save CSS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForCss /> <!--Specifies a custom subfolder to save LESS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForLess /> <!--Specifies a custom subfolder to save SCSS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForScss /> </settings> <!--The order of the <file> elements determines the order of the images in the sprite.--> <files> <file>/Content/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png</file> <file>/Content/themes/base/images/ui-bg_flat_75_ffffff_40x100.png</file> <file>/Content/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png</file> </files></sprite>
ディレクトリのバンドルを生成する場合、ファイルのリストは VS プロジェクトではなくファイル システムから取得されます。したがって、ディレクトリにプロジェクトに含まれていないファイルが含まれている場合、それらはスプライトに含まれます。これを防ぐには、ディレクトリではなくすべてのファイルを手動で選択する必要があります。