Stack Overflow
Stack Overflow

Questions tagged [code-splitting-async]

19 questions
7
votes
1 answer

React Loadable JSON mapping file with components being referenced from multiple locations

I'm using React Loadable to code split my components, but the problem is that certain components are referenced from multiple locations. For example, I have this component CarsModule, which is referenced in multiple areas like this: const CarsModule…
Thomas
  • 2,356
  • 7
  • 23
  • 59
6
votes
2 answers

React router base code-splitting (get first chunk and then get other chunks async in background)

I am using create-react-app. I want to react-router base code-splitting but I want to get the first chunk which user open in browser and then get other chunks asynchronously in the background Routes const HomeModule = React.lazy(() =>…
Muhammad Numan
  • 23,222
  • 6
  • 63
  • 80
4
votes
2 answers

In Laravel Mix, is it possible to extract all vendors except a list of packages?

Normally in Laravel Mix, we can extract all vendors automatically using mix.extract() or extract a list of vendors using mix.extract(['vue','lodash','axios']). Is there a way to extract all vendors except a few? For example, I load Pusher, Echo,…
Erin
  • 5,315
  • 2
  • 20
  • 36
3
votes
1 answer

Failed to asynchronously load component with loadable components using Webpack and React

The error I get the following error when (what appears to be) vendor scripts that try downloading: index.js:1 loadable-components: failed to asynchronously load component {fileName: undefined, chunkName: undefined, error: 'Loading chunk 1117…
Clarice Bouwer
  • 3,631
  • 3
  • 32
  • 55
3
votes
1 answer

webpack publicPath - Use different urls to reuse bundles

Given the following scenario. A webpack build producing 3 bundles, and a CI publishing them to a CDN like this (every build id produces a new folder): www.cdn.com/1/application.js www.cdn.com/1/chunk-a.js www.cdn.com/1/chunk-b.js now, consider that…
Hitmands
  • 13,491
  • 4
  • 34
  • 69
3
votes
0 answers

React context update does not cause component rerender

I'm creating a code splitting solution for react app using react router, webpack and dynamic imports. The idea is to map all the routes and corresponding components to different app contexts and split code according to app contexts. When user visits…
Vic
  • 645
  • 1
  • 7
  • 18
3
votes
1 answer

Why is Webpack generating 2 chunks per dynamic import()?

I've started using some dynamic import() statements like so import(/* webpackChunkName: "chart" */'./Chart') the problem is that Webpack generates 2 new chunks for this: chart.js (which is almost empty) and vendors~chart.js (which actually has…
Matt Leonowicz
  • 564
  • 7
  • 15
3
votes
0 answers

React-Loadable skip rendering 'Loading Component'

I am trying to do code splitting in react router v4 using react-loadable. What I intend to acheive is that not replace current view with the loading component instead keep whatever is currently rendered. and change state of the currently loaded…
Utkarsh Sopan
  • 51
  • 11
3
votes
0 answers

Webpack code-splitting with Typescript when using class modules

I have done a fair bit of searching around and maybe my Google-fu is failing me but I can't seem to find an answer to the following: We use modules with TypeScript classes in them and everything is working fine until I try and implement…
James Summerton
  • 398
  • 2
  • 13
1
vote
1 answer

How to make react router replace component only after the matched route asynchronously loaded..?

So here's the situation - When a Link is clicked the nprogress bar will start and I want react-router to only replace the current component with the matched route once that's done loading asynchronously.. just like in instagram.. But I am only…
Ruhul Amin
  • 481
  • 1
  • 6
  • 14
1
vote
0 answers

React universal component throws error when connected to store

The errors occurs when trying to visit /article/post.... Here's a snippet of the code of Routes.js where supposedly the error happens. The full error stack trace is on https://pastebin.com/M0pCULPj The full repo is on…
El Anonimo
  • 1,759
  • 3
  • 24
  • 38
1
vote
1 answer

How to use nprogress with vuejs code splitting?

I'm new in vuejs and I want to use nprogress with vuejs code splitting features. Basically I want nprogress when use navigate to pages. The requirement is show progress until component promise not resolve. How can I add this feature in my app? Here…
Shubham
  • 740
  • 12
  • 33
1
vote
0 answers

React Router v4 and loadable-components always rendering same Component even though the route matches other

I've got a Standard React-Redux Application with react router v4, webpack 4 and I'm trying to perform lazy loading of components via loadable-components library, so webpack can create chunks and load them on demand. The problems seems it's always…
tommyalvarez
  • 615
  • 6
  • 19
1
vote
2 answers

webpack route based code splitting reduced my bundle size but increased my chunk size

My bundle size was around 2MB uncompressed and 400kb compressed This bundle was created using webpack 1.15.0. And the film strip is like this This is the Webpackanalyzer output Then i have updated webpack to 2.6.1 and enabled code spliting and…
John
  • 8,846
  • 8
  • 50
  • 85
0
votes
1 answer

Separate bundles form dynamically imported node modules

I have the following configuration in webpack config for split chunks. This perfectly creates two bundles vendors (node modules that were imported in initial files) and common(node modules that were imported in the lazy-loaded…
Let me see
  • 5,063
  • 9
  • 34
  • 47
1
2