Using JavaScript modules in a multi-page website with Closure Compiler integration

I have developed a web application that consists of multiple pages along with some JavaScript files containing shared code.

- common1.js
- common2.js
- page1.js
- page2.js
- page3.js
...

The shared files are being loaded with page1 and, upon a button click, the page transitions to either page2 or page3. I utilize Closure Compiler and treat each page as a chunk.

--js "../common1.js" \
--chunk common1.min:1 \
--js "../common2.js" \
--chunk common2.min:1:common1.min \
--js "../page1.js" \
--chunk page1.min:1:common2.min \
--js "../page2.js" \
--chunk page2.min:1:common2.min \

Everything is functioning as intended and all the chunks are being loaded properly. (ADVANCED_OPTIMIZATIONS)

However, I am faced with the need to incorporate modules. I have refactored the JavaScript files to use import/export statements. The issue arises when all the code gets moved to my entry point, leaving the other chunks empty.

 --compilation_level ADVANCED_OPTIMIZATIONS \
 --language_out ECMASCRIPT_2021 \
 --dynamic_import_alias "dynamicImport" \
 --chunk_output_type "ES_MODULES" \

 --dependency_mode PRUNE_LEGACY \
 --entry_point "${JS_PATH}/page1.js" \

For example, page2 and page3 end up empty.

What am I missing here? The only workaround I have come across is to build each page individually. However, this would lead to larger file outputs since the shared code cannot be utilized. (It is cached, so there is no additional load time)

javascriptgoogle-closure-compiler

Answer №1

To compile each file separately, consider treating each individual file as its own entry point.

If there is shared code among files, import it into each respective page and compile the files independently.

For creating separate chunks with single entry points, experiment with dynamic imports, which will generate chunks as desired.

Check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports

Please note that while Webpack handles dynamic chunks effectively, I have not tested this functionality with Closure.

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

The issue of empty data in Symfony 3 Form Ajax Post Requests

Displaying a list of tags with the option to add more dynamically. Using Ajax instead of Symfony Doctrine for form submission to allow dynamic updates without page reloads. This is how the form is structured in HTML: <div class="tag-form" ...

javascriptphpjqueryajaxsymfony

Issue: Invalid element type - Error message displayed when attempting to show the Edit button

I am currently learning about React and trying to implement an edit button next to the rows for editing data in the database. However, I keep encountering this specific error message: Error: Element type is invalid: expected a string (for built-in compone ...

javascriptreactjsreact-reduxmaterial-uireact-bootstrap

Axios delivers the index.html data to the front end of a React.js application

I’m currently in the process of developing a web application using React.js for the front-end and Flask for the back-end. I attempted to establish a connection between the two by defining a proxy server in React and enabling CORS in Flask. Everything was ...

javascriptpythonreactjsflaskaxios

How can you navigate to the left within a component by scrolling?

My Panel component is equipped with an overflow-x: scroll; feature for horizontal scrolling. Given the large amount of data it contains, I am looking for a way to enable horizontal scrolling within the panel. What is the best approach to achieve this? Is ...

javascriptreactjsscroll

What is the best way to send a JavaScript array to a Perl script using AJAX?

Is it possible to convert a JavaScript array passed via AJAX into a Perl array? Accessing in Perl: @searchType = $cgi->param('searchType'); print @searchType[0]; Result: employee,admin,users,accounts It appears that the first value in the ...

javascriptajaxarraysperl

Is it possible to utilize dynamic imports in conjunction with a for loop in Next.js?

I often use dynamic import to bring in multiple components efficiently. Is it feasible to use a 'for' loop for this purpose? import dynamic from "next/dynamic"; let Dynamic = []; for (let i = 1; i < 80; i++) { const DynamicComponent = d ...

javascriptreactjsnext.js

BrowserSync Failing to Load

Recently started using BrowserSync and I'm trying to figure out how to make it work smoothly. My main file that contains all the code is named 'gulpwork'. Inside 'gulpwork', there are 4 folders - two for converting Pug from &apos ...

javascriptnode.jsnpmsassgulp

The next-auth/discord callbacks do not make any changes to the data

Currently, I am utilizing the next-auth/discord and facing an issue with the session callback not setting the user id to the session property as expected. [...nextauth].js import NextAuth from "next-auth/next"; import DiscordProvider from " ...

javascriptnext.jsnext-auth

Struggling to fetch a custom attribute from the HTML Option element, receiving [object Object] as the result instead

I've been facing a challenging issue all day. My task involves making an ajax call to a predefined JSON file and trying to save certain contents into option tags using custom attributes. However, every time I attempt to retrieve the data stored in the ...

javascriptjqueryhtmljsonajax

Modify the input class once an image has been chosen (But not yet submitted)

Looking for a solution to update background image when file is selected <input type="file" class="imgupload" name="file" /> I've created image uploader with a hidden form element inside a padded div, displaying a background image. Want to chan ...

javascriptjqueryhtmlcss

Receiving a blank array from the firestore database

I have written a code for the LeftBar Component where I am trying to retrieve data stored in the "contacts" document in Firebase. However, I am getting an empty array and I'm not sure why this is happening. Additionally, I would like to know how to ac ...

javascriptreactjsfirebasegoogle-cloud-firestore

Is it possible to capture a screen recording in Selenium using JavaScript?

While my tests are running, I am looking for a way to record my screen. I came across a post about screen recording using Java at . However, the code provided is in Java and I require something in JavaScript. Is it possible to record the screen using Jav ...

javascriptseleniumselenium-webdriver

Is there a way to transfer HTML code from a textarea to CKEDITOR for setData?

My goal is to retrieve data from a textarea element and use it as setData for CKEDITOR. However, instead of receiving the HTML code, I am only getting the code as a string, which is not rendering properly as HTML. Here's the code snippet: CKEDITOR.re ...

javascriptjqueryhtmlckeditorckeditor4.x

Converting input dates in nest.js using TypeScript formatting

Is it possible to set a custom date format for input in nest.js API request body? For example, like this: 12.12.2022 @ApiProperty({ example: 'ADMIN', description: 'Role name', }) readonly value: string; @ApiProperty({ ...

javascripttypescriptnestjs

ways to deliver a message from server to client's body

Here is the Java server code I am using: private Response createError(int code, String error) { logger.error(error); return Response.status(code).entity("{ \"errorMsg\": \""+error+"\"}").build(); } And this is the client code: ...

javascriptjavaangularjsjsonjersey

Using jQuery .sortable() to reorder list items and update their IDs based on their new positions

My apologies for my limited English skills, but here is what I am trying to achieve. I have a list structured like this: <ul id="sortable" class="sortable"> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> &l ...

javascriptjqueryjquery-uijquery-ui-sortable

Can a constant value be dynamically defined in Typescript?

Trying to dynamically define a constant in Typescript has proven to be more challenging than I anticipated. Here's what I attempted: define(name: string, value: any): boolean { var undef; const name = value; return name == undef; } ...

javascripttypescript

Attempting to retrieve data from local server 3000 to local server 3001 resulted in an unexpected termination of the input stream

After attempting to make a GET request to the Serp API directly from a React application, I discovered that it was not possible. To work around this issue, I created a local server and implemented the necessary logic. After testing the server using Postman ...

javascriptreactjsexpressserverlocalhost

Accessing PHP variables within a React componentTo access external

How can I pass the id selected in a menu from a react component to a PHP file, after already knowing how to send data from PHP to the react component? $.ajax({url: '/file.php', type: 'POST', dataType: 'json', ...

javascriptphpmysqlajaxreactjs

The AngularJS $rootscope $destroy event is not being triggered, resulting in timeouts not being cancelled

Below is the code snippet that I am currently working with: function initialize() { var defer = $q.defer(); var deferTimer = $q.defer(); var cancelTimeout = $timeout(function() { if (defer !== null) { ctrlr.setProcessingParameters('X ...

javascriptangularjstimeoutdestroy