What is the best practice for referencing javascript that is specific to a PartialView in asp.net-mvc?

Question

I have an asp.nset-mvc site and I have a partial view that exists in a number of different views.

There is also a .js file that is associated with functionality that is used by that partial view.

Right now i am including that js file in every Parent view that houses this partial view inside the head section.

I am thinking now its easier to maintain by removing that reference to the javascript file from every parent view and just putting that reference inside the body of the partial view. (so its just listed in one place)

Does anyone see any downside to this change? Is this the recommended practice with javascript that is only leveraged by a specfic partial view?

Answer 1

I would ask myself a few questions:

1. How large is the js file? How large is it minified?
2. How much times is it used in an average use in your application?

If it is a large file that isn't used a lot, I would include the script inside of the file and not make a deal about it.

You need to remember that js files are cached, and if the average user will enter the partial view, he will need to download the script.

As for a good practices for script\style handling:

Use combined js files and minify them in production.
This can be done by using a asset manager or by "grouping" js files using bundles.

Bundles
Cassette - For Assets

You can also use "require.js" for dependency script loading.
I haven't used it but from what I know, you can setup modules and js functions that depend on other modules and js files.

RequireJS

Answer 2

It sounds to me like you're better off just keeping it with the rest of your scripts.

You should be bundling, minifying, and "forever caching" the scripts. If you're doing that, then even new users to your site only have a small file to download. By breaking it up into multiple files, you're only hurting things. It's better for them to just download everything they are going to need for your site all at once.

I'd consider separate bundles if you have vastly different sections of your site that you don't expect users to cross. For example, maybe your unauthenticated section and your 'members only' section. Even then, it won't make much difference, so it may make more sense to just bundle them in a way that makes sense for the overall architecture of your site (e.g. perhaps the members only section is a different mvc area).

But pulling out scripts that partials need individually just because not every single page will use it is going to be counter productive.

EDIT: I think I understand better after re-reading. What I said still stands, but emphasis on the bundling. Don't just include individual script references for all your scripts on every page that needs it. Better to basically bundle up all the scripts your site needs and include them on every single page. With caching, users will only download it once, and then make no further script requests as they navigate through your site, instead of each page ending with yet another unique script that requires downloading.