Tag Archive | Performance

Minification and Bundling in MVC 4 RC

Asp .NET MVC 4 Release Candidate is out. One of the features that is included is called the minification and bundling feature. This was already there in the beta but in the release candidate version it has changed.

Why should we use it

The reason why we should use the bundling and minification feature is performance. The features increases your loading performance of your website. Every time you reference a JavaScript (like jQuery or your own), or CSS file in your page, the browser makes a call to the server. This is done for each separate reference. Each referenced file has included all the comments and spacing in your file. This makes the file larger then when we should delete those spaced. The bundling and minification feature does this for us.

How does it work

In your Global.asax the CSS and JavaScript files are Bundled with BundleConfig.RegisterBundles(BundleTable.Bundles); line.

image

image

Reference the files in your page.

image

When you run the application and use Fiddler to view the calls to your server, you still see all the files called separately.

image

image

This is because the Bundling and Minification feature by default only work when your not in debug mode. This handy because then you could debug with all the whitespaces in your files and have the performance in the production environment.

See the difference in your production environment:

image

image

Force Bundling and Minification

You can use the BundleTable.EnableOptmizations override but the best way for a little test is to remove the debug=”true” attribute in your web.config.

image

Browser caching

When the feature is active, the browser will cache the files. When you add or change some JavaScript or CSS code, the files are generated again and the version number in the references are updated. In that way, the browser knows that there is a new version and your website wont brake.

image

Use .Where().Select().Single() rather than .Single()

When you use the .Single() lambda statement, you will only get one result. When you only use 1 property of the whole object it is totally waste of the performance. Only get want you want. So you could better use the .Select() statement to get only the property you want.

See the difference below where we have an example for getting the profile picture of an unique user.

.Where().Select().Single()

byte[] imageData = Context.Profiles.Where(p => p.Id == profileId).Select(p => p.Picture).Single();

SELECT
[Limit1].[Picture] AS [Picture]
FROM ( SELECT TOP (2)
    [Extent1].[Picture] AS [Picture]
    FROM [dbo].[Profiles] AS [Extent1]
    WHERE [Extent1].[Id] = @p__linq__0
)  AS [Limit1]

.Single()

byte[] imageData = Context.Profiles.Single(p => p.Id == profileId).Picture;

SELECT TOP (2)
[Extent1].[Id] AS [Id],
[Extent1].[FirstName] AS [FirstName],
[Extent1].[LastName] AS [LastName],
[Extent1].[Birthday] AS [Birthday],
[Extent1].[HideBirthdayYear] AS [HideBirthdayYear],
[Extent1].[Picture] AS [Picture],
[Extent1].[ModifiedOn] AS [ModifiedOn],
[Extent1].[UserId] AS [UserId]
FROM [dbo].[Profiles] AS [Extent1]
WHERE [Extent1].[Id] = @p__linq__0

 

Imagine what the difference would be with nested queries, joins, or even bigger objects (tables) than this example.