How to write a great application on Vue.js and not die?

Anna asked 9 months ago

Hello!

I have quite a lot of experience developing simple spas on Vue.js. Without server rendering, but with “buns” in the form of Vuex, vue-cli, webpack.

But now I have to write a really great application (dashboard a la crm) with custom controls (UI). There is no server rendering requirement.

The difficulty is that now there are already more than 30 components of different sizes, and the build in dev mode does not take 2 seconds, but 30-45, and it starts to strain. Standard UI components for the project, such as BaseBtn, BaseInput, etc. rendered it into a separate npm library in order not to turn the project structure into a dump.

I ask the Community to help with tips on developing large applications on Vue.js.

Thank!

PS
Using BEM came across an unexpected problem – there are not enough names for the blocks …

Solution found, see my answer.

5 Answers
Best Answer
Noah answered 9 months ago

Maybe something is wrong in the webpack configs?

I now have about 600+ vue components in the project.
Rebuilding to dev with hot reload takes 2-5 seconds.
(win, ram 16gb, ssd, some old i3)

Marsel Sultanbuhe replied 8 months ago

I now have about 600+ vue components in the project.Smacks or madness or bullshit.

Alex answered 9 months ago

Somehow weird you have a webpack configured. We have a very large build on the project (~ 100 ui of components + ~ 300 view files), it’s going to be cold for about 10 seconds, for a hot one for 1-2 seconds. At the same time very large store and system of routes.

Config: windows 10, 16bg, i7 7th generation

PS
If you do not have enough BEM, which is very strange, use scope style and all

Alex answered 9 months ago

Fully agree with the Noah!
I myself have a production project where there is much more than “30 components of different volume”, everything is built quite quickly, in spite of the fact that I have a Macbook Air. Try webpack-bundle-analyzer may have any anomalies in bundles. Or compare your webpack config and the one that defaults in vue-cli.

A sign with the case when people are not delving into the webpack, messed up with setting the Entry Points, which is why the bundle, under the ENV production inside the docker, beat up to 10 minutes. But nothing, not died from this

Alex answered 9 months ago

Most likely node modules are rebuilt every time.

Anna answered 9 months ago

Thanks to everyone who answered!

Found a solution.
The problem was in the configuration of vue.config.js (using vue-cli 3).

For global variables and mixins, SASS (SCSS) used the style-resources-loader plugin.

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve (__ dirname, 'src / scss / _variables.scss'),
        path.resolve (__ dirname, 'src / scss / _mixins.scss'),
      ],
    }
  },

It was because of him that the build took a lot of time. Changing a single letter in the HTML code of a component led to a reassembly of all components using SCSS.

Solution to the problem:
1. npm remove style-resources-loader
2. removal of the code from the config (see above)
3. adding code to config:

css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@ / scss / _variables.scss";
          @import "@ / scss / _mixins.scss";
        `,
      }
    }
  },

Result:
DONE Compiled successfully in 1704ms 15:06:07
App running at:
– Local: localhost: 8080