Let's learn how to bundle and minify multiple JavaScript files in the Tic-Tac-Toe project by using the Visual Studio Bundler & Minifier extension with the bundleconfig.json file:

1. In the top menu, select Extensions, click on Online, enter Bundler in the search box, select Bundler & Minifier, and click on Download:

2. Close Visual Studio; the installation will continue. Next, click on Modify:

3. Restart Visual Studio. Now, you are going to optimize the number of opened connections, as well as the bandwidth usage by bundling and minifying. For that, add a new JSON file called bundleconfig.json to the project.
4. Update the bundleconfig.json file so that you can bundle the two JavaScript files into a single one called site.js and to minify the site.css and site.js files:

        [ 
          {"outputFileName": "wwwroot/css/site.min.css", 
            "inputFiles": [ 
              "wwwroot/css/site.css"  ]}, 
          {"outputFileName": "wwwroot/js/site.js", 
            "inputFiles": [ 
              "wwwroot/app/js/scripts1.js", 
              "wwwroot/app/js/scripts2.js"  ], 
            "sourceMap": true, 
            "includeInProject": true   }, 
          {"outputFileName": "wwwroot/js/site.min.js", 
            "inputFiles": ["wwwroot/js/site.js"], 
            "minify": { 
              "enabled": true, 
              "renameLocals": true }, 
            "sourceMap": false    }   
        ] 

5. Right-click on the project and select Bundler & Minifier | Update Bundles:

6. When looking in the Solution Explorer, you will see that two new files called site.min.css and site.min.js have been generated:

7. When looking in the Task Runner Explorer, you will see the bundling and minifying process you have configured for the project:

8. Right-click on Update all files and select Run. Now, you can see and understand what the process is doing in more detail:

9. Schedule the process for execution after each build by right-clicking on Update all files and selecting Bindings | After build. A new file called bundleconfig.json.bindings will be generated, and, if you remove the wwwroot/js folder and rebuild the project, the files will be auto-generated.
10. To see the newly generated files in action, go to the Debug* tab in the project settings and set the ASPNETCORE_ENVIRONMENT variable to Staging. Then, click Save:

11. Start the application by pressing F5, open the developer tools by pressing F12 in Microsoft Edge, and redo the registration process. You will see that only the bundled and minified site.min.css and site.min.js files have been loaded and that the load times are faster:

OK, now that we know how to implement the client-side and benefit from bundling and minification in modern web application development, let's return to the Tic-Tac-Toe game and optimize it even further and add the missing components.

First, we will look at using Web Sockets for real-time communication.