与其他资产一样，通过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 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的临时公共路径设置为需要动态导入的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有更多神奇的注释，这可以使代码表现为过程性的，代价是为条件导入导入两个模块。这也可能有助于

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));
}