react-loadable-plugin.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _webpack = require("next/dist/compiled/webpack/webpack");
  6. var _path = _interopRequireDefault(require("path"));
  7. function _interopRequireDefault(obj) {
  8. return obj && obj.__esModule ? obj : {
  9. default: obj
  10. };
  11. }
  12. function getModuleId(compilation, module) {
  13. return compilation.chunkGraph.getModuleId(module);
  14. }
  15. function getModuleFromDependency(compilation, dep) {
  16. return compilation.moduleGraph.getModule(dep);
  17. }
  18. function getOriginModuleFromDependency(compilation, dep) {
  19. return compilation.moduleGraph.getParentModule(dep);
  20. }
  21. function getChunkGroupFromBlock(compilation, block) {
  22. return compilation.chunkGraph.getBlockChunkGroup(block);
  23. }
  24. function buildManifest(_compiler, compilation, pagesDir, dev) {
  25. // If there's no pagesDir, output an empty manifest
  26. if (!pagesDir) {
  27. return {};
  28. }
  29. let manifest = {};
  30. // This is allowed:
  31. // import("./module"); <- ImportDependency
  32. // We don't support that:
  33. // import(/* webpackMode: "eager" */ "./module") <- ImportEagerDependency
  34. // import(`./module/${param}`) <- ImportContextDependency
  35. // Find all dependencies blocks which contains a `import()` dependency
  36. const handleBlock = (block)=>{
  37. block.blocks.forEach(handleBlock);
  38. const chunkGroup = getChunkGroupFromBlock(compilation, block);
  39. for (const dependency of block.dependencies){
  40. if (dependency.type.startsWith("import()")) {
  41. // get the referenced module
  42. const module = getModuleFromDependency(compilation, dependency);
  43. if (!module) return;
  44. // get the module containing the import()
  45. const originModule = getOriginModuleFromDependency(compilation, dependency);
  46. const originRequest = originModule == null ? void 0 : originModule.resource;
  47. if (!originRequest) return;
  48. // We construct a "unique" key from origin module and request
  49. // It's not perfect unique, but that will be fine for us.
  50. // We also need to construct the same in the babel plugin.
  51. const key = `${_path.default.relative(pagesDir, originRequest)} -> ${dependency.request}`;
  52. // Capture all files that need to be loaded.
  53. const files = new Set();
  54. if (manifest[key]) {
  55. // In the "rare" case where multiple chunk groups
  56. // are created for the same `import()` or multiple
  57. // import()s reference the same module, we merge
  58. // the files to make sure to not miss files
  59. // This may cause overfetching in edge cases.
  60. for (const file of manifest[key].files){
  61. files.add(file);
  62. }
  63. }
  64. // There might not be a chunk group when all modules
  65. // are already loaded. In this case we only need need
  66. // the module id and no files
  67. if (chunkGroup) {
  68. for (const chunk of chunkGroup.chunks){
  69. chunk.files.forEach((file)=>{
  70. if ((file.endsWith(".js") || file.endsWith(".css")) && file.match(/^static\/(chunks|css)\//)) {
  71. files.add(file);
  72. }
  73. });
  74. }
  75. }
  76. // usually we have to add the parent chunk groups too
  77. // but we assume that all parents are also imported by
  78. // next/dynamic so they are loaded by the same technique
  79. // add the id and files to the manifest
  80. const id = dev ? key : getModuleId(compilation, module);
  81. manifest[key] = {
  82. id,
  83. files: Array.from(files)
  84. };
  85. }
  86. }
  87. };
  88. for (const module1 of compilation.modules){
  89. module1.blocks.forEach(handleBlock);
  90. }
  91. manifest = Object.keys(manifest).sort()// eslint-disable-next-line no-sequences
  92. .reduce((a, c)=>(a[c] = manifest[c], a), {});
  93. return manifest;
  94. }
  95. class ReactLoadablePlugin {
  96. constructor(opts){
  97. this.filename = opts.filename;
  98. this.pagesDir = opts.pagesDir;
  99. this.runtimeAsset = opts.runtimeAsset;
  100. this.dev = opts.dev;
  101. }
  102. createAssets(compiler, compilation, assets) {
  103. const manifest = buildManifest(compiler, compilation, this.pagesDir, this.dev);
  104. // @ts-ignore: TODO: remove when webpack 5 is stable
  105. assets[this.filename] = new _webpack.sources.RawSource(JSON.stringify(manifest, null, 2));
  106. if (this.runtimeAsset) {
  107. assets[this.runtimeAsset] = new _webpack.sources.RawSource(`self.__REACT_LOADABLE_MANIFEST=${JSON.stringify(manifest)}`);
  108. }
  109. return assets;
  110. }
  111. apply(compiler) {
  112. compiler.hooks.make.tap("ReactLoadableManifest", (compilation)=>{
  113. // @ts-ignore TODO: Remove ignore when webpack 5 is stable
  114. compilation.hooks.processAssets.tap({
  115. name: "ReactLoadableManifest",
  116. // @ts-ignore TODO: Remove ignore when webpack 5 is stable
  117. stage: _webpack.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
  118. }, (assets)=>{
  119. this.createAssets(compiler, compilation, assets);
  120. });
  121. });
  122. }
  123. }
  124. exports.ReactLoadablePlugin = ReactLoadablePlugin;
  125. //# sourceMappingURL=react-loadable-plugin.js.map