Migrating old PHP to Laravel, app.js is double original size

I've got a plain old PHP app with a bunch of script tags (no build tools) we are converting to Laravel

Here is the network monitor of the old app loading:

old js load

141.8 KB

After running npm run build my app.js is 307KB and I'm confused where the size is coming from

app.js

require('./bootstrap');
require('./inspinia');  // theme javascript copied from old project

bootstrap.js

// window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    window.moment = require('moment');

    require('bootstrap');
    require('jquery-slimscroll');
    require('dom4');
    require('tempusdominus-bootstrap-4');
    require('chart.js');

} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

// window.axios = require('axios');
//
// window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "chart.js": "^2.9.3",
        "cross-env": "^5.1",
        "dom4": "^2.1.5",
        "jquery": "^3.2",
        "jquery-slimscroll": "^1.3.8",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "metismenu": "^2.7.9",
        "moment": "^2.24.0",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "tempusdominus-bootstrap-4": "^5.1.2",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
    }
}

Anywhere else I should be looking to trim this back down?

ismaile

6 years ago

Best Answer

Level 30

Hi,

There are 2 things that comes to mind:

npm run prod should be the command that gets you the smallest js file.
Last time I checked, moment.js imported all locales. Here is what you might add to your webpack.mix.js right after const mix = require('laravel-mix');:

const webpack = require('webpack');

mix.webpackConfig({
    plugins: [
      new webpack.ContextReplacementPlugin(/moment[\/\]locale$/, /en/)
    ]
});

This would make sure that only english en is loaded. If you need more languages, you can replace the new statement with:

new webpack.ContextReplacementPlugin(/moment[\/\]locale$/, /en|fr/)

Here, I added french : fr

1 like

chrisan

6 years ago

Level 2

Thx! I am running npm run prod however based on what you said it looks like packages have changed (increased) since this theme was created. The old site is using some older versions (no locales in moment for example) so I guess I'll run through each of these 1 by 1 to see how much they have increased

But still, even commenting out everything but jquery I am left with an 87.2KB app.js while jquery 3.4 https://code.jquery.com/jquery-3.4.1.min.js is 30.4KB

Is there something else going on perhaps?

edit: nevermind, I just noticed php artisan serve does not use gzip! that is probably where the remaining size is coming from

1 like

Please or to participate in this conversation.