根据需要加载块/包(例如SystemJS)

时间:2018-11-21 15:18:50

标签: javascript webpack bundling-and-minification

使用Webpack,我创建了多个块/包,因此不会一次加载整个应用程序。我已经手动选择了要将哪些依赖项移入自己的块中。这是我的配置的重要部分:

module.exports = {
  devtool: 'inline-source-map',
  mode: process.env.NODE_ENV,
  entry: {
    main: './src/index.tsx',
  },
  optimization: {
    runtimeChunk: {
      name: 'runtime',
    },
    splitChunks: {
      cacheGroups: {
        ...makeChunkCacheGroup('chunk_1', /\/node_modules\/(... list of deps ...)(\/|$)/),
        ...makeChunkCacheGroup('chunk_2', /\/node_modules\/(... list of deps ...)(\/|$)/),
      },
    },
  },
// ...
};

function makeChunkCacheGroup(name, ...moduleNameRegexps) {
  return {
    [name]: {
      name,
      test: module => moduleNameRegexps.some(pattern => pattern.test(module.context)),
      chunks: 'all',
      minChunks: 1,
      minSize: 0,
      maxSize: Infinity,
      reuseExistingChunk: true,
      enforce: true,
    },
  };
}

此配置为我提供runtimemainchunk_chunk_2。但是,所有这些块都被注入到index.html中,因此它们都在初始页面加载期间加载,而不是动态加载(正如我天真的预期)。

我过去曾使用SystemJS将内容捆绑为多个捆绑包,并且它只会下载应用程序所需的给定捆绑包。我现在意识到Webpack无法以这种方式工作。

是否有一种方法可使Webpack最初仅下载runtimemain捆绑软件,然后根据需要下载其他捆绑软件?


注释1:我意识到我可以使用动态导入,例如import('some-dep').then(...),但根据代码库的大小这样做​​是不合理的,而且,我认为这种事情最好留给配置(模块不必选择应该选择的部门)动态加载)。

注意2:我确实尝试指定了多个入口点,但从未成功。该应用程序实际上只有一个入口点。但是,例如,我们在src/app/elements/下有多个目录,如果这些目录中的每个目录都以自己的捆绑包结尾,然后将其动态加载,那将是完美的选择。我无法以自动化/智能的方式工作。

0 个答案:

没有答案