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

Question

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

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

我需要这个的原因是我正在为统一制作一个可播放的广告，但由于加载缓慢，他们的 QA 一直未能通过我的广告。 他们没有对所需的特定加载时间提供任何类型的要求，所以我需要猜测一下。

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

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

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>标签，实际上会增加一些）。

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

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