The front-end, during development phase, is too slow with hot reloading.

[cd996]

Is your feature or enhancement related to a problem? Please describe.

As the project grows heavier, in practical front-end development, every change requires a full compilation. However, this is too slow with webpack's hot reloading performance.

Describe the solution you'd like

I found that in the current project, the technology stack used is Vue 2. Although Vue has stopped updating and maintaining version 2, I discovered that the Vue team still officially provides the following support. Therefore, would it be better to migrate this part?

    "@vitejs/plugin-vue2": "2.3.1",
    "@vitejs/plugin-vue2-jsx": "1.1.1",

Describe alternatives you've considered

No response

Additional context

No response

[linear[bot]]

PR-1213 The front-end, during development phase, is too slow with hot reloading.

[sojan-official]

@cd996 We are working on this at the moment
ref: #9623

cc: @fayazara @pranavrajs

[pranavrajs]

@cd996 This is an active internal project. Migration to Vue 3 and built tool like Vite is something which we have been doing for some time.

Did you mean that you were able to setup with plugin and run the project? Is this just an idea?

[WuChenDi]

I believe this is not a particularly challenging task.

In fact, I notice that the current project relies on vue": "^2.7.0, which theoretically allows the use of some setup + composition API syntax.

I fully understand that this is a very dynamic project striving for stability, so I think the workload of upgrading to Vue 3 is substantial.
However, I believe resolving the issue of slow hot updates is more crucial at this point. Migrating to Vite is an excellent choice. Do you have a better solution?

reference

• bin/vite

#!/usr/bin/env ruby
# The application 'vite' is installed as part of a gem, and
# this file is here to facilitate running it.

ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV']  ||= 'development'

require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
                                           Pathname.new(__FILE__).realpath)

bundle_binstub = File.expand_path("bundle", __dir__)

if File.file?(bundle_binstub)
  if File.read(bundle_binstub, 300) =~ /This file was generated by Bundler/
    load(bundle_binstub)
  else
    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
  end
end

require "rubygems"
require "bundler/setup"

load Gem.bin_path("vite_ruby", "vite")

• vite.config.mts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import FullReload from 'vite-plugin-full-reload'
import VuePlugin from '@vitejs/plugin-vue2'
import VuePluginJsx from '@vitejs/plugin-vue2-jsx'
import { brotliCompressSync } from 'node:zlib'
import gzipPlugin from 'rollup-plugin-gzip'

export default defineConfig({
  plugins: [
    RubyPlugin(),
    // TODO
    FullReload(['config/routes.rb', 'app/views/**/*']),
    VuePlugin(),
    VuePluginJsx({ compositionAPI: true }),
    // Create gzip copies of relevant assets
    gzipPlugin(),
    // Create brotli copies of relevant assets
    gzipPlugin({
      customCompression: (content) => brotliCompressSync(Buffer.from(content)),
      fileName: '.br',
    }),
  ],
})

[pranavrajs]

@cd996 Thanks for the suggestion. However, this is not enough to make it work. We have tried it multiple times and would end up in a loop of dependancies. See the previous PRs here.

There are certain dependencies which doesn't work with Vite. We are in the process of removing those. I guess the final one is here. Once this is complete and merged, we should be able to get this branch back to working state.

[pranavrajs]

Moved to a discussion as it is not an issue.

[stenioanibal]

Hey folks. Is there any update about it?

Also, is it possible to use any hot reload method on the current structure? I can't make it work, and it isn't mentioned in the contribution guide.

[scmmishra]

Hey folks. Is there any update about it?

Also, is it possible to use any hot reload method on the current structure? I can't make it work, and it isn't mentioned in the contribution guide.

Hey @stenioanibal Hot reloading should still work, however it is a bit slow and takes around 5 to 8 seconds on my M1 MacBook Pro. Are you getting any particular errors?

As mentioned by @pranavrajs we are migrating to a Vite based build, which should improve the performance of the dev server substantially. At the moment it's not possible to comment on when this will be done since there are many unknown issues waiting to be discovered and solved

[stenioanibal]

Hey dude.

Thanks for your reply. I've noticed that is just a bit slow, in fact.

I'll still following the updates about the Vite based version.

Best regards.