Creating customized JavaScript bundles with TypeScript - a beginner's guide

Our ASP.NET MVC application contains a significant amount of JavaScript code.

To optimize the amount of unnecessary JS being loaded to the browser, we utilize the BundleConfig.cs file to create multiple bundles. On the View, we implement logic to determine:

"If the user can access Feature A, include Bundle A"

By doing this, not only does the end-user receive only the required JS, but the JS is also present only on pages where it is needed. This allows for an easy initialization of code upon page load:

$(featureA.init);

As we consider migrating to TypeScript (currently version 3.3) ...

In Visual Studio 2017, within the Project's TypeScript Build tab, there is an option to "Combine JavaScript output into file:" where a file name can be specified (which could be used for bundling).

  • This results in a single site-wide JS bundle that requires delivering everything to everyone.
  • The on-page-load event is no longer ideal as the JS file is present on irrelevant pages, leading to jQuery selectors in the 'init()' function not finding certain objects in the DOM because the user is not viewing the relevant page.

Is there something I am overlooking? Can TypeScript in Visual Studio 2017 meet these requirements?

javascriptasp.net-mvcvisual-studiotypescript

Answer №1

To achieve your desired outcome, consider using Webpack as your dependency bundler. This powerful tool can help you effectively manage your project dependencies. Check out the following link for more information: https://webpack.js.org/guides/typescript/

Webpack comes with handy plugins such as the CommonsChunkPlugin, which allows you to organize shared modules and optimize browser performance. Additionally, plugins like ExtractTextWebpackPlugin and MiniCssExtractPlugin enable you to extract selective pieces from larger bundles, giving you more control over your project setup.

Answer №2

After looking into Yash's suggestion about using webpack, I realized it could be a valuable tool. However, I couldn't help but wonder if Visual Studio should already have basic capabilities. Did I overlook something?

Upon revisiting my solution, I was able to troubleshoot and resolve the issue without the need for any extra plugins.

First, I disabled the "Combine JavaScript output into file" option. Interestingly, even after disabling it, Visual Studio seemed to retain the setting, requiring a restart to reset it.

Next, I located the generated *.js files resulting from compiling the *.ts files and added them to my project in Visual Studio.

Then, I updated the bundles in the BundleConfig.cs file to incorporate these generated JS files and referenced them in the relevant views.

Upon publishing, the bundles appeared as expected.

My theory is that I overlooked including the *.js files in the Visual Studio project. It seems that if they are not included, they won't be published and thus cannot be included in the bundling process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to convert a button into clickable text that performs the same function as the original button?

Seeking a solution to transform a button into clickable text with the same functionality. Explored resources like Google, StackOverFlow, and Youtube for answers. This is the current code snippet representing the button: <button onclick="mainApp.l ...

javascripthtmlcss

There is no such property - Axios and TypeScript

I am attempting to retrieve data from a Google spreadsheet using axios in Vue3 & TypeScript for the first time. This is my initial experience with Vue3, as opposed to Vue2. Upon running the code, I encountered this error: Property 'items' does ...

typescriptvue.jsvuejs3

Display the information in the second dropdown menu once the selection has been made in the first dropdown menu

I've successfully implemented a feature where selecting an option from the first drop-down list populates the second drop-down list accordingly. The HTML code snippet is as follows: <select size="1" id="BodyPart" title="" name="BodyPart"> ...

javascriptphpjqueryhtmldrop-down-menu

Tips for correctly loading all elements on an HTML page before making CSS modifications

This question has been asked several times in the past. I am asking because when I used the on ready callback in jQuery, it did not change the placeholder text of my element "search_input". $( document ).ready(function() { $("#search_input").attr(' ...

javascriptjquerycssesriarcgis-js-api

Angular Service singleton constructor being invoked multiple times

I have been facing an issue with using an app-wide service called UserService to store authenticated user details. The problem is that UserService is being instantiated per route rather than shared across routes. To address this, I decided to create a Core ...

angulartypescriptangular-servicesangular-routerangular-module

Determining the worth of radio buttons, dropdown menus, and checkboxes

I am working on designing a menu for a pizza place as part of a learning project. The menu allows users to select their pizza size from small, medium, and large using radio buttons, and then customize it further with three select boxes where each selection ...

javascripthtmlajax

unable to submit form using angular and express

I am encountering an issue with a post request in AngularJS to express. The HTML form on the client side is defined as follows: <div ng-controller="LoginCtrl"> <form ng-submit="login()"> <div> <label>Username</lab ...

javascriptangularjsnode.jsexpresspassport.js

After the form is submitted, attach a div containing the saved record

Once the form is submitted, I'd like to seamlessly add the newly saved record to my existing div that holds all the records. If there's a better method for accomplishing this, please let me know. I'm unsure of the correct approach to achiev ...

javascriptruby-on-railsajaxruby-on-rails-4

Preventing scrolling in one div while focusing on another div

I am currently in the process of creating a website that functions as a single page site. The main feature of the site is a masonry grid of images. When a user clicks on an item, a detailed panel slides in from the left. Once the panel is closed, it slide ...

javascriptjqueryhtmlcss

Proper usage of a method within another method in a Vue component

Currently, I am extracting GPS data from an image using exifjs. My objective is to convert the latitude and longitude variables into a decimal variable as illustrated below: <template lang="html"> <div class="upload-wrap"> <button cla ...

javascriptvue.jsvuejs2

Switch out the Select feature for Checkboxes

Hey there! I'm currently trying to enhance the style and functionality of the Select checkboxes on my blog. However, when I change them to checkboxes, they lose their original function of searching for selected tags in each Select option. This issue i ...

javascripthtmlblogger

Loading JavaScript asynchronously using ExtJS

I have created a custom widget using the ExtJS framework. In order to load the necessary ext-all.js script asynchronously, I wrote an embedd.js script that also combines other JavaScript files. I've attached a function to be called when Ext.onReady is ...

javascriptasynchronousextjsdom-events

JavaScript duplicate function is malfunctioning

Check out this jsfiddle link: https://jsfiddle.net/3o38nbzs/4/ When I clone an object, I am able to move the clone but it does not respond to click events. https://jsfiddle.net/L5mg87jm/ When I clone an object in this example, the clone remains static. T ...

javascriptjqueryjquery-uijsplumb

Activate the checkbox input by defining the form type with Javascript

I am attempting to control the enabling or disabling of input types based on whether a checkbox is checked or unchecked using JavaScript. Here is the code I am using: <script language="JavaScript"> <!-- function enable_text(status) { status=!st ...

javascriptjqueryhtml

Tips on Selecting a Typed Value

When clicking on 'no_results_text' and it's not available in the list, I want to show the searched value from the alert. I have included an onclick method for 'no_results_text', so that the typed value is displayed in the alert. h ...

javascripthtmljquery

How can I send an API request with a callback function as an argument using node.js?

If you want to access the getPlayers(callback) method, it is described as follows: getPlayers(callback) callback - This parameter is necessary. It will be called with an object of players players - An object that contains all the players who are curr ...

javascriptnode.jsapinpmcallback

Issue with Angular standalone component importation causing rendering issue in HTML

Recently, I started working with Angular and I am currently creating a clone using Firebase. While working on this project, Angular is throwing two errors at me: The Component AppComponent is standalone and cannot be declared in an NgModule. Should it b ...

angulartypescript

Utilizing Typescript Decorators to dynamically assign instance fields within a class for internal use

I am interested in delving into Typescript Decorators to enhance my coding skills. My primary objective is to emulate the functionality of @Slf4J from Project Lombok in Java using Typescript. The concept involves annotating/decorating a class with somethin ...

javascripttypescriptloggingdecoratorlombok

Using Angular JS version 1.2.26 to implement promises within a forEach iteration

I am working on a JavaScript project where I have implemented an angular.forEach loop to iterate over image configuration objects and create Image() objects using the URLs from the config. My goal is to ensure that none of the resulting images are returne ...

javascriptangularjsimageonloadangular-promise

Modify the anchor text when a malfunction occurs upon clicking

Whenever I click on the link, I am able to retrieve the correct id, but the status changes for all posts instead of just the selected item. Below is the HTML code: <div th:each="p : ${posts}"> <div id="para"> <a style="float: right;" href= ...

javajavascriptjqueryhtmlajax