javascript - 如何更快地在索引中加载内联源

Question

带有 webpack 和 pahser 的 html 文件。所有游戏代码和外部库都内联编译到 index.html。

有谁知道一种实现内联源但页面加载速度更快的方法？以某种方式加载带有嵌入图像的页面，然后加载外部脚本？

我需要这个的原因是我正在为统一制作一个可播放的广告，但他们的 QA 由于加载缓慢而使我的广告失败。他们没有对所需的特定加载时间提供任何类型的要求，因此我需要对此进行猜测。

目前我的索引页面是用 1 个代码块中的 javascript 内联源导出的。我注意到其他一些广告商游戏将所有代码拆分为多个标签，这样可以加快加载速度吗？

我尝试使用 block ，但这所做的只是拆分代码，但将其全部保存在一个脚本 block 中。

module.exports = env => {
    return {
        entry: {
            index: entryString.replace('{entryClass}', env.platform).replace('{game}', env.game ? env.game : ''),
            another: env.production ? spinePluginProd : spinePlugin,
            another: env.production ? phaserProd : phaser,
        },
        watch: env.watch == 'true',
        optimization: {
            minimizer: env.production ? [terserPlugin] : [],
        },
        output: {
            pathinfo: true,
            path: path.resolve(localDirectory, 'dist'),
            publicPath: './',
            filename: '[name].bundle.js',
        },
        optimization: {
            splitChunks: {
                chunks: 'all',
            },
        },
        plugins: getPlugins(env.platform, env.watch),
        module: {
            rules: getLoaders(env.platform, env.game),
        },
        node: {
            fs: 'empty',
            net: 'empty',
            tls: 'empty'
        },
        resolve: {
            extensions: ['.ts', '.js'],
            alias: {
                'phaser': env.production ? phaserProd : phaser,
                'spinePlugin': env.production ? spinePluginProd : spinePlugin,
                // 'spine': spine
            }
        }
    }
}

如果有人知道如何更快地加载它，我们将不胜感激。另一方面，Unity Ads 似乎只提示我们对超过 2mb 的应用程序的加载速度。小于 2mb 的广告似乎加载速度足够快，这就是为什么我假设它只是页面加载而不是 Phaser 初始化

Answer 1

答案可能归结为他们如何定义“加载缓慢”。您不会通过将源代码拆分为多个脚本标签来使该文件加载得更快，它们的字节数相同(如果您有多个 <script> 标签，实际上会多一些)。

但是他们如何衡量“缓慢加载”？如果他们只是想看看通过网络加载文件需要多长时间，那么是的，您将不得不寻找使该文件更小的方法:确保您有效地进行丑化/树摇动以最小化您的代码尽可能多地在必要(和可能)的情况下将其应用于库代码，并且绝对使用专用图像压缩工具压缩图像(就文件大小而言，这可能是唾手可得的成果；图像很大)。

另一方面，如果他们正在测量文档的“加载”事件触发所需的时间，您也许可以进行调整。默认情况下，浏览器将按顺序加载所有代码，并阻止脚本标记，因此在解释完所有脚本标记之前不会加载页面。但是，如果您可以将大部分代码执行放入在页面加载时触发的事件处理程序中，浏览器将看到您已经为加载事件定义了一个事件处理程序，并继续加载页面，触发加载事件，然后执行您的代码。这可能足以获得您需要的快速指标。