Comments (3)
Your solution for server-side definitely works, but I am not sure if it can be adapted for client side.
The problem is - loadable is not importing scripts by itself, it's just asking webpack to do so with all script names being hardcoded in the webpack manifest.
So you have the following options:
- (hard) modify your script by injecting the language to alter manifest file and point to other files
- (easy) change URL format to
/en-US/some/component/chunks.js
, in this case you can use webpack.publicPath to control "prefix" setting it to where it should- done, that works like magic and more importantly scripts dont use any query string and are better cacheable
from loadable-components.
Solution I currently use is adding a routing method, which is by cookie, in nginx proxy server.
Then add response.cookie('lang', language)
in request handler (which is server_side_renderer
function in my project), so when the first request is responsed, there will be a lang
field in the continuing request in HTTP Cookie
header.
(⬆️ The hard way)
The easy way, is not that easy actually, because sometimes there may be dynamic language support demand, this is why I said:
NOTE: dynamic loaded component should stick to this rule as well.
As there is dynamic demands, webpack.publicPath
is not a perfect solution as well, this can only solve static situations. There will be multi entry scripts which is compiled with different webpack.publicPath
, the only difference among these scripts is the webpack.publicPath
.
Maybe loadable's webpack plugin can add some hooks to solve this ? I'm not familiar with webpack development (actually I'm not a frontend engineer...).
from loadable-components.
Then add response.cookie('lang', language) in request handler
That actually should work out of the box. Just use cookies not extra query parameters
As there is dynamic demands, webpack.publicPath is not a perfect solution as well,
It is, because it can be configured in runtime. And that would be same script, just prefixed with language - something nginx can use instead of query attribute.
Maybe loadable's webpack plugin can add some hooks to solve this
It cannot because it's not only about loadable-stats (server side), but client-side as well, fully managed by webpack
from loadable-components.
Related Issues (20)
- problem with redial HOT 2
- How to change referencing external styles to preload mode
- Fallback running even when component has previously loaded HOT 1
- Webpack doesn't like @loadable/server 5.16.4 HOT 5
- Server is caching old request split chunks, and these are not being re-requested when a new request is made to the server.
- ctor.requireAsync is not a function error HOT 1
- Inline Chunk injection HOT 2
- Not working with latest @loadable/server & @loadable/babel-plugin `v5.16.0` version HOT 4
- How to lazyload a hook? HOT 3
- Fallback behaviour HOT 1
- Main.js is rendered on every page even if I splitted each page into chunks with @loadable/component
- error in ./node_modules/@loadable/component/dist/loadable.esm.mjs HOT 9
- Why ChunkExtractor is required? HOT 3
- Is website sync with repo?
- If I am using react18, do I still need loadable-components HOT 6
- Add esbuild support HOT 3
- react-native-web SSR support HOT 1
- Loading state is always true on first render HOT 3
- SSR is broken for component v5.16.2+ HOT 6
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 loadable-components.