Retrieving sections from dynamic imports via a CDN link just like any other resources

Question

Retrieving sections from dynamic imports via a CDN link just like any other resources

I currently have a CDN set up to point to my base domain with a 1:1 mapping. I am in the process of building my bundle on the server and I want to load it using the CDN URL. After running npm run build, I am aiming for the following structure:

public/
  css/
    app.css
  js/
    index.js
    1.js.gz
    1.js
    2.js.gz
    2.js

My goal is to have these resources loaded like this on my CDN:

https://mycdn.com/public/js/index.js
https://mycdn.com/public/css/app.css

This is my current configuration in webpack.mix.js:

mix
  .sass('resources/sass/app.css', 'public/css')
  .js('resources/js/index.js', 'public/js')

The files are generated in the correct location and then included in my index.blade.php:

<script src="{{ elixirCDN('/js/index.js') }}"></script>

I have a custom function called elixirCDN to prepend the filename with the CDN URL.

function elixirCDN($file)
{
    $cdn = '';

    if(config('system.cdn_url'))
    {
        $cdn = config('system.cdn_url');
    }

    return $cdn . elixir($file);
}

Everything works fine until I try using dynamic imports like this:

const Home = () => import("./Home")

In an ideal situation, I want these dynamic imports to also load from the CDN:

https://mycdn.com/public/js/1.js

However, they currently load with a relative path using my base domain:

https://mybasedomain.com/public/js/1.js

I have tried setting publicPath to my CDN URL and using setPublicPath(), but it hasn't had any effect. How can I ensure my chunks are also loaded from the CDN?

javascript laravel vue.js webpack laravel-mix

Answer 1

Answer №1

Hey there! While this may not be the absolute solution, it's definitely a step in the right direction. I encountered this issue when my conditional import stopped working after updating all the webpack and babel packages.

Prior to the dynamic import, you'll need to establish a temporary public path for webpack to point to the specific chunk that needs to be imported dynamically.

__webpack_public_path__ = 'https://cdn.dev.acsi.eu/eurocampings/assets/dev/dist/';

Once this is set, the import should function properly.

import(/* webpackChunkName: "state" */ './modules/BookingState/State')
        .then(({createState}) => {
            createState();
            this.renderEurocampingsWebsite(window);
        });

The dynamic import works for me now, although it appears that the conditional import used to work without asynchronous behavior before all the package updates...

I recently discovered that webpack supports additional 'magical' comments, which can alter the code behavior to be more procedural. However, it may result in both modules being imported for the conditional import. Here's an example:

import(
            /* webpackChunkName: "state" */
            /* webpackMode: "eager" */
            /* webpackPreload: true */
            './modules/BookingState/State'
        )
        .then...

Answer 2

Hey there! While this may not be the absolute solution, it's definitely a step in the right direction. I encountered this issue when my conditional import stopped working after updating all the webpack and babel packages.

Prior to the dynamic import, you'll need to establish a temporary public path for webpack to point to the specific chunk that needs to be imported dynamically.

__webpack_public_path__ = 'https://cdn.dev.acsi.eu/eurocampings/assets/dev/dist/';

Once this is set, the import should function properly.

import(/* webpackChunkName: "state" */ './modules/BookingState/State')
        .then(({createState}) => {
            createState();
            this.renderEurocampingsWebsite(window);
        });

The dynamic import works for me now, although it appears that the conditional import used to work without asynchronous behavior before all the package updates...

I recently discovered that webpack supports additional 'magical' comments, which can alter the code behavior to be more procedural. However, it may result in both modules being imported for the conditional import. Here's an example:

import(
            /* webpackChunkName: "state" */
            /* webpackMode: "eager" */
            /* webpackPreload: true */
            './modules/BookingState/State'
        )
        .then...

Answer 3

Answer №2

I encountered a similar issue where my primary script was being loaded into a different page, resulting in the chunks attempting to load from the root URL instead of the CDN.

After exploring the solution provided above, I implemented the following approach:

Within the root imported file:

export function configureWebpackToLoadChunksFromScriptUrl() {
  const scriptPath: string = (document.currentScript as any || {}).src;
  const loadPath = scriptPath ? scriptPath.substring(0, scriptPath.lastIndexOf('/')) : '';
  if (loadPath) {
    __webpack_public_path__ = loadPath;
  }
}
configureWebpackToLoadChunksFromScriptUrl();

export async function initializeApplication(elementId: string) {
  const { loadApplicationOnHtmlElement } = (await import('./loaded-app'));
  loadApplicationOnHtmlElement(elementId);
}

Answer 4

I encountered a similar issue where my primary script was being loaded into a different page, resulting in the chunks attempting to load from the root URL instead of the CDN.

After exploring the solution provided above, I implemented the following approach:

Within the root imported file:

export function configureWebpackToLoadChunksFromScriptUrl() {
  const scriptPath: string = (document.currentScript as any || {}).src;
  const loadPath = scriptPath ? scriptPath.substring(0, scriptPath.lastIndexOf('/')) : '';
  if (loadPath) {
    __webpack_public_path__ = loadPath;
  }
}
configureWebpackToLoadChunksFromScriptUrl();

export async function initializeApplication(elementId: string) {
  const { loadApplicationOnHtmlElement } = (await import('./loaded-app'));
  loadApplicationOnHtmlElement(elementId);
}

Retrieving sections from dynamic imports via a CDN link just like any other resources

Answer №1

Answer №2

Similar questions

Beginner coding exercises to master JavaScript

What is the method for incorporating a variable in MapReduce?

What is the best way to implement form fields that have varying validation patterns based on different conditions?

A guide on deploying Laravel and PostgreSQL with Docker containers

Redirecting with response headers in Next.js

Consider modeling as a variable

The continuous looping issue is being triggered when implementing a like button using firestore along with useEffect and UseState

The upload functionality in Codeigniter seems to be malfunctioning

Issue with converting form data to JSON format

Unable to assign the value of a Ruby variable to a JavaScript variable

Switching the markLine in vega lite to a markBar causes it to lose its sorting arrangement

Registering a change event for a table's value

What is the best way to integrate asynchronous computed observable with several concurrent $.ajax requests?

Issue with JQuery UI Tabs not displaying additional HTML pages in JavaScript

Does the Apps Script parser JSON.parse() incorrectly remove leading zeros from string object keys?

Error message: "Unable to access 'title' property of an undefined value" for an item with a length of 1

Is there a way to bring in data from a .d.ts file into a .js file that shares its name?

Can Selenium WebDriver be utilized to automate tasks in desktop applications?

jQuery AJAX chained together using promises

Modify the NAME attribute when clicked using Jquery