I have a vue.js router implemented and if I run npm run build it correctly creates separate files for every component. But if I run npm run serve and then open the page all components files are loaded immediately not lazy. If I click on the link to component it loads the components file again. I don't understand why it is not lazy. Look at the screenshot. There are contact.js (which should be chunk) loaded two times. First on refresh second on link click.
it's called prefetching. vue-cli 3 does this by default as explained here.
Regarding the chunk being loaded twice, I suggest that you build in production mode and then check the actual response of both the duplicate requests. I think the second time, the chunk only gets loaded from browser cache and does not make a network request
Related
I ran into a caching issue for snap-ui.esm.js file. When we create a build in stencil.js we have to include 2 files on a page, snap-ui.js and snap-ui.esm.js.
The problem is that snap-ui.esm.js file contains links to other files that are loaded dynamically and their names are defined when creating the build. And if we created a new build, snap-ui.esm.js will contain another links already which is correct but browser may cache snap-ui.esm.js with links that don't exist already.
I assume this is not a stencil issue but i faced it during working with stencil.
Please advice how to prevent caching just one js file, in my case it is snap-ui.esm.js
I have a question about webpack or compiled vue files and its cache management.
Somehow the browser knows when to fetch the app.js files when there is a new compiled version. When none then uses the Cache (or theres a 200B only download to it).
I would like to know the mechanism behind the automatic detecting of the js file.
Is it a feature of webpack? or vue?
Thanks IA
Hot reloading is a feature of vue-cli, implemented using Webpack.
From the docs,
When scaffolding the project with vue-cli, Hot Reload is enabled out-of-the-box.
When you're developing with Vue locally, Webpack is typically in Watch Mode, which means it detects changes to your files and recompiles automatically.
How the DOM refreshes depends which part of the Vue component you have changed.
If you change the Template portion of a component, it will re-render without reloading because the component's internal state has not changed.
If you change the Script portion of a component, the component will reload.
More info about Vue's hot reload
As for the app.js file, you'll see it's actually the initiator of the requests for the DOM diff, which run every time you save changes to your Vue files.
When you save a file, [hash].hot-update.json is requested. If [hash].hot-update.json has a non-empty payload, DOM-affecting changes have been detected. The DOM diff is then requested and applied as a patch via app.[hash].hot-update.js.
The Nuxt documentation (latest) states that for SPA you need to set ssr: false in nuxt.config.js. Also, every vue file in the pages folder is added to the router configuration, so you don't have to do this yourself. This is both correct and works perfectly, but there is something I really don't understand.
When I run npm run build (nuxt-ts build), it builds the production output of the project and puts in the dist folder (default). I was surprised to see that even though I configured it to be a SPA, it still generates HTML files for each vue file in the pages folder.
It happens with newly generated projects using npx nuxt-create-app as well.
What I'd expect is that it only generates one HTML file (which is index) when ssr is set to false and when I want a static app, I would use npm run generate or set target to 'static' to create HTML files per route.
Nuxt documentation also states this for the target property:
https://nuxtjs.org/docs/2.x/get-started/commands#target-server-default-value (builds output to dist)
https://nuxtjs.org/docs/2.x/get-started/commands#target-static (generates HTML per route)
All I have in my config is ssr set to false, so it should not generate static files (HTML) per page.
What am I missing here, or am I misunderstanding how this works?
Thanks in advance!
Remember that in a static setup, your visitors may arrive at your site via any of your page routes— not just index.html.
For example, they may access https://www.your-app.com/contact-us. If you do not have a contact-us.html file available, and you don’t have a server configured to handle this request (as is the case with universal mode), you’re gonna end up with a 404.
What happens in static mode is contact-us.html is served, which contains the minimum javascript necessary to hydrate your nuxt app, then SPA mode kicks in— giving you client-side navigation.
I am trying to separate my browserify vendor libs from my own code. I ran the following (simplified):
browserify -r angular -o app/dist/vendor.js
browserify -x angular app/js/main.js -o app/dist/app.js
When I load my app, I get Error: Cannot find module 'angular'.
If I run it all bundled as browserify app/js/main.js -o app/dist/app.js everything works fine. My main.js is rather simple, just looks like:
var angular = require('angular'), app = require('./app');
angular.bootstrap(document,[app.name]);
It is the first line, require('angular') that it stumbles upon.
Yes, I did set up a simple shim for angular along with a browser entry in package.json mapping it to my angular shim path, so that it works correctly (or it would not have worked in the all-in-one case).
I also tried manually editing the vendor.js and app.js with some logs to see when how they run. It looks like the wrapper function (yes, IIFE) for the app.js runs first, followed by the wrapper for vendor.js. And, I verified multiple times that the script tag for vendor.js is first, followed by the tag for app.js.
Could i have something to do with the fact that vendor.js is so much bigger (1.5 orders of magnitude) than app.js, and so app.js finishes loading first? I doubt it, or every ordered script tag for jquery or angular would break, but I don't know.
Never mind, I figured it out. Turns out the 2 tags were auto-generated. This causes them to be async and the browser is free to do what it wants with them in terms of completion order.
I am using customized Dojo library. When I load my client application, Dojo load the below two files after loading the "dojox/gfx/svg.js" file.
1. dojox/gfx/shape.js
2. dojox/gfx/path.js
Even though I have included these two files in to my Dojo Custom build, still these two files are always loading in to my client application.
I know the file "dojox/gfx/svg.js" will be load at run time based on the browser type, but why shape.js and path.js files are loading always at run time ?