464 questions
1
vote
1
answer
2k
views
Vite / Rollup Incorrect Chunking
I'm having an issue importing Fontawesome icons into a Vue 3 Vite Project. Specifically the build files output from rollup are not chunked correctly. I've tried the two methods of importing icons from ...
- 51
3
votes
2
answers
3k
views
How to implement lazy loading and code splitting with react-router?
I am using React v17, and React Router v6+. When I load the page, the browser downloads all the js which is around 900kb, reducing the initial load time.
My routes are defined like so
const ...
user9761420
10
votes
0
answers
4k
views
Exclude / Include files for code splitting using esbuild
I'm using esbuild to build my web-components using lit.
I'm now investigating code splitting to make my bundles smaller.
I generate a lot of components( ~100 ) that all have the same import statement
...
- 838
1
vote
1
answer
16k
views
The argument type 'List<dynamic>' can't be assigned to the parameter type 'List<Map<String, Object>>'
here is basically the entire code which is related to the error I suppose!!
I am new to programming as well as Flutter, I tried to splitting the code into widgets so my code be cleaner. that's where I ...
- 13
6
votes
0
answers
1k
views
How can I get the vendors chunk names of an async chunk with Webpack?
Let's say I have 3 async chunks that were created by dynamic imports:
const Notes = lazy(() => import(/* webpackChunkName: "notes" */ 'pages/Notes'))
const Lists = lazy(() => import(/* ...
- 111
-2
votes
3
answers
968
views
How can I split my code (c#) in Visual Studio while maintaining full functionality?
I realize this sounds like a question the answer to which can be found in the first google link, but to my surprise it wasn't. I'm learning C# recently and for the first time I'm writing a fairly ...
- 27
4
votes
1
answer
710
views
create environment variables based on the webpack entry point
I am splitting my react code with multiple entry points in webpack, these bundles are then loaded independently at completely different pages(HTML documents).
I have a lot of shared code, and most of ...
- 4,370
1
vote
0
answers
333
views
How to reproduce a chunk load error in React Native app locally
I'm trying to figure out a solution to the ChunkLoadError that occurs when a user has a tab open for a long period of time, switches routes, and gets an error because the newly deployed version of the ...
- 21
3
votes
0
answers
823
views
How do find out WHY webpack has put modules inside a specific module
I've got a large codebase for a fairly complicated site. We let webpack (4.33.+) do the splitting for us. After all it's a clever thing. This is what we use (we are OK with the vendor bundle)
...
- 346
1
vote
0
answers
110
views
how to use namespace in @loadable/server
The @loadable/server docs - https://loadable-components.com/docs/api-loadable-server/
give an option for using namespace in chunkExtractor as an option if you have several React apps on the same page. ...
2
votes
1
answer
3k
views
Why isn't webpack retaining console.log statements?
I'm doing my first tests with webpack and experimenting with code splitting, and I simply wanted to log from my index.js file. It gets compiled, but it doesn't log nothing, both in development or in ...
- 8,195
4
votes
0
answers
907
views
Difference between bundle.js, 0.chunk.js, main.chunk.js
After my React app loaded in the network tab of dev tools I have filtered the .js extension there I can see bundle.js, 0.chunk.js, main.chunk.js, Landingpage.chunk.js, etc files.
I can understand that ...
4
votes
1
answer
3k
views
Webpack 4 code splitting not working with React.lazy
Hi all I am using webpack 4 and having issues in code-splitting, I have a file main.js that ned to import 5 components that also need to be code-splitted and lazy-loaded with react-router. Now each of ...
- 369
1
vote
1
answer
1k
views
How do you use React lazy to code split with Babel & Webpack?
I have a project where I would like to have route based bundle splitting. https://reactjs.org/docs/code-splitting.html & https://webpack.js.org/guides/code-splitting/ is what I've been looking at ...
- 11
1
vote
1
answer
2k
views
How to disable lazy loading on specific environment [React]
i am working on a React project , previously i implemented code splitting on this project with React.Lazy feature on navigation routes. Currently it is hard to debug on this chunk files. I need to ...
0
votes
0
answers
644
views
Is there a way to know if all chunks loaded when using React.Lazy?
I need to add an event listener to all the inputs inside a form. This can be easily done, but the problem is that I have code-splitting enabled. So, when I add the event listener some chunks are not ...
- 117
1
vote
0
answers
735
views
Javascript imports, do they duplicate?
I'm trying to find a javascript workflow solution to bundle my code in multiple files. I have a question I can't find the answer, maybe it's under my eyes but well...
If I use javascript import in a ...
4
votes
0
answers
44
views
Why does using require.ensure in two different ways cause code splitting to fail
Code splitting using webpack5's default configuration
// chunk1.js
export const a = 'xxx'
// index.js
// code splitting success
require.ensure(
[],
(require) => {
const mod = require('....
- 41
0
votes
2
answers
124
views
String Splitting of an URL which always changes the position of it's values in python
I need to split an url which is changing the positions of it's values very oftenly.
for example:-
This is the url with three different positions of request token
01:-https://127.0.0.1/?action=login&...
2
votes
0
answers
1k
views
Accessing context API when using inertia.js and code splitting
I wrote my project in react and now I want to add it to Laravel using inertia.js but I can't access context since I'm using dynamic-import for code splitting.
I'm wondering if there is a way to access ...
- 21
1
vote
1
answer
5k
views
How to load icons dynamically in Next.js?
I have these lines in my Next.js / React files:
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
Based on the docs: https://nextjs.org/docs/advanced-features/dynamic-import
...
- 35.5k
1
vote
1
answer
2k
views
How to dynamically import moment.js in a react app (with typescript)
I'm trying to do some code splitting and moment.js is one of the targeted packages I want to isolate in a separate chunk. I'm doing it like this:
const myFn = async (currentNb) => {
const moment ...
- 325
1
vote
0
answers
480
views
Terser plugin throws Invalid syntax after code splitting in Webpack
I use TerserWebpackPlugin to compress JavaScript files in production mode. And it did work unless I added code splitting. The plugins starts to throw an error Invalid syntax: 96dd6cce9d985b84ae6a [...
- 2,129
2
votes
1
answer
3k
views
Why is material ui build so big
I'm trying to get Material-ui to tree-shake correctly. The bundle is extremely large compared to what I'm actually using. I'm not using most of the components listed by the analyzer plugin below and I'...
- 1,211
1
vote
1
answer
289
views
Is there a way to split node module bundle file in webpack?
I built a Vuejs App for House Plan. I've already use some optimisation way but I have two node modules whose size are far up to 20kb and I get a bad score on performance test with lighthouse on google....
- 19