Search code examples
ruby-on-railssprocketswebpacker

cause of excessively large application.js file in public/packs for rails app? / rack timeout error

My app has been throwing frequent rack timeout errors, and i think i narrowed the problem down to the size of the compiled javascript file. public/packs/application-5db30a18f8715133f889.js is 2.1mb. this is not doable!

something to note is i have two asset folders: one for sprockets where all my css and most js is, and one for webpacker, which i added solely to use an image upload node package called Upp. i intend to move to webpacker completely, but not yet. this is my app/assets/application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require cable
//= require_tree ./channels
//= require semantic-ui/dist/semantic
//= require micromodal/dist/micromodal
//= require local-time
//= require micromodal
//= require init

and this is app/webpacker/packs/application.js:

console.log('Hello World from Webpacker')
import fileUpload from 'fileUpload'
    document.addEventListener('turbolinks:load', () => {
      document.querySelectorAll('.upload-file').forEach(fileInput => {
        fileUpload(fileInput)
      })
    })

am i doing something wrong in app/assets/application.js that would cause such a huge file size?

This is what webpacker shows in console btw:

Version: webpack 4.46.0
Time: 5357ms
Built at: 03/01/2021 12:16:43 AM
                                             Asset       Size  Chunks                                Chunk Names
            js/application-62fd5a37239b6e18973d.js    737 KiB       0  [emitted] [immutable]  [big]  application
js/application-62fd5a37239b6e18973d.js.LICENSE.txt   1.08 KiB          [emitted]                     
         js/application-62fd5a37239b6e18973d.js.br    135 KiB          [emitted]                     
         js/application-62fd5a37239b6e18973d.js.gz    182 KiB          [emitted]                     
        js/application-62fd5a37239b6e18973d.js.map   2.16 MiB       0  [emitted] [dev]               application
     js/application-62fd5a37239b6e18973d.js.map.br    424 KiB          [emitted]              [big]  
     js/application-62fd5a37239b6e18973d.js.map.gz    558 KiB          [emitted]              [big]  
                                     manifest.json  364 bytes          [emitted]                     
                                  manifest.json.br  129 bytes          [emitted]                     
                                  manifest.json.gz  142 bytes          [emitted]                     
Entrypoint application [big] = js/application-62fd5a37239b6e18973d.js js/application-62fd5a37239b6e18973d.js.map

worth mentioning that i don't have a webpacker.config.js. should i?

Bundle Analyzer screenshot: enter image description here

Solution

  • If you say the problem is from the packs/application, I would add https://www.npmjs.com/package/webpack-bundle-analyzer to see what webpacker is adding in that file.

    Here is how my webpack/development.js looks like:

    process.env.NODE_ENV = process.env.NODE_ENV || 'development';
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const environment = require('./environment');

environment.plugins.append('BundleAnalyzerPlugin', new BundleAnalyzerPlugin());

...

    Everything else is pretty straightforward. Look at the new tab that's pops up when you start webpacker and hover over its contents.

    Update

    uppy seems to loaded twice. Keeping one version should decrease the bundle size. If that's not enough then you could look into Lazy Loading, Code Splitting and https://loadable-components.com/docs/library-splitting/. Ideally you should load the file-upload logic only on the pages that is required. Seeing it in packs/application tells me that you are loading in on every page.