Stack Overflow
Stack Overflow

Questions tagged [code-splitting]

Code-splitting is an alternative to large bundles, which is where JavaScript is split into smaller chunks.

Code-splitting is an alternative to large bundles, which is where JavaScript is split into smaller chunks. This enables sending the minimal code required to provide value upfront, improving page-load times. The rest can be loaded on demand.

469 questions
0
votes
1 answer

Expose components so that they can be dynamically imported in app

I'm building a component library to be imported in an React app. I want to expose these components so that they can be dynamically imported in the app. What I tried: lib > index.js export const Component1 = import(/* webpackChunkName:…
untemps
  • 165
  • 2
  • 11
0
votes
1 answer

Webpack throws error with list of pkg dependencies on splitting vendor from app

I am trying to implement code splitting in my webpack configuration for prod builds - separating vendor files from app code. But when I try to build, I get the following error: ERROR in multi bootstrap font-awesome jquery popper.js…
Jithin Nair
  • 841
  • 9
  • 7
0
votes
2 answers

char variable has not been declared

I have ran into a problem yesterday when trying to split my code into several files. Yesterday morning my whole code was in one file and to keep track of everything more easily I wanted to split the code into more files. This went well until I got…
TheEarthkin
  • 5
  • 7
0
votes
1 answer

How to load async react components without Webpack imports with SSR and RR4

I have been looking for a good solution to load async react components on demand at matched route without Webpack import, System.import, require.ensure, ... I want to avoid Webpack footprints in client-side code. On Server I fetch all routes and…
Florian Meyer
  • 1
  • 3
0
votes
2 answers

Code Splitting with react-loadable gives Error : Cannot find module "."

I'm using react-loadable v4.0.4 and webpack v3.5.1. Here is my code, import Dashboard from '../../scenes/dashboard/dashboard'; import ReactLoadable from 'react-loadable'; ... const yoPath = 'src/components/scenes/dashboard/dashboard'; const…
Aniruddha Shevle
  • 4,602
  • 4
  • 22
  • 36
0
votes
1 answer

DRY react-router's getComponent functions

Routing with react-router, redux and redux-saga entails a lot of repeated code, just have a look here. 21 lines for a single route. In my app I have dozens of routes, so it is very important to DRY it out somehow. Otherwise this file routes.js will…
Yan Takushevich
  • 1,843
  • 2
  • 18
  • 23
0
votes
0 answers

webpack async code splitting based on routes loads all chunks in all the routes

I have enabled route based chunking in my react application. I have used require.ensure require.ensure([], function(require) { require('./Component1'); }); My app contains two routes /home and /pro Here is my route.js const React =…
John
  • 8,846
  • 8
  • 50
  • 85
0
votes
0 answers

Webpack including default export when only using member

Webpack seems to be including some extra code instead of chunking, maybe I am not understanding import correctly? import {detector as d1} from './summernote'; class Detector { loadModules() { // assume d1() returns false d1() ?…
Ray
  • 2,713
  • 3
  • 29
  • 61
0
votes
1 answer

How to config my webpack.config.js to extract these dependances?

the construct of the object I want to extract 'vue' to a chunk, 'jquery' to a chunk and something relating with 'vue',like 'vuex', 'vue-router' to another chunk. and what should do with CommonChunkPlugin? These codes were my config, It conbine the…
Tony_zha
  • 97
  • 6
0
votes
1 answer

Webpack 2: vendor, common and specific bundles

With the CommonsChunkPlugin I currently have my code split up into: vendors.js common.js page-1.js page-2-authenticated.js page-3-authenticated.js So on page-1.html I load the following scripts: