Comments (8)
I did end up coming up with a solution that works pretty with create-react-app and versioned clientlibs. When I get a chance I'll throw an example up on github and share a link.
from aem-spa-project-archetype.
I'll try to get something up. The main thing for code splitting with cra is that you need to only bundle the main..js and the vendor..js with the clientlibs plug in. These are the main entry points for all your chunks which will have dynamically generated name so you will need to write a script to move these file to a location relative to the clientlib you create, so the pathing that webpack generates. I think 2 extra things we had to do was use sling mappings so that the path to the clientlibs worked for the cra generated paths (e.g /static/**/*) and there's a config that needs to be added so the vendor js is output with a predictable name, because by default it will be a random number (I forget what it is off the top of my head). After this the acs versioning only needs applied to the main js clientlib as the chunks will have hashes already generated from webpack
from aem-spa-project-archetype.
We had to use customize-cra to get the bundle name for the vendor code renamed. here is the code that should make this all work
// clientlib.config.js
{
name: "js/main",
categories: ["foobar-main"],
jsProcessor: ["min:gcc"],
serializationFormat: "xml",
allowProxy: true,
assets: {
js: [
"build/static/js/vendors~main.*.js",
"build/static/js/main.*.js"
]
}
},
// config-overrides.js (using customize-cra)
const rewireWebpack = config => {
// this forces CRA's webpack config to output named chuck, so you get "vendor.[hash].js"
config.optimization.splitChunks = { chunks: "all", name: true };
// This disables chunking runtime~main.js. The code for this file will be included in main.js
config.optimization.runtimeChunk = false;
return config;
};
module.exports = override(rewireWebpack);
from aem-spa-project-archetype.
Any update on this? Ideally I would like to see code splitting working with acs versioned clientlibs. Is there any work around at the moment others have tried successfully?
from aem-spa-project-archetype.
Hi, we didn't have the time to explore this topic. Your contribution is welcomed!
from aem-spa-project-archetype.
Got it. So use the acs versioned clientlibs hash for main and vendor.js. Pack these 2 in the clientlibs. Other chunks are stored under a relative path with webpack generated hashes. Use them as is. 👍
from aem-spa-project-archetype.
When building an app with CRA, there are three scripts included in build/index.html
. Example:
<script>/* Content of runtime~main.a8a9905a.js */</script>
<script src="/static/js/2.b41502e9.chunk.js"></script>
<script src="/static/js/main.28647029.chunk.js"></script>
According to https://facebook.github.io/create-react-app/docs/production-build,
runtime~main.[hash].js
is "webpack runtime logic which is used to load and run your application"main.[hash].chunk.js
is the application code[number].[hash].chunk.js
are files resulting from code splitting. The first of these chunks is always included in the HTML (e.g.2.b41502e9.chunk.js
in the example above). When using libraries likereact-router
, there will be more such chunks (e.g.3.44e99c35.chunk.js
), which are not included in the HTML but loaded dynamically.
Unless I'm mistaken, there currently doesn't seem to be a way to identify which one of the [number].[hash].chunk.js
needs to be included in the HTML file (see facebook/create-react-app#5306 (comment)). Have you been able to find a way to work around that, @GR1ML0CK?
from aem-spa-project-archetype.
You can match the main js files via globbing (e.g. "/main.*.js". The vendor file gets generated with a random name though. There is a way to tell cra to generate it with a non random name. I'll need to look at my project to remember how we did that
from aem-spa-project-archetype.
Related Issues (20)
- Lighthouse checks with CircleCI
- The desired archetype does not exist (com.adobe.cq.spa.archetypes:aem-spa-project-archetype:1.0.5-SNAPSHOT) HOT 2
- Default app fails due to malformed url HOT 10
- Fix flaky tests on macOS CI HOT 1
- Update to use latest Core Components dependency HOT 1
- Typo in README
- Page with no extension is not rendered
- Update Jackson dependencies
- Angular Archetype discrepancies with Wknd Events code repo HOT 2
- The desired archetype does not exist (com.adobe.cq.spa.archetype:aem-spa-project-archetype:4.0.0 HOT 2
- [Angular] Authorable component does not refresh automatically when in AEM Edit mode HOT 5
- Text Component Fails to Render after upgrading to Angular 9
- Add a convenience NPM script to deploy the project into AEM locally HOT 1
- wrong path of filter.xml in pom.xml HOT 2
- Doesn't work on IE 11 HOT 2
- Sling mapping url shortening support HOT 2
- React app does not load on publish instance due to HierarchyPageImpl HOT 3
- mvn test fails for newly generated project HOT 5
- SPA Principles in Multi Module Project? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aem-spa-project-archetype.