I am developing a SPFX app (SharePoint Framework) for SharePoint online using React JS. Everything was fine up until the point my app grew beyond 100 MB in size. Now, although I can upload the app to my app catalog site, I cannot update the app in my site collection. When I try, I get the following error:
the package stream exceeds the maximum allowed length of '104857600' bytes
I am using Gulp Bundle -ship and Gulp package-solution --ship commands to package my solution. Is there a more efficient way of packaging for production? Maybe an approach where the package file doesn't become as large?
After a few hours of hit and trial, found this solution which addresses the issue. The answer to the original question is still unknown i.e. I haven't found out how to add an app larger than 100 MB. But I have found a solution to why the app was more than 100 MB in the first place. Sharing it so it may help others like me who are beginning with React SPFX development.
Issue
My project has absolutely zero media files (no images, no videos). So it was baffling that the package was more than 100 MB. I had more than 25 components and 5 web parts though. I usually start my workbench (using Gulp Serve) and keep on making changes until it's ready for build. I then stop Gulp Serve and run my build commands (Gulp Bundle -ship & Gulp Package-Solution --Ship). What it does is increment the size of the .sppkg file with each build. It also adds a painful amount of delay in uploading and checking the app to app store (almost 10 minutes in the worst case scenario). And then when the package crosses 100 MB, you can't update it in your site collection any more.
Solution
I stumbled upon "Gulp Clean" by chance and thought to give it a try. I ran it before my build commands and voila! The package which was 100 MB just a few minutes back was now 1.3 MB (obviously since all that my solution contains are .ts, .tsx and .scss files). Now updating my app in app store takes less than a minute.
So I created a bat file to build my package every time I need to. The contents of the bat file is as shown below:
call gulp clean
call gulp bundle -ship
call gulp package-solution --ship
Additional Reference
I found this post from Waldek Mastykarz too late. Although the reasons for using "Clean" in his post were different than mine, it would have saved me a few hours if I had just seen this a little early.
Warning
I am still discovering Gulp Clean in detail and can't say for sure if it has no side effects.
Related
When I am trying to deploy my react app on AWS Amplify I am getting below error. We are using Amplify for last 2 years.
It was working fine till last week but now its build is failing.
I am using NODE_OPTIONS=--max_old_space_size=4096 in build command.
This project is quite big.
With code splitting biggest chunk size is 2.2 MB but number of chunk is around 100.(Is it right to have so many chunks?)
Without Lazy loading biggest chunks size is around 4.8 MB(Refer below).
Using Node Version: 12.19.0 & "react: ^16.13.1"
First I splitted the code based on route then deployed, Initially 6-7 deployment was successfull then it started failing. Then I tried many solutions from this github issue, but none of them worked then I remove the code split logic and deployed again but it was giving the same error.
Temporarily it is working when I set GENERATE_SOURCEMAP=false in .env file. But I think this is not a permanent solutions. Above solutions is only disabling the source-map.
I have been working with reactjs from last 7-8 months, I have always used create-react-app to get started with any react application. but, by exploring more ways to get started with a react application I came to know there is a thing called vite which is I guess is providing a faster and leaner development experience for modern web projects.
I used it once till now, not in production yet as I am not very confident about it. So, which is a better way to get a simple template for react app. which is also better in production environment. Does using any one affects in production?
CRA uses webpack to handle its core functionalities. In the development webpack repeats the bundling process every time there is a change in the code. As a result, when your source code grows larger, everything becomes sluggish. The time it takes to serve a dev server and build your projects increases significantly.
Vite only needs to pre-bundle your dependencies using esbuild the first time you start development before it begins to serve your app.
Vite doesn’t need to bundle the entire app or transpile the modules and code before starting a dev server; transpiling is done on-demand, thus making it significantly faster than CRA.
https://blog.logrocket.com/vite-3-vs-create-react-app-comparison-migration-guide/#:~:text=Vite%20and%20CRA%20are%20not,and%20which%20modules%20are%20supported.
I am using create-react-app to create my react projects boilerplates but recently launching my projects with npm start is too slow and most recently hot reloading is slow take from 5 - 15 secs to rebuild the page after any change especially when rebuilding after an error.
I really don't know much about webpack, after some search i found that problem can be from webpack or webpack-dev-server but i don't know much about them
so i don't know from where should i move to solve this issue?
If you're developing a React project in a Windows Subsystem for Linux 2 (WSL2) environment, it's especially important that you work within the WSL2 directory structure for optimal I/O. For example, you'll want to put the project in "~/repos/my-project", not "/mnt/c/Users/my-username/repos/my-project". They aren't the same location. You can confirm this by running "explorer.exe ." from the terminal.
I'm trying to implement an emoji picker with a text input, I came across a package called Emojimart it was really good and working effectively, but running it in production makes my bundle size too big,
so I'm wondering if there is anyone who used it in production and if there is any tips on how to make it production ready?
Or: if there is any other alternatives.
Note: Reproducing what I have will take only 2 steps
Create react app with create-react-app
Install emojimart
Then check the bundle size and performance of the app, you will notice the difference.
There was a discussion about that in the Emoji Mart project: https://github.com/missive/emoji-mart/issues/156 - unfortunately I don't see a solution that wouldn't require you to eject the app or use react-app-rewired.
Since you're using React, maybe you could give emoji-picker-react a try. The bundle size in a new project is around 120 KB (80 KB gzipped).
Good day,
I'm building and angular 2 app based off of this starter pack. I'm trying to get a handle on what our build process will look like. I noticed when running:
npm run build:prod
npm run server:prod
That html is located within the bundle file.In large applications this bundle file could be upwards 4-5mb or more. This could be a problem for mobile access. And that seems counter intuitive to the angular 2 approach.
Is this correct build for a large applications?
Shouldn't the HTML files be loaded as needed rather than all at once?
Perhaps I have misunderstood something.
Yeah basically that's what Webpack does. It bundles everything. Having your output file ~4MB is very likely to happen. What you need is to separate the file into chunks. Using the common chunk plugin this way you'll be able to bring let's say all your third-party libraries into one chunk.
Secondly, you can break the file further into more chunks then load them asynchronously.
you can find more about this in the link.