464 questions
-3
votes
1
answer
61
views
Can web worker help split Vite result js file?
I am using Vite to build react application. And I have a js file with data (it is just a word dictionary). The file is big, its size is 28MB. Now it is imported and use in code directly. So built js ...
- 31
0
votes
0
answers
87
views
load all pages used causing slow loading page
I am using laravel + inertiajs + react to build a website. the problem is when when I go to the home, it loads all pages including the ones are not needed on Home. it is causing the page load slow.
it ...
- 2,440
1
vote
0
answers
132
views
Chrome Extension Code Splitting with React.lazy + Vite - Chunk Loading Fails Despite Background Script Exclusion Body:
I’m building a Chrome extension using React 18 and Vite 5, trying to implement code splitting for optimization. Despite excluding background scripts from splitting, I’m getting chunk loading errors.
...
- 11
0
votes
0
answers
54
views
Webpack (Craco) code splitting on build (environment-based splitting)
We have a React Craco app which we serve to different markets/countries. This means the majority of the code is used by all markets, but also every market has its own code (components, functions, etc.)...
- 79
0
votes
1
answer
218
views
React lazy components with poor internet connectivity and error boundaries: Failed import due to poor connectivity seems to be cached even when online
In an "offline-first" app (which optimistically updates local state and gracefully handles errors by rolling back local state changes, for example), some features may still require internet ...
- 687
1
vote
1
answer
70
views
Angular Components Structure in Divs
I am questioning myself of whether or not to structure my Angular components in sub divs, to make the html better.
I do have a main page and a overview component. Is it good practices in Angular to ...
- 13
2
votes
4
answers
339
views
How to style Angular parent and child component
I'm learning Angular 18 while I already know React. I have a "pretty big" HTML file, which I would like to split. Let's take this pseudo and minified example:
<ul>
<li>Hello<...
- 342
2
votes
0
answers
166
views
How to improve code-splitting with ReactJS and ViteJS
I am building an application using ReactJS and ViteJS, and i am trying to do code-splitting to reduce the after build chunk sizes and request them only when needed.
I have tried to use lazy loading ...
- 376
1
vote
1
answer
299
views
How to splitting code shadcn form component in React/NextJs
I have just started learning Next.js and shadcn, but I am confused about how to split the code in the form component because my code has already reached 4000 lines.
How can I split it to make it ...
2
votes
2
answers
1k
views
Webpack puts lazy-loaded module into main chunk
I have two components.
One of them is imported directly:
import { directComp } from "./components";
another one is imported lazy:
const lazyComp = import("./lazyProxy");
lazyProxy....
-1
votes
1
answer
154
views
Dynamic import path for React Native
I want to do is I want to import React-Native dynamic path.
example:
import Demo from `./screens/${path}`;
I found one method using lazy, but it also only working when initialize const variable like ...
- 46
0
votes
0
answers
28
views
Separating the code tag from the text and html in C#
I have an HTML file, for example, the content of the following code
<td><input readonly="readonly" class="input_field" onclick="highlight(this);" type="text&...
5
votes
2
answers
10k
views
Vue & Vite disable code splitting / chunking
I have built a small application in Vue/TypeScript and with Vite and i am trying to build the files using vite build but this is chunking the files. The file is to be placed on other peoples website ...
- 447
0
votes
1
answer
1k
views
difference between code splitting and lazy loading in react
I am not super clear on the meaning of load here - does it mean loading into the memory or fetching over the network and load into the memory?
- 3,720
-1
votes
1
answer
53
views
Reduce Import/Site Size of React Window Popup
I have a react app that has >10 pages and imports a number of npm modules.
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom&...
- 8,663
0
votes
1
answer
2k
views
Code splitting not working with webpack 5, react 18, and react router 6
I am trying to set up a new react project with a custom webpack config, and react router. I am using react 18, webpack 5, and react-router 6.
Looking at my App.tsx, it sets up some routes. For now, ...
- 11k
1
vote
0
answers
2k
views
Using Vite with code splitting enabled without adding the `type="module"` attribute in script
I'm working on an embeddable widget for websites where clients embed the widget into their website using a script tag in the following format:
<script src="https://embed.app.com/USER_ID"&...
- 1,711
2
votes
1
answer
1k
views
Using Code Splitting on a Component Library built with Webpack
I have a component library that is published to npm, and installed in other projects.
The library doesn't use dynamic imports. The components are exported in the library as follows:
import {
...
- 123
2
votes
1
answer
524
views
Loading multiple JS bundles in React Native iOS
I'm trying to implement Code Splitting in a React Native app. Currently I managed to load multiple bundles in Android both in packager mode and in production mode.
However, on iOS I'm facing the ...
- 235
1
vote
0
answers
1k
views
Nuxt 3 build.chunkSizeWarningLimit
When I run npm run build with nuxt 3, it keeps giving me this warning
Some chunks are larger than 500 kBs after minification. Consider:
Using dynamic import() to code-split the application
- Use build....
1
vote
1
answer
1k
views
Browser caching issue with code-splitting in production? (Failed to fetch dynamically imported module)
I'm using Vue + Vite for my web app, and I use code-splitting in my router file for most of the routes, for example:
{
path: "settings",
name: "settings",
component: () => ...
0
votes
0
answers
30
views
pass parameter on import with codesplitting
I have code like below and I want to pass athlete to:
AthleteInfo
AthleteGroups
AthleteContactInfo
AthleteCompetitionHistory
I have tried looking for a few different searches like, "code ...
- 299
0
votes
0
answers
577
views
importing a simple string in index.tsx causes full .ts file to get bundled with the main bundle during build time
Technology used:
React
Typescript
Webpack
(Essentially an ejected create-react-app as we plan to move away from CRA)
Lazy loading at each route (react-router)
We've been diagnosing a large main bundle ...
-1
votes
1
answer
998
views
NX and react router lazy doesn't split bundle [closed]
I am trying to use react router with lazy loading. I still see the bundle being downloaded as one main.js. The router resides in an nx application and the routes that should be lazy loaded are in nx ...
- 7
1
vote
1
answer
2k
views
Why lazy loading doesn't work in my react project?
I have a project: link.
The project has router and lazy-components for every page.
Short example router-component:
export const RoutersComponent = () => {
return (
<HashRouter basename={'/...
- 320
1
vote
1
answer
332
views
React Code Splitting - Stopping low level components from downloading on initial load
I have my components structured to distinguish between top level Page components and then other lower level components. In my index.js I am lazy loading all my Page components, but the benefit is ...
- 1,653
2
votes
0
answers
789
views
Module federation prefetch during browser idle time
Requirement: To prefetch the remote modules(module federated) during browser idle time in react.
I've tried webpack magic comment webpackPrefetch: true but that did not work with module federation. I ...
- 51
0
votes
1
answer
31
views
How to add same JavaScript functionality for all the common part of web pages html file like navbar toggle, open submenu on mouseover
In my portfolio project there are some common html code snippet on about, projects, contact.html pages like navbar,footer and sidebar. The main app.js file contains toggling sidebar functionality, ...
2
votes
2
answers
1k
views
Preact: How to properly code split pre-rendererd components using dynamic import?
Backstory:
I'm working on a codebase which is primarily Python with Jinja templates because the site is mainly static. However, for interactive components we're using Preact to pre-render the ...
- 310
0
votes
1
answer
4k
views
C++ Error clang: error: linker command failed with exit code 1 (use -v to see invocation) [duplicate]
I am a beginner in C++, I encountered a big problem when learning, I don't know if it is a problem with my editor or my computer, there is always an error, I look for a lot of answers, just can't ...
- 51
1
vote
1
answer
1k
views
When to create separate widget of a component in a very long flutter .dart file
I have this code as a part of a Column having many children making it as long as 400 lines. Is it a good practice to split widgets like these into separate files? What is the recommended number of ...
- 309
1
vote
0
answers
592
views
Ant Design components not loading on Next.js production server but work on development server
I am working on a Next.js app where I am using Ant Design for the UI components. To decrease the initial load time of the app, I have used dynamic imports for the header. However, doing so causes a ...
- 167
0
votes
2
answers
74
views
spliting based on a condition and Array arguments to IF are of different size
I'm working on a sheet that can be extracted from a system and all the data is in one cell so i need to split them and it is basic for all cells except for resutls. as you can see test results should ...
- 1
5
votes
0
answers
870
views
Module transpilation within a Next.js project with SWC
I have a project in Next.js and Typescript where I am trying to ensure code splitting and tree shaking works well for our purposes. I recently upgraded to Next.js 13.x and migrated from Babel to SWC.
...
- 2,146
3
votes
0
answers
150
views
Webpack Code Spliting increases the overall bundle size by 300%
For explaining this issue. I have created a sample project.
I am using purescript. I am doing a dynamic import and webpack is generating 2 bundles.
If I comment the dynamic import and use a static ...
2
votes
0
answers
485
views
Lazy loading React components doesn't improve performance or reduce bundle size
I have the following code to dynamically import based on routes, however it doesn't actually improve performance or decrease the bundle size in anyway? Am I missing something or is it just a case of ...
- 49
2
votes
0
answers
31
views
Separating Redux Async Middleware and general API functions
I am currently using createAsyncThunk to create async middlewares for a React-Redux app I am working on in the following manner:
import axios from "axios";
import ApiUrls from "../...
- 43
3
votes
1
answer
1k
views
rollup package splitting / code splitting
I am working on a components library (such as material-ui). I am using rollup for compiling.
For the moment I can generate a single package, and to import a component such as a button, I can do it ...
- 51
1
vote
0
answers
392
views
Proper way of using Redux and RTKQ in NextJs with code-splitting
This is a topic that's been discussed a lot through github issues and by now I've noticed two main opinions: It's not possible or it should not be done at all.
The argument for both sides is that ...
- 628
2
votes
0
answers
188
views
Webpack UMD library with dynamic imports produces a ChunkLoadError when importing it in another project
I'm writing a UMD library with webpack and when I try to import it in another project (for testing), it produces a "ChunkLoadError". The error goes away when I use normal imports.
I'm trying ...
- 41
1
vote
2
answers
1k
views
Why does webpack use script tag for dynamic import when dynamic "import()" is already supported?
Lately I've been deep diving more about JS modules, Webpack, the difference between ES modules and CommonJS, and I came across the dynamic import topic. I was curious on how Webpack converts the ...
- 399
0
votes
0
answers
478
views
Route-based code splitting causes css duplicate
Using route-based code splitting causes css duplicate in chunks.
Steps to reproduce:
Create simple app with create-react-app
Use react-router-dom for client side routing
Add one common component with ...
2
votes
0
answers
313
views
Rollup.js : How to choose a single export from a js file with multiple exports?
I have a single .js file containing multiple exports. It looks like this:
// some-functions.js
export function plusOne(value){
return value + 1
}
export function minusOne(value){
return ...
- 462
3
votes
1
answer
2k
views
React: Cannot assign to read only property '_status' of object '#<Object>'
I've been struggling over this error for a while now. It happens when I try to open react-bootstrap Modal with dynamically passed lazy component referrence and props to render it inside. It worked ...
- 3,141
1
vote
1
answer
446
views
Import component from published npm package using react-loadable, cannot find module error
I am trying to import components from a published npm package dynamically using react-loadable. The import is successful with components located in the src/ folder. However any components that I try ...
- 11
2
votes
0
answers
2k
views
Suspense boundary error of renderToString with GatsbyJS and React 18 on production build
I am trying to code splitting and lazy loading in my website but I am getting an error about Suspense boundary.
Error:
Uncaught Error: The server did not finish this Suspense boundary: The server used ...
- 787
1
vote
0
answers
951
views
React js Code Splitting not creating chunks
Im trying to lazy load routes but no matter what I do, I only have one main chunk. Here is the route code.
import React, { Suspense, lazy } from "react";
import {
HomePage,
ProductsPage,
...
- 55
1
vote
0
answers
612
views
Are dynamic and external React components possible in runtime?
We're developing a dashboard React-application in which other (trusted) developers can create their own React-widgets in separate environments. The goal would be a situation where new widgets wouldn't ...
- 11
3
votes
1
answer
7k
views
Why does Next.js pack JS chunks into static pages?
I'm looking into using Next.js for it's hybrid SSG/SSR features. Why are JS chunks being packed into simple pages that should require ZERO JavaScript?
The build command outputs:
Route (pages) ...
- 43
-2
votes
3
answers
375
views
Splitting json object
I have JSON output from SQL statement as below
{
"idno":6473853,
"user":"GCA_GB",
"operation":"U",
"timestamp":"2022-08-...
