I am using vuejs with laravel blade file (laravel mix too). But When i run ‘npm run watch’ on local, it built about 13 MB of app.js !
When i run ‘npm run pord’ on server it makes 6 mb !
So, the users face slowness every time i deploy new task.
I have few role permission (main panel and school panel).
Main panel has full control over all things. But school panel has few component.
We use blade file which call a master component and master component may have one or more components that are SPA(Tab based). Means when user click other tab it loads another component but if the user click on sidebar menu the page (laravel blade file) reloads and load another page with tabs.
I don’t need to load all component for school panel as this panel has limited permission.
Is there any way so that i can load component specific js file instead of one js(app.js) file?
Is there any way to compact all packages in single file and component file in another js file?(as whenever i deploy changes user have to download whole js file again)
You start with changing your build, so it creates two bundles:
app.d1f04bb8.js (your code)
vendor.b9f38bcd.js (libraries)
both are cached, so when you do small change -- user will need to load only new app.js.
You can go further and make more vendor bundles, more app bundles, lazy-load bundles etc. -- which one you need is very specific.
P.S. Of course, make sure that your code is minified.
Related
I have problem with Vue spa.
App work fine, when I go from some page to another.
App is e commerce and when I copy direct link of some product and send to someone I take to much time lo load that page, but when I click from list of product to specific product it load immediately.
Only direct link took too much time to load - like 10 sec.
I try remove some load function from page, but it's the same problem.
Are you using lazy loading in your app? If not, Vue Router will try to load all pages when the site is first opened.
You can see browser's console on network section
If you see that the files of all pages are loaded when the site is first opened, you are not using lazy loading.
That's all I can think of from the information you provided, I hope it helps.
Vue Router Lazy Loading
I've been developing a new Vue project to control the connected devices from one point, I've been working on an admin template and it's all good but there is something that I want to learn and implement to this application.
Let's say I want to change the whole frontend template (the admin template that I'm using now) and use a new design, how can I implement the whole existing application to a new template? For example, when you start creating a Wordpress page, it gives you different templates and you choose some of them and start designing the website... Maybe after six months you want to change that design and you simply click and switch to a new template and all the existing content will be migrated to the new template. That is exactly what I want to do with Vuejs.
I have to do this project, which I prepared with the existing theme, dynamically, as if I will pass it to another theme in the future. When switching my existing project to a new theme, instead of copying all the components and their related scripts, I want to be able to switch just like in Wordpress by simply throwing the theme file into the project. How can I add this functionality to the project?
I would like to make a page with Vue 3 where a user could start an upload of a (very large) file, and after that he's able to go to other pages while the upload is still going on in the background. A plus would be a small widget showing me progress anywhere on a website, and a notification when the upload has completed.
I may have found something, but it's written only for Vue 2: https://github.com/Akryum/vue-router-multi-view
Well, the solution was actually quite simple... I've just put the upload component outside the router component in the main app template and everything worked.
I'm using Pingendo V4 (not-beta).
I assume templates are partly completed pages that I can start with and modify, and that Themes are only selections of shapes, colors that I can use on my own pages. Is that correct?
Can I download a (I assume Bootstrap) theme or template, use it locally and then transfer the files to my web site? How is the download done and them integrated with Pingendo?
Thx.
Templates are completed pages that you can edit and customize to your liking. Themes are sets of customizations. Sometimes themes and templates are made for particular business types, for example pingendo has a app, resteraunt, and fasion templates complete with there coresponding themes. With Pingendo you can download your theme by doing the following: Go to the HTML tab, which gives you the HTML view of your page. Copy and paste that into your own index.html page. Secondly go to the sass view in Pingendo and copy and past it into a custom.sass file that you create. Keep in mind you will want to convert that sass to css, there are free tools that do this online. Depending on your webhost the method of putting them online will be different. Most of the time you will need to FTP your files on to the server, put your html into the main folder may be names something like public_html. Put your css into a folder in the main folder called css, make sure your link to the css in your index.html reflects the file path. Once you have it downloaded there is no need to reintegrate it into Pingendo, the only time you will need to go back there is if you need to make changes. Of course you could always hand code the changes as well.
I have read this in many places "You will eventually want to create your own runtime directory and keep it in your own source repository...". Can anyone tell me how to do that? What if I don't want to lose some of the OOTB components?
Currently I am just planning to have a separate webapp for custom developed components. Let's say, I want to have "ootb" mount point for the OOTB components and blank "" mount point for custom developed components. How should I do that? This is what I have tried without success:
<webapp-list>
<webapp name="webroot" http-port="8080" https-enabled="false">
<root-screen host=".*/ootb" location="component://webroot/screen/webroot.xml"/>
</webapp>
<webapp name="customroot" http-port="8080" https-enabled="false">
<root-screen host=".*" location="component://customroot/screen/customroot.xml"/>
</webapp>
</webapp-list>
If this does not work then one other solution that I can think of is to just have the "customroot" entry, and add the "webroot" as SubScreenItem in it. The "customroot" screen will just be blank, and my custom decorator will be present in the "customapps" screen which will be a counter part of the "apps" screen. And all my screens will use the "customapps" screen.
Although I haven't tried what I wrote above, but that somehow feels like a hack. I believe there should be some better way to do this.
And yes, I have read the article, I want to use localhost and there should be some way to do it with localhost too.
As explained in the other StackOverflow question you linked to (on the word "article") the webapp element used at runtime is selected based on the "moqui-name" context-param from the web.xml file for the webapp (in or out of a WAR file). Unless you are deploying multiple WAR files or other forms of webapps this is not useful.
What you are describing would be handled by adding subscreens in the screen hierarchy at the desired points. The general idea with the screen hierarchy in Moqui is that you can have root screens of "applications" mounted through various means (see the annotations on the subscreens element or the Making Apps with Moqui book for details on the 3 ways of doing this). Part of the point of this is to AVOID multiple webapps mounted in the servlet container because that makes things more complicated, including: handling authc and sessions, configuration and deployment, and so on.
Generally for an application in a component you'll want to use a database record to add a subscreen to an existing screen in the hierarchy, mainly from the "webroot" component. Here is an example of that from the example app in Moqui (this adds an "example" path elements under the "apps" path element, where the apps.xml screen is mounted under the root screen, putting it at /apps/example):
<moqui.screen.SubscreensItem screenLocation="component://webroot/screen/webroot/apps.xml"
subscreenName="example" userGroupId="ALL_USERS" menuTitle="Example" menuIndex="8" menuInclude="Y"
subscreenLocation="component://example/screen/ExampleApp.xml"/>
Here is an example from PopCommerce to mount the root screen of the application under the root screen instead of the "apps" screen (i.e. making it located at /popc instead of /apps/popc; note that this means the decoration in the apps.xml screen will not be used because it's not in the render path):
<moqui.screen.SubscreensItem screenLocation="component://webroot/screen/webroot.xml"
subscreenName="popc" userGroupId="ALL_USERS" menuTitle="POP Commerce" menuIndex="9" menuInclude="N"
subscreenLocation="component://PopCommerce/screen/PopCommerceRoot.xml"/>
I think I might have asked a confusing question, but thanks for your time David. If I try to rephrase my question, it would be: "How to have a decorator screen which will not use any HTML from the webroot or apps screens?"
I think I found the answer. I just added my customroot screen as SubScreenItem under webroot screen, and mentioned the attribute standalone="true" in it. Now my URL: localhost:8080/customroot/foo does not use anything mentioned in webroot or apps screens.
Just that, now if I want to have all my components to be at root level in URL like: localhost:8080/foo
I think the only way to do that would be to shift the OOTB components to some other URL like: localhost:8080/ootb/apps/AppList
To do that I will have to add webroot as SubScreenItem of the customroot screen, and replace the webapp entry of webroot with that of customroot.
Damn, I tried so hard and it still is confusing.