Webpack

Question

我的 webpack 配置只有一个入口点：

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

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

我正在使用这个块代码

 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。

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

谢谢拉尔夫

Answer 1

所以发现了一些东西：

Split Chunks 与延迟加载无关。 HTML 中必须引用所有块。这仅在您不想在所有页面上加载所有脚本时才有用。

懒加载只有注释样式的解决方案

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

参见： https://webpack.js.org/guides/code-splitting/#dynamic-imports

或者在我的例子中，可以使用一些获取命令来导入静态文件（或者我正在使用 d3.json）。

Webpack - Javascript 代码拆分后未执行

Webpack - Javascript not executed after code splitting

lazy-loading

code-splitting