Webpack - 代码拆分后Javascript不被执行

Question

我有一个webpack配置，只有一个入口点。

entry: {
    screengrid: './src/screengrid.js',
},

但我想把两个更大的geo.json文件排除在主js之外，并在需要时加载。

我使用的是这样的块状代码

 splitChunks: {
        cacheGroups: {
            map_1: {
                test: /world-low*\.geo/,
                name: 'maps/map_low',
                chunks: 'initial',
                priority: 20,
            },
            map_2: {
                test: /world-medium*\.geo/,
                name: 'maps/map_high',
                chunks: 'initial',
                priority: 20,
            },
            default: {
                reuseExistingChunk: true,
                priority: -50,
            },
        },
    },

这正是我想要的，在创建文件方面，但脚本完全不执行了。连第一行的console.log都没有。

这是懒加载文件的正确方法吗？

谢谢ralph

Answer 1

所以发现了一些事情。

分割Chunks与懒惰加载无关。所有的chunks必须在HTML中引用。只有当你不想在所有页面上加载所有脚本时，这才是好的。

对于懒惰加载，只有注释式的解决方案

**const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');**

请看。https:/webpack.js.orgguidescode-splitting#dynamic-imports。

或者在我的情况下，导入静态文件可以通过一些fetch命令来完成（或者我是用d3.json）。