Require.js still loads modules in their uncompressed state even after the optimization process

I've successfully run the r.js optimizer and everything seems to be working fine. However, I am facing an issue where the compressed optimized version loads along with all the uncompressed modules. Any idea why this might be happening?

build.js

{
appDir: '../static',
mainConfigFile: '../static/javascript/config.js',
dir: '../public',
baseUrl: 'javascript/libs',
useStrict: false,
wrap: false,
optimizeCss: "standard",
optimize: "uglify2",
generateSourceMaps: false,
preserveLicenseComments: false,
uglify2: {
    "screw-ie8": true,
    warnings: false,
    mangle: true
},
throwWhen: {
    optimize: true
},
pragmasOnSave: {},
modules: [

    {
        name: '../front',
        include: ['views/front/main'],
        exclude: ['../config']
    }

    ,

    {
        name: '../portal',
        include:  ['views/portal/main'],
        exclude: ['../config']
    }

    ,

    {
        name: '../survey',
        include:  ['views/survey/main'],
        exclude: ['../config']

    }

]
}

config.js

require.config({
  baseUrl: '/javascript/libs',
  urlArgs: 'v=' + (new Date()).getTime(),
  enforceDefine: false,
  paths: {
    collections: '../collections',
    etc: '../etc',
    models: '../models',
    views: '../views',
    templates: '../../templates',
    backbone: 'backbone',
    underscore: 'lodash',
    'underscore.string': 'underscore.string',
  },
  shim: {
    backbone: {
      deps: ['jquery', 'underscore'],
      exports: 'Backbone'
    },
    underscore: {
      deps: ['jquery', 'underscore.string'],
      exports: '_'
    },
  }
});

The config is loaded in the following way:

<script data-main="/javascript/portal-v2.0.0.js" src="/javascript/libs/require.js"></script>

and portal.js is structured like this:

require(['./config'], function() {
  return require(['views/portal/main']);
});

Answer №1

To initialize your application, begin by adding the following code:

<script data-main="/javascript/portal-v2.0.0.js" src="/javascript/libs/require.js"></script>

This code sets up the loading of your portal-v2.0.0.js file to occur at a later unspecified time. It's important to note that you should not include the .js extension in module names within the data-main attribute, as this can lead to unexpected issues.

If you observe the loading behavior closely, you'll notice that when the following code is executed, the initial module may not have been fully loaded yet:

require(['./config'], function() {
  return require(['views/portal/main']);
});

In situations where RequireJS attempts to load views/portal/main, it will fetch the individual module instead of the bundled one.

To address this issue, you can update your runtime configuration by including the following:

bundles: {
    '/javascript/portal-v2.0.0': ['views/portal/main'],
}

This instructs RequireJS to search for the module named views/portal/main within the same location as the /javascript/portal-v2.0.0 module. (Remember to exclude the .js extension from the data-main attribute.) You only need to specify modules required from outside of portal-v2.0.0 in the bundles setting – there's no need to list all internal modules. This principle applies to other bundles as well if their modules are accessed externally. Make sure to define these relationships in the appropriate bundles settings.

Additionally, consider utilizing removeCombined to clean up the output directory and retain only optimized bundles.

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

What could be the reason for Angular to merge the element at index 0 of an array into a subarray instead of doing

After setting up the Array in my oninit function, I encountered an issue where one part of the array was functioning as intended while the other returned an error. this.tests = [{ status: 0, testresults: [{ name: 'test ...

Utilizing Node.js within a closed intranet environment

Utilizing Nodejs's npm has proven to be quite convenient. Thus, I made the decision to incorporate it into my company's project. However, a predicament arises as my company mandates development within a closed network. This restricts my access s ...

The presence of Bootstrap remains hidden unless space is designated for it

Question about Bootstrap 5.1.3: Is there a way to hide elements on a page using the bootstrap class ".invisible" without allocating space for them? Currently, when the elements are set to visible using the class ".visible", they occupy space on the page ...

Tips on how to bring in a module from index.js

Recently, I set up a sample node.js project: "name": "example", "version": "1.0.0", "type": "module", Let's take a look at the index.js (only two lines): "use strict"; import ...

Can an Angular Component be connected to an array of functions for callbacks?

I am working on an Angular component that shows a list of items. I want each item in the list to have a set of menu buttons that trigger different functions in the parent component/controller. Is there a way to create a component binding that accepts an ...

Adjusting the header background color and inserting a logo once a specific threshold is reached

Currently, I am designing a website where I need the background color to transition from transparent to black and display a logo once the user scrolls down to a certain point. I am a beginner in javascript and I am facing some difficulties with this task. ...

Launch a new window for a div when a button is clicked

Hey everyone, I need some help with opening a div in a new window. Currently, I am using window.open and it is working fine. Here is the code snippet: <div id="pass">pass this to the new window</div> <a href="#" onclick="openWin()">clic ...

Labeling src library files with namespaces

I have developed a ReactJS website that interacts with a library called analyzejs which was created in another programming language. While I am able to call functions from this library, I do not have much flexibility to modify its contents. Up until now, ...

Maximizing the potential of AngularJS directives while maintaining a seamless connection to the controller

Is there a way to maintain the connection with the current controller when wrapping data with a directive? I am facing an issue where the directive within the wrapped template loses connection with the outside controller, making it impossible to execute f ...

Returning a 404 Error stating "Invalid request to /api/users/register."

Encountering an issue with proxy connection - unable to determine the root cause despite verifying all routes. Not able to successfully register the user and store data in MongoDB. Seeking suggestions for resolution. Thank you. Attempting to send user reg ...

What is the technique for anchoring elements at the top of the page when scrolling?

There is a common design feature where the sidebar on the left starts at a lower position on the page, but as you scroll it moves up to the top and remains fixed in place instead of disappearing off the screen. This is a popular design trend that I have ...

Scope properties are not being bound properly to the Angular modal

I am working with a model controller set up like this: pcApp.controller("ModalInstanceController", function ($scope, $modalInstance, model) { $scope.claim = model; $scope.payNow = function () { $modalInstance.close("now"); }; $sco ...

Script update addressing CSS application to title attributes to resolve bugs

The following script adds a CSS class to the HTML title attribute. You can find the original page where the script is located here: How to change the style of Title attribute inside the anchor tag? Although it works well, there is a small issue. If the ti ...

What criteria should I use to determine if a post has been favorited by a user using Mongoose?

Creating a function for users to like posts has been my recent project. Each post is stored as an object in my MongoDB collection with a specific schema. { title: String, text: String } On the other hand, users have their own unique schema as well. ...

Issue with the Select All checkbox functionality in an asp.net mvc project

https://i.sstatic.net/Y5ml2.png Here, I manually select checkboxes and press the sync button. When I do this individually, it works properly. However, if I press the select all button, all the checkboxes are selected but the sync process does not occur. ...

Extract data from JSON object on the server side

Within my web service, I have a method that returns a JSON object: {name:'xx'} When making an Ajax request and parsing the response with 'eval', I encountered an issue. onComplete:function(req){ var data=eval(req.responseText); / ...

Having Trouble Retrieving Environment Variables in Next.js API Endpoints

Currently, I am in the process of working on a project utilizing Next.js 13 and API routes to communicate with a database. My goal is to securely store my database credentials in a .env file, but unfortunately, the variables are not loading as expected. I ...

Generating a Transform stream with ExcelJS to produce xlsx files

Currently, I am utilizing the ExcelJS module and creating a wrapper to suit my specific needs. This wrapper implements the Transform Stream API, and surprisingly, the node version being used is 0.10.40. The ExcelJS module offers a stream API, and based on ...

"Triggering the jQuery mouseout event following a resize of an element

I'm currently trying to develop a dynamic shopping cart widget. The concept is to have a box that displays the number of items in your cart, and when you click on it, it expands to show a detailed view of the cart contents. I've successfully man ...

Could someone share an instance of an AngularJS configuration that continuously checks for new data and automatically refreshes the user interface once the data is obtained?

Struggling to find a suitable example for this scenario. I am looking to create a chart directive that will be updated every minute by fetching data from a web service. Currently, I have a service that acts as a wrapper for the web service. My controller ...