Question

因此，如果不需要的话，建议防止加载polyfill的方法是在<head>（原始代码：https://webpack.js.org/guides/shimming/）中添加一些逻辑

<script>
    var modernBrowser = (
        'fetch' in window &&
        'assign' in Object
    );

    if ( !modernBrowser ) {
        var scriptElement = document.createElement('script');

        scriptElement.async = false;
        scriptElement.src = './polyfills.bundle.js';
        document.head.appendChild(scriptElement);
    }
</script>

但是，由于我的文件被分块，因此不一致，例如polyfills.b0d50a4c4d9ca24a9f43.js。

那么（在webpack或index.html中）实现此逻辑的最佳方法是什么？

注意

我使用Vue，所以也许我可以将其导入App组件中？

例如

var modernBrowser = (
    'fetch' in window &&
    'assign' in Object
);

if ( !modernBrowser ) {
    require("polyfill")
}

Answer 1

您不应该像以前那样require使用polyfill，因为polyfill的代码将始终位于包中。

您需要使用require.ensure或import()语法制作出一块。

webpack文档中有一个article。

想法是创建一个带有您检查的文件，然后延迟加载polyfill。

//应用程序入口点从“ myFramework”导入myFramework；

var modernBrowser =（在窗口&&中“获取” 在对象中“分配” ）;

function bootstrapTheApp() {
   myFramework.bootstrap();
}

if ( !modernBrowser ) {
    import("polyfill").then(() => {
       //polyfill loaded
       bootstrapTheApp();
    })
} else {
   bootstrapTheApp();
}

Answer 2

polyfill.io https://polyfill.io/v2/docs/是一项出色的服务，根据调用者的浏览器，它可以生成非常可配置的正确的polyfill

webpack-如何根据需要加载分块的polyfill文件

2 个答案: