I am working on an shopify app, I am using the shopify app CLI as recommended by Shopify to create and serve the app. What I am finding is page sizes for each Page is too high. I am attaching a screenshot for reference.
This is highly annoying and is making the development very slow. Is this expected, am I missing something, are there any configurations that should be updated.
Continuing further investigation, I created a simple node app from shopify cli, no personal code added, just plain barebone app created by shopify cli, on serving this app in my dev store, I still get heavy page sizes causing time delay to load page (page size is bloated up time to render this empty page is 40~secs and page size is 5.78mb)
There is no documentation on any configuration changes that we need to tweek.
I downloaded these heavy page files to check what is in it, the webpack is somehow bundling all my components in my app js and index js files (repeatedly), its bundling all this unnecessary files causing each page file to bloat up, it would be really helpful if someone from shopify or may be nextjs can point out the configurations I need to update, to change this behaviour.
Related
I am converting an Astro app to Sveltekit that's hosted on Cloudflare pages. The local dev and builds work fine however on deploy the Tailwind styling isn't applying. The classes are in the html but without any css actually applied.
Loading module from “https://bc853ba5.altov2.pages.dev/_app/immutable/start-75c8c80e.js” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://bc853ba5.altov2.pages.dev/_app/immutable/start-75c8c80e.js”.
The above picture is the console output on the deployment. I have my personal website hosted with Sveltekit on Cloudflare Pages and didn't have any problems. So the possible reasons I can think of is that this app is a monorepo app but the app works fine just has no css. Although I think there's some issue with reaching the app.css file.
Some other points that might matter
I have vitest and playwright set up from the initial project creation but there's no tests actually made for them.
I'm using the #sveltejs/cloudflare-adapter. I am also using +page.server.ts files to load data but I don't see why that would affect the styling
Any help would be great thanks!
I ran into the same issue today on an existing project. I bumped down the package version of the Cloudflare adapter:
"#sveltejs/adapter-cloudflare": "^1.1.0"
This solved it for me.
In the Next.js docs, there is a mention of automatic updates:
When you deploy your Next.js application, you want to see the latest version without needing to reload.
Next.js will automatically load the latest version of your application in the background when routing. For client-side navigations, next/link will temporarily function as a normal tag.
I am interested in how this works, but can't figure it out by looking at the Next.js source code. I understand that once an updated version on the server is detected, the client side links become normal <a> tags and so a full page load will occur, allowing the new HTML and new JS/CSS assets to load.
The bit I'm not sure about is how Next.js detects that a newly deployed version is available on the server. What am I missing?
I'd like to use Next.js static site export, but I'd also like to have dynamic components within the templates so that a build wouldn't need to be done every time they change, for example, a 'navigation' component. From what I've read this doesn't seem possible? Are there any workarounds, aside from creating a separate client-side build step?
Next is working on allowing for a combined static + SSR generated site, but they're not there yet. I see a few options currently:
You can export a static site, but have that static site make api calls, etc. So you can load your navigation or whatever via api calls. Benefit - no new build. Drawback - those links/that markup is not available to search engines and won't appear initially for users.
If you're using a CMS and CI system (eg, WordPress for content, Travis for CI), you can set up webhooks or functions in WordPress to fire and trigger a rebuild & deploy in Travis when your content changes.
Go full SSR. It still delivers a fully rendered "static" page to the browser, it's just not a static HTML file at build time but one at run time. This is your best option if you need to have your dynamic content rendered immediately for the user and don't want to build with every change.
I have a WP site working. It has everything rendered by using PHP files.
Now, I would like to change one page of my site to be based on React. Meaning one page-template that will execute react JS code instead of PHP. Can this be done?
I found that I can user WP-API, and that is great but can It be done in somekind of a hybrid mode?
If so, what do I do with webpack and node_modules? Will I have to navigate to the react template and run webpack run manually? Should I execute npm start on my production site?
I found tutorial showing how to use WP-API as backend server, but the React app is served on its own. I need the react app to be served by wordpress.
Help please
Regards, Ido
This is somewhat complex, but I think it's a two step process
Setup a develop environment for React, this can be done inside a wordpress project, but it would be much simpler to develop it in a side project.
Once you finished developing, you build a production version of your code(I.E, index.min.js) - this is a self contained file that should be a "plug and play". simply including this regular script tag in your page should start working.
The complex part is setting up an ES6 / Babel / React environment inside a wordpress project, but other than that, React will bundle into a browser-ready file that can be used directly inside a browser.
I'm starting a large scale app and need advise on setting up the folder structure and all. So I'm not sure if on Meteor startup if it loads all of the components to one file or not ( if all the components are in the client/ folder )
If it does not load all the components and send it to the client initially the this question has been answered. if Meteor do send all the components to the browser then need a way to fix it.
At the moment I have like 70 components and do not wanna send all of this to the user on the initial page load.
It seems as though incremental/on-demand loading for components is in the 'todo'/'future feature' stage.
From - Trello: Meteor Roadmap
Right now, on initial pageload, you download all of the JavaScript,
templates, and css in the app.
This task is to make it so that you download just the parts that you
need. You might download additional parts in the background, or
on-demand as you navigate through the app. (To be clear, this would
apply to the JavaScript, CSS, and templates, not to database contents,
which would continue to be handled by the subscription system.)
It should be possible to secure some of the additional parts so that
only certain users can download them. For example, only admin users
could download the JavaScript and templates for the admin console.
Related: when the app is updated, only download the changed parts, not
the whole app.