I am adding js chunks in html using below tag
<script crossorigin defer type="text/javascript" src="<chunk>"></script>
at the end of body tag
The same chunk is being loaded again from the UI script.
I am using v5.4.0 of react-loadable.
Has anyone seen the same behaviour?
I missed this point from the docs. Now all chunk files script tags are added before main script tag.
It is important that the bundles are included before the main bundle,
so that they can be loaded by the browser prior to the app rendering.
Related
i built a Homepage using the Django templating engine and on one page is a js application i wrote. Now i moved to a Frontend <-> Backend architecture with React and Django-rest-framework.
The Application i had in Django was served as a .html file with <script> tags for the js part.
Now i moved to React and i'm serving the html elements through a React component and through React-helmet i'm adding the <script> tags for this specific page. The actual .js files reside in the /public folder of react.
I thought i can replicate this way the old structure. But now i get Errors that the .js files can't import classes from the first external script.
What could be the difference in this setup ?
Django:
<script type="text/javascript" defer src="https://unpkg.com/quantum-circuit"></script>
<script defer src="{% static 'path/to/file.js' %}"></script>
...
React:
<script type="text/javascript" defer src="https://unpkg.com/quantum-circuit"></script>
<script defer src={process.env.PUBLIC_URL + 'path/to/file.js' }></script>
...
The Error Message at React is that my file.js can't find the import from the first <script>. But in Django there is no problem.
the import statement in file.js is:
import { QuantumCircuit } from "quantum-circuit";
Thank you in advance for every answer :)
It seems that the first external script is not ready when my custom scripts are trying to call it.
I fixed the issue using the useEffect hook. It calls the external script and if it's ready i'm calling my custom scripts.
Despite i was able to resolve this issue, i'm wondering why this hasn't happend in Django before.
Is there a way to achieve this? I use react.js in the front end only and want to keep it like this.
When you build your application via Yarn/npm, that's what basically you'd be doing. The system will bundle your assets and generates an HTML file. If you open the built index.html you should see your parsed React app in plain JS and HTML.
If you plan to put the build on a CDN, all you need to do is move the assets (JS and CSS) and the index.html wherever you want to host them. Ensure that <script> and <link> are pointing to the bundled assets within your index.html.
<script type="text/javascript" src="/static/js/your-bundle-main.js"></script>
<link href="/static/css/your-bundlemain.0a265734.css" rel="stylesheet">
You can use unpkg, is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:
<script src="unpkg.com/react#15.3.1/dist/react.min.js"></script>
<script src="unpkg.com/react-dom#15.3.1/dist/react-dom.min.js"></script>
Given the following scenario, how can I use React/Preact components in my project:
The main/header content is generated using Django (or static html) templates
I want to use React to generate the sidebar and footer components, depending on the page it is sitting on.
I think the following would work, but I don't know how to split or load the bundles according along the following lines:
Load React/React-dom bundle on every page
Load page specific bundles on demand, where needed
How can I bundle single components up using webpack for use in static html pages and display them where needed? How do I configure webpack for that?
Essentially you transpile React from a bunch of JS/JSX files into one JS script (using Babel), which is then loaded in your html document. So it'd be something like this:
<html>
<head>
// Usual head section stuff
</head>
<body>
<div id="header">
This is the Django site header
</div>
<div id="sidebar_root" />
<div>
Blah blah all the site's body content from Django
</div>
<div id="footer_root" />
<script src="react_sidebar.js" />
<script src="react_footer.js" />
</body>
</html>
And you'd have you React components (which would have a bunch of sub-components), one of which is rendered into "react_sidebar.js" and the other into "react_footer.js". So those components would be in React and the others would be Django.
So in order to load React bundle scripts on demand, you just need to include the script and the div which acts as its root.
P.S.
If you were always loading the sidebar and footer together (i.e. never just one or the other bur always both) you could combine them React DOM rendering into one script, so you'd only have to include one script in your html
Some reactjs code includes reactJs source inside html file,
<script src="react-0.13.1.js" type="text/javascript"></script>
<script src="JSXTransformer-0.13.1.js" type="text/javascript"></script>
<script src="app.js"></script>
Some people are using commonJs require syntax in their app.js,
var React = require("React")
Does both the code blocks do the same thing?
How does the browser handle the require function call because mostly servers use require function?
If you use the CommonJS module system, you need a tool like Browserify or Webpack to analyse your code and see which modules you are requiring. They then take all those modules, and bundle them into one big Javascript file. And since all the code/modules are in the same file at the end, you can require modules in a way which makes it look like it is blocking the UI during the time the module is located, but it's really not.
In my angular project, I am planning to have a separate .js file for each page and a separate .js file for each service.
However, as I begin to code, I realized that I have a lot of import statement in my index.html. This would cause user having to load all the .js file even if they might not need it.
An example of the .js for my index.html
<!-- JS -->
<script src="js/vendor/angular.js"></script>
<script src="js/app/app.js" ></script>
<!-- controllers -->
<script src="js/app/controllers/roomController.js"></script>
<script src="js/app/controllers/dashBoardController.js"></script>
<!-- services -->
<script src="js/app/services/dashBoardService.js"></script>
<script src="js/app/services/roomService.js"></script>
<script src="js/app/services/chatService.js"></script>
<script src="js/app/services/videoService.js"></script>
Is there any solution to this?
It's really a best practice to have each controller, each service, each directive… in a separate file, so you're doing it in the right way.
However, as you notice, it's better for the user (and for the server!) to download a minimal number of files. Your index.html is fine for development, but in production, you must compress all your files in in one, typically with a tool like UglifyJS or YUI Compressor.
This is a known issue, especially with large projects. A viable solution is using RequireJs . You can find plenty of resources on the web about that, for instance you can try this.
I had exactly the same problem so decided to use RequireJS to allow on-demand loading of my angularJS scripts. I created a wrapper called angularAMD that hopefully can help you integrate RequireJS and AngularJS:
http://marcoslin.github.io/angularAMD/