Wanneer Webpack uw modules bundelt, volgt het de afhankelijkheidsketen van de module die u hebt geïmporteerd (of vereist) en haalt alle afhankelijkheden binnen en bundelt ze ook helemaal tot aan het einde van de keten.
Als er een bestand is waarvan het niet weet hoe het in die afhankelijkheidsketen moet worden geladen, wordt dit type fout gegenereerd.
Dit kan soms worden opgelost door een lader toe te voegen die weet hoe dit type afhankelijkheid moet worden geladen. Als de afhankelijkheid echter een niet-native module is, kan Webpack deze niet laden. Sommige laders weten hoe ze modules met niet-eigen afhankelijkheden moeten laden door het niet-eigen deel eruit te halen en uit te sluiten, zodat het wordt geladen. In de fs module hoeft u bijvoorbeeld geen bestanden van schijf te kunnen lezen en schrijven omdat de browser dat niet kan, dus u hoeft dat deel niet op te nemen.
Dit roept de vraag op:Welke functionaliteit uit de mangoestmodule heb je nodig in de browser? Kun je alleen die functionaliteit toevoegen en niet de hele mangoestmodule?
Als u dit kunt doen, kunt u mogelijk 2 problemen oplossen:
- Misschien lost u het webpack-bundelprobleem op omdat het deel van de mangoest dat u in uw project opneemt geen problematische subafhankelijkheden heeft.
- Je maakt een kleinere bundel met Webpack omdat je alleen de onderdelen opneemt die je nodig hebt, zodat de bundel.js-payload naar de klant veel kleiner zal zijn.
Als voorbeeld moest ik onlangs de mongodb ObjectId-generator in de client gebruiken. Ik ontdekte dat Webpack de import mongodb from 'mongodb' . niet aankon component dus gravend in de afhankelijkheden vond ik dat mongodb hangt af van mongodb-core die afhangt van bson die de ObjectId . heeft methode die ik nodig had.
Door alleen de bson . te importeren onderdeel van die afhankelijkheidsketen Ik heb het Webpack-probleem omzeild en mijn bundel veel kleiner gemaakt.
Als je Npm 3 gebruikt, is de kans groot dat bson is geïnstalleerd in de hoofdmap van node_modules als je al mangoest of mongodb gebruikt, zodat je kunt import zonder er expliciet naar te verwijzen in uw package.json . Dit brengt uiteraard het risico met zich mee dat als de bovenste afhankelijkheid ervan stopt, je build kapot gaat en je moet npm install het zelfstandig. Het voordeel van deze aanpak is dat u altijd dezelfde versie van bson . gebruikt die de bovenste afhankelijkheid gebruikt, wat belangrijk kan zijn.