When I left click and select view page source on my webpage it shows many many scripts included.
Is there any way where you can minify all those scripts so that all the files won't be shown seperately.
Is there any meteor command which does so?
If you have deployed manually using build and have this issue try using --production flag when building your app
Related
Having some problems here with a web application that was checked into a code repository.
Basically, this application in particular will not display any images, .js, or .css which are all located in the Content & Script folders. Only the raw HTML shows while running. This occurs specifically after doing a fresh pull from our code repository and running locally through Visual Studio. When you inspect the files in the console when its running, all the files are completely empty. The console is also giving a ERROR 500 error file not found (IIRC) The files are definitely in the project locally and they are showing in the Solution Explorer.
I am the only one who actively works on development for this application and I don't run into these problems with my machine. When you pull from the code repository on another computer, the problems start. However, no other applications with an extremely similar architecture have this problem after pulling fresh for the repository. I tried creating brand new web applications with exact same settings and files on the computers affected and they loaded perfectly.
The link to the file looks normal too, it matches with the production server which works.
The application is using bundles and most of the bundles look like this:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.min.js",
"~/Scripts/bootstrap-datepicker.min.js",
"~/Scripts/bootstrap-timepicker.js",
"~/Scripts/bootstrap-confirmation.js",
"~/Scripts/respond.js",
"~/Scripts/bootstrap-select.min.js"));`
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/bootstrap-datepicker.min.css",
"~/Content/bootstrap-timepicker.css",
"~/Content/bootstrap-sortable.css",
"~/Content/site.css",
"~/Content/bootstrap-select.min.css"));
Things I have tried:
Adding the .js and .css files in _Layout.cshtml page manually instead
of with bundle.
Replacing all the normal files with .min.js or .min.css and vice
versa
Changing authentication methods for access
Changing permissions on Content Folder
Recreating virtual directory
Using Visual Studio 2017 and 2019
I am stumped, anyone have any suggestions or recommendations? I can answer any questions that arise.
You'll need to commit/push .csproj file as well, this file has link to all your files in the project.
I'm using XAMPP locally to host an exisiting CMS and I want to include my react app within the CMS by using an include (this works fine for including static HTML and other PHP pages). The CMS admin page it'll be included on will look like this: http://localhost/website/administrator/
I need to place my create-react-app in a folder like this though so that the built in CMS script will include it: website\subfolder1\subfolder2\subfolder3\subfolder4\default
Currently I'm getting a blank page where I've tried to include my app. If I remove the embedded I can see the markup is being output, as in an empty div with the root class name.
I've tried setting a "homepage" property in my package.json and various combinations such as '.', and also edited the manifest site_start without luck, i can't seem to get it to render. Can anyone point me in the right direction?
Here are some steps that you could try to get the bundles building correctly, as you will need to override the default behaviour of create-react-app by ejecting.
Make a backup copy of your create-react-app
Eject, so that you will now be able to configure webpack
n
npm run eject
Go to webpack config, see the scripts section
You can change the build scripts as such as start and build
The issue seems to be where the js and css files are built to. You can change where they are output in webpack by editing the config.
See link: https://webpack.js.org/configuration
You could try changing the path for the output section to where your cms html is trying to find the bundle.
I have deployed a Laravel 5.3 application to Heroku. However, when loading /login, I noticed a very slow page load time. The problem seems to be a very large app.js file: /js/app.js. Here is a screenshot of the Network resource panel in DevTools: screenshot- Network panel. The 3rd resource from the top is the offending file.
I am not sure why this file has gotten so large. here is a link to the repository: https://github.com/AshMenhennett/Salon-Pricing.
I wasn't able to post anymore links, so do let me know if you would like direct links to specific files.
What should I be doing to mitigate this issue?
The most obvious thing you can do is to run npm run prod. This will compile the assets for production use. But in most cases, you must be looking at other solutions beyond running npm run prod. If your production file is too large, you must check your dependencies. Remove unnecessary dependencies and ensure that you don't use a lot of external libraries. For example, if you are using bootstrap, you should rely on Bootstrap's alerts in order to show alerts rather than using a Vue package to show alerts. I admit that sometimes you will need to use an external library to make your website interactive but to achieve that, you will have to sacrifice the performance. So your best bet in order to reduce the app.js file is to use the minimal external dependencies in your package.json.
The second thing you can do is use minimum HTML in your components' templates. A lot of components with heavy HTML/CSS will contribute to a larger app.js file. This is yet another approach that will result in a smaller app.js file.
Lastly, you should consider using Vue's component slots to pass HTML contents to your components. This will leave the HTML in your static files and only javascript data (API calls, props, etc.) will be compiled in the app.js file. This is an effective approach to build a smaller app.js file.
Edit: You can remove JQuery and Bootstrap scripts from the bootstrap.js file and can include these dependencies separately. It is always a good idea to have a few more scripts rather than having a very large script. i.e. browsers do parallel downloading and thus using JQuery and Bootstrap dependencies separately is a good idea.
From the looks of your link you've not created a production version of your assets, and currently all the source maps are in your app.js file, which will be adding a lot of the file size, the css and js output are also not compress/minified either.
Assuming you're using laravel elixir, you just need to run gulp --production and this will remove the source maps, compress the js and css outputs, etc.
For people that are using Laravel Mix you just need to run npm run prod to compress and remove source maps from app.js itself.
You need to load the components asynchronously
Webpack has an awesome feature to create chunks of code. The key to this is to use async components. These components get loaded completely asynchronously whenever the component is present on the page you just loaded.
Let's do it.
In resources/js/app.js
I changed
Vue.component('jobs', require('./pages/employer/jobs/Index.vue').default);
To
Vue.component('jobs', () => import('./pages/employer/jobs/Index.vue'));
and in webpack.mix.js
mix.webpackConfig({
output:{
chunkFilename:'js/vuejs_code_split/[name].js',
}
});
Now by running npm run watch or prod each component file is saved public/js/vuejs_code_split/[name].js
And the main app.js is automatically calling those components when required.
In my MVC5 web application I use two bundles for a page, one contains the common JavaScript files for all the pages and the other bundle is specific for the page. This works fine in development environment but the page specific bundle does not load in the staging. The Rendered script tags are as below.
<script src="/bundles/jsAll?v=72eJMPeVrT1mvbZw1VAU7y6r7vodOImt5NOMq4Gcp581"></script>
<script src="/bundles/my-page?v="></script>
Could not figure out why this happens...
The problem was locally this works because all the files are available, but did not work after deployment because the script file was not included to the project, hence the file does not get deployed to the destination. Since the file is missing the bundle has nothing to serve, so there won't be a version nor content.
This is my first time develop an app using meteor, I find out there are many js files included in , like files from the default/installed packages and the clients files.
However when I view the in the live sites that created by meteor, there are very little or no js files in there at all. How can do this?
I can't find the information about this topic. Is it because the meteor will hide these js files once the app is deployed?
Yes, when your application will be deployed you'll not see them anymore. Like said by zero298, they will be minified and bundled.