像其他资产一样通过 CDN URL 从动态导入中加载块

Question

我有一个指向我的基域的 CDN，基本上是 1:1 映射。 我正在尝试在服务器上构建我的包，我想使用 CDN URL 加载它。 npm run build后我想要的是：

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

然后我的 CDN 会反映这一点，所以我希望像这样加载这些资源：

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

我当前的webpack.mix.js配置：

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

它会在正确的位置生成所有文件，这很好。 然后我将它们包含在我的index.blade.php中：

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

elixirCDN 是我自定义的 function：

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

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

    return $cdn . elixir($file);
}

它基本上在文件名前加上 CDN url，所以一切正常。

当我使用动态导入时，问题就开始了，如下所示：

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

理想的情况是它还与 CDN 一起加载：

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

但相反，它没有，它加载了一个相对路径和我的基域：

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

显然，因为它是动态的。 我怎样才能让我的块也从 CDN 加载？

我尝试将publicPath设置为我的 CDN url，但它没有任何效果。 我也试过setPublicPath()但它是一样的。

Answer 1

嗨，这不是明确的答案，而是朝着正确方向迈出的一步。 我遇到了这个问题，因为在更新所有 webpack 和 babel 包后，我的条件导入中断了。

动态导入前需要将webpack的临时公共路径设置为webpack需要动态导入的chunck的位置

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

比进口作品

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

对我来说，动态导入有效，但似乎之前的条件导入，所有 package 更新，都在没有异步行为的情况下工作......

刚刚发现 Webpack 有更多神奇的注释，可以使代码表现程序化，代价是同时导入两个模块以进行条件导入。 这也可能有帮助

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

Answer 2

我有一个类似的问题，我的主脚本被加载到另一个页面中，并且在加载块时它尝试从根 url 而不是 cdn 加载它们。

使用上面的答案，我得出以下解决方案：

在根导入文件中

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

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