laravel app.js very large file size

Question

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?

Answer 1

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. ie browsers do parallel downloading and thus using JQuery and Bootstrap dependencies separately is a good idea.

Answer 2

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.

Answer 3

对于使用 Laravel Mix 的人，您只需要运行npm run prod即可从app.js本身压缩和删除源映射。

Answer 4

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.