There is a main app.js file which has import {Route} from "./router". Router - a class that depending on the the current url of page, will create an instance of this page handler. For example, for page /home/accountPage - router will create a handler in this way: return new AccountPageHandler(params). It turns out that in the router imported all handlers of all pages (and them so much). And when I do System.import ( 'js/app.js') I will loaded all the scripts, including and unnecessary - because they are imported into the router, and the router imported in app.js.
How can I make so that does not import all at once, and only that I want to use? I am sure that this problem is already getting up earlier for many developers, but how to fix it - I have no idea because I faced with for this first time.
P.S.
My javascript is generated from the typescript (if suddenly this affects the options for solving the problem).
Without seeng the actual code, my guess is SystemJS imports all of your scripts because you import all handlers of all pages. What you could do (if your router supports promises and async loading of page handlers). Is to use System.import('specific_page_handler.js') to import only the page handler needed right now.
But depending on the size of you app, and on the size of separate chunks you can lazy-load, just creating a minified bundle, setting a long cache expiration, and loading all at once can be just fine. Possibly small gains with added complexity.
Related
I´m using single-spa library (v 5.8.2) with multiple angular projects. When i try to import ngx-quill (library which imports another library (quill.js)), the single spa library replaces the default import url with localhost:9000 (the url root loads into).
I have followed the single-spa instructions to modify the scss url, images and other own elements, but remember that in this case, the import call is made from an external library, which should not be modified.
I have also tried to insert my own interceptor in which, if it detects that specific url, it is replaced by the one I want, but since this call is not REST, it does not go through that one and I cannot modify it.
Is it possible to make single-spa by default modify the routes so that they access the corresponding node_modules?
Thank you!.
the single spa library replaces the default import url
single-spa does not do anything at build time and is only used in the browser.
What is actually happening is that ng-quill likely makes use of relative references to external assets. This could be in JavaScript (import "./styles.css") or in CSS (#import("./styles.css") but in either case, this means that in the browser the app will try to resolve those. But those URLs being relative means that they're relative to the origin that loaded the asset, which is the root config. That is why you're seeing those URLs.
Is it possible to make single-spa by default modify the routes so that they access the corresponding node_modules?
The answer to this is no, because single-spa is not what is causing this. You need to instead configure your build tool (Webpack is what Angular uses I believe) and handle the processing of those URLs. The single-spa-angular
Angular community has documented them here https://single-spa.js.org/docs/ecosystem-angular/#styles
In my workplace I've been told by my supervisor to use autoloaders instead of using many import statements since it's slow! First of all, based on my research there are no performance benefits of doing so and secondly(I'm using js modules, and we are not talking about bundles), I can't think of any good reasons for doing such thing.
The way my imports work now are:
Imagine we import a.mjs like so ->
import '/js/components/a.mjs'
The route /js/ is a rule that redirects to my root of static js files, so I don't even need to use relative paths.
Is it bad practice? If there is something that I'm missing anything please tell me; I've done my research and didn't find any reasons to use autoloaders with js modules.
An actual example for you to see:
Flask route rule:
#app.route('/js/<path:filename>')
def js(filename):
return send_from_directory(Path(app.root_path).parent.absolute().joinpath("static\\js"), filename)
and in my js files:
import {View} from "/js/common.mjs";
import Spinner from "/js/components/spinner.mjs";
import RecommendedTripsSlider from "/js/components/recommended-trips-slider.mjs";
import TripsSlider from "/js/components/trips-slider.mjs";
import Blogs from "/js/components/blogs.mjs";
Thank you for your time. I appreciate it.
From the JavaScript Modules Guide on MDN :
Modules are only executed once, even if they have been referenced in multiple <script> tags.
This can be verified in the spec under section 16.2.1.5.2 Evaluate.
Evaluate creates and returns a Promise which resolves when the module has finished evaluating. This Promise is stored in the [[TopLevelCapability]] field of the [[CycleRoot]] for the component. Future invocations of Evaluate on any module in the component return the same Promise.
The first time the browser needs a module, it is hoisted, loaded, cached and executed. Additional import statements in future scripts will reference the pre-evaluated module from memory. No additional HTTP requests need to be made. No additional execution needs to happen.
On subsequent page views, the locally cached version of the module will be used, assuming your server's caching policy is configured appropriately, or you've implemented caching with a service-worker. In fact, you can even preload any specific modules that you might need ahead of time.
Performance-wise, as long as your app isn't importing hundreds of modules you should be fine. At that point you should probably look into bundling related components together with tree shaking. However, monolithic app bundles should be avoided as they obliterate the benefits gained from using modules since one small change to a single component means your users now have to re-fetch the entire app. Keeping your components split up means that user agents only download the parts needed to display the content on the page they're on and nothing more.
One reason you might want to use a module loader/bundler would be if you were installing dependencies through a package manager like npm. Then you would need a way to resolve the named imports to their actual file paths. But that process can easily be handled without a build step by using import-maps.
<script type="importmap">
{
"imports": {
"moment": "/node_modules/moment/src/moment.js",
"yourlib": "/lib/yourlib.js"
}
}
</script>
Unfortunately, this feature is not available in all browsers yet but. This already works in Chromium based browsers, has recently been implemented in Firefox (slated for release in v102) and support for other browsers can be polyfilled with es-module-shims.
This is the future of native module resolution. Implementing an autoloader into your project now would be a step backwards.
I recently started working with Angular 6 and while basic scenarios work pretty well, I'm having a hard time making more complex routing scenarios work.
I have so far divided my application up into two major modules (more to come), Authentication and Core.
In the Core module, I have a Core Component which contains Navigation, Header and Footer Components and then a tag.
From the core navigation the user should be able to access major parts of the application such as:
UsersModule - UserListComponent, AddUserComponent, EditUserComponent etc
ProductsModule - ProductListComponent, AddProductComponent, EditProductComponent etc.
As these different modules will be used by different users I was hoping to use lazy loading to load them into the CoreComponent - router-outlet tag. Ultimately it will look like this:
The problem is I'm not sure how to set up my routing as when I try to load any of the components in either UserModule or ProductModule they just replace the contents of the screen instead of being loaded into the CoreComponent's tag.
Here is the code:
app.module.ts
core.module.ts
user.module.ts
Can anyone please help me?
I' am looking for a way through which I can load multiple modules under same path in Angular. For example, consider I have three modules AModule, BModule and CModule each having its own RouterModule.forChild call. Now I want to mount all these modules under say site route.
One way I have achieved this thing is by wrapping routes in RouterModule.forChild call under site route as follows:
RouterModule.forChild([
{
path: 'site',
children: [{}] // children goes here
}
])
I don't know whether this approach is correct but it is working fine. The only issue which this approach is that I have to specify canActivate in every module I want to mount under site. While this is not a problem, I was looking for a cleaner solution.
I know there is a property loadChildren which could be used to load modules lazily. But I want to load modules eagerly.
I' am using AngularCLI which splits code of module I specify in loadChildren in a separate JavaScript file which is not I want.
I' am using AngularClI v1.2.0 and Angular v4.2.5.
Any help is highly appreciated.
Thanks
I'm not entirely clear on your goal and what you are ultimately trying to achieve, but here are a few thoughts.
You can use the loadChildren and "lazy loading" to load on demand OR eagerly. If you select eagerly loaded routes, as soon as your main route is loaded and your first view is displayed, the other modules marked for eager loading are immediately loaded asynchronously.
I have an example of that here: https://github.com/DeborahK/Angular-Routing in the APM-Final folder.
I'm not clear on why you don't want module splitting. It can significantly improve the startup performance (time to display of the first page) of your application.
In addition to canActivate there is also a canActivateChild so you can put this on the parent and not have to repeat it for each route. The docs for that are here: https://angular.io/api/router/CanActivateChild
I'm having an issue thinking about the best way to architect a React app with multiple pages/views (still a SAP).
Let's say we have a simple app with 4 major sections (pages): dashboard, users, stats, comments. Each section has different components in it (think react components). For example, the comments section would have a hierarchy like so:
CommentsSection
- CommentsQueue
-- Comment
--- Text
--- Buttons
- CommentsApproved
--Comment
--- Text
--- Buttons
In a framework like angular for example, the 4 main sections would be split into partials, and loaded in an ng-view upon request, with their respective components inside. When landing on the homepage, the app would only load the dashboard view and upon the user clicking on a nav item, the selected route (i.e. app/users or app/users/:id) would trigger and the app will load the required "template-view-partial" (without a browser refresh).
Now in terms of React, how would this occur? it seems like ALL views and ALL their components would need to be available in a browserified JS file and the app can then update the DOM.
This seems terribly wrong, as we'd be loading all sections in the first load, even if the user doesn't ever need to get to that section. Granted, we could split it with routes on the server, and only serve the components for the page based on the route, but that would require a browser refresh, where as in Angular for example, it would happen without a browser refresh as the view is loaded asynchronously.
The question is, how can this asynchronous loading happen in a React-based app?
I think there's a few different ways in approaching this, I'll explain the approach that I am currently using for my work and side projects.
Instead of using browserify, we use a module-bundler called webpack (https://github.com/webpack/webpack). What's great about webpack is that it's like Browserify but can split your app into multiple 'bundles'. This is great because if we have multiple components/views, the user would just download the features they need for that particular view without having to download everything initially. It allows react-components and their dependencies to be downloaded on demand.
Pete Hunt wrote an article that goes into depth on the benefits of webpack when using it with React (including how to async load react components), and how it is similar/different to Browserify and modern build tools like Grunt/Gulp: https://github.com/petehunt/webpack-howto
I have described one solution using webpack here : http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/
In essence :
use require.ensure([], cbk) to define code chunks; in the cbk, load your packages synchronously using require()
in your host component, load your asynchronous component in componentWillMount(), and set in in the host component state.
use it in the host component render, when defined on the state