how to optimize frontend environnement with vuejs ?

posted 5 years ago

Hi,

The command "npm run watch" is pretty good but absolutely not suitable for the development of a single page application (SPA) vuejs, for these reasons:

Full reloading of the application at every file modification: js, vue or php.
Hot loading of the scss but the compilation takes 4-6 sec width "watch" command and 2-4 sec with "hot" command (on a powerful pc and with the separate vendors of the app.scss)

In addition to unnecessary reloads, we do not take advantage of the hot reload proposed by VueCli (vue-cli-service serve).

Suffice to say that the development in these conditions is a real calvert.

I had try a lot of "vue.config.js" file like that but without any result :

module.exports = {
  // proxy API requests to Valet during development`
  devServer: {
    proxy: 'http://localhost' // or 'http://localhost/3000' if combined with "npm run watch" but it's useless with a SPA.
  },
  // output built static files to Laravel's public dir.
  // note the "build" script in package.json needs to be modified as well.
  outputDir: '../public',

  // modify the location of the generated HTML file.
  // make sure to do this only in production.
  indexPath: process.env.NODE_ENV === 'production'
    ? '../resources/views/app.blade.php'
    : 'index.html'
}

Unfortunately this solution does not work despite many variants of tempted.

Can a good soul help me?

A big thank-you,

Have a good day,

Last updated 3 years ago.

tuandm

replied 5 years ago

I don't get this slow on npm run watch. My Laravue project takes ~0.5s on recompiling:

 WAIT  Compiling...                                                                                                                                                                                                                 7:14:05 AM

98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 464ms                                                                                                                                                                                               7:14:05 AM

       Asset      Size   Chunks             Chunk Names
/css/app.css   240 KiB  /js/app  [emitted]  /js/app
  /js/app.js  15.6 MiB  /js/app  [emitted]  /js/app
 + 11 hidden assets

Does it happen to you on fresh Laravel?

barraxas

replied 5 years ago

Hello, thanks for your answer. I had more precision on the problem :

app.js compile : 0.3s
app.scss compile: 5s After extract of this code from my app.scss, the compilation take 0.4 sec :) :

/* Nunito:200 */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200;
  src: url(/fonts/Nunito-ExtraLight.ttf) format('truetype');
}

/* Nunito:600 */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url(/fonts/Nunito-SemiBold.ttf) format('truetype');
}

NB : someone can explain me how work the "code tag" ? impossible to use it...

Last updated 5 years ago.

tuandm

replied 5 years ago

@bArraxas: You can wrap your code to triple ` (Like markdown syntax on Slack)

Moderators