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

Posted

技术标签:

【中文标题】像其他资产一样通过 CDN URL 从动态导入中加载块【英文标题】:Loading chunks from dynamic imports though CDN URL like other assets 【发布时间】:2020-08-12 04:18:56 【问题描述】:

我有一个指向我的基域的 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 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(),但还是一样。

【问题讨论】:

【参考方案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);
        );

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

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

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

【讨论】:

以上是关于像其他资产一样通过 CDN URL 从动态导入中加载块的主要内容,如果未能解决你的问题,请参考以下文章

使用动态 url 暂停和恢复从 CDN(内容分发网络)下载大文件

在用于 CDN 的 vue 应用程序中保持资产和公共路径不同

如何将 CDN 与 Play Framework 2.4 资产一起使用?

生产中的资产管道问题:CDN中未显示图像

如何从 URL 解析带有 Windows Phone 8 中图像的 Json 数据?动态数据

如何像调度程序一样将大数据从 MongoDB 导入 SQL Server