0

I have site-wide js file (site.js) that goes out with every request.

I have 2 actions on the controller: Action1 and Action2. Each of these actions has a view. Each view references a view-specific js (action1.js and action2.js).

I would like to bundle site.js with action1.js when Action1 method is executing. And when Action2 method, I want to bundle site.js with action2.js.

The bundling should be done at build time.

Is this possible with .Net Core 1.x?

5
  • If this is a new project and you have control over how it is created, I would suggest using webpack to bundle, rather than using any .net bundler Commented Apr 16, 2018 at 21:46
  • This can be done pretty easily with the built in bundler. Each bundle is specific to its view and referenced in that view. You can set up the gulp.js file to bundle on compile, as well as various watches. Commented Apr 16, 2018 at 21:57
  • @nurdyguy Can you provide a link to this process? All I see are really basic examples that bundle everything. Where is a sample that bundles it per view? Commented Apr 17, 2018 at 1:11
  • 1
    Do typical users end up calling both actions are different times? If so, you should really think about bundling all of your .js into a single library (or not bundling at all). The browser will cache the .js so your bundling model here would result in a user having to pull down site.js twice (for each action) rather than just once. Commented Apr 17, 2018 at 1:47
  • @AngryHacker Metoule's solution below is what I was referring to. That's how I would do it. Commented Apr 17, 2018 at 13:39

1 Answer 1

2

It's possible, but there's a lot of menial work involved, because you'll need to manually describe each view's bundle.

Everything you need to know can be found in the official documentation, but here's the gist of it:

  1. Action1.cshtml

I assume that for debugging purposes, you want to include both files on your dev box, while you only want the bundle in production. In your view, you add the following tags:

<environment names="Development">
    <script src="site.js"></script>
    <script src="action1.js"></script>
</environment>
<environment names="Staging,Production">
    <script src="view1.js" asp-append-version="true"></script>
</environment>

When in development, your two files will be included as is, while in production, the bundled file view1.js will be included.

asp-append-version is part of the cache busting mechanism: it will append the file's version to each request to that file (details here).

  1. Create your bundled view1.js

There's a number of various possibilities to create the bundle, but they all revolve around the bundleconfig.json file. The simplest solution uses he BuildBundlerMinifier NuGet package, and simply requires you to add it to your project.

bundleconfig.json would look like this:

[
  {
    "outputFileName": "wwwroot/js/view1.js",
    "inputFiles": [
      "wwwroot/js/site.js",
      "wwwroot/js/action1.js"
    ]
  },
]
  1. Repeat for each view

This is where things get boring, because you'll need to repeat this for each view.

Sign up to request clarification or add additional context in comments.

5 Comments

But where do you specify that the bundle you specified is for a specific view?
And does the bundling happen once per view or on every request?
The bundle is just a collection of files concatenated together (with additional processing, such as minification): there's no strong link between a bundle and a view. The main purpose is to reduce the number of files served by the web server. You're the only one who knows which bundle corresponds to which view. The bundling happens only once, when you build your project. I really recommend you read the documentation for more information.
This seems like a really painful way of doing bundling. In the old version of ASP.NET you specify a bundle and put the code into the page once and it guarantees to deliver the correct scripts to the page. Now we have to configure it twice, once in the bundleconfig.json and a second time in the page for development. Leaving it open to missing the files that are required for the page in your live environment.
I agree, that's extremely painful, which is why I now use webpack. With webpack, you can configure the bundling once, and outside the view.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.