[DOCS] document the importance of position in the plugins array

[Soviut]

I just ran into a race condition of sorts regarding the order of plugins in my vite config.

For my entire project I've had my plugins ordered with react first and PreprocessorDirectives after it. Like the following.

    plugins: [
      react(),
      PreprocessorDirectives({
        include: ['src/**/*.{ts,tsx,html,css}'],
      }),
      // ...
    ]

This caused an issue when I changed some of my routes to be lazy loaded.

// #if VITE_DEBUG
const TestPage = lazy(() => import('@/pages/Test'))
const FocusPage = lazy(() => import('@/pages/Focus'))
// #endif

What seems to have happened is because React processed the files first, the placeholder for the lazy loading was created but then removed by the directive. This resulted in a missing reference which caused a ReferenceError.

Uncaught ReferenceError: FocusPage is not defined

This problem only occurred with the lazy() loading, but I think it would be a good idea to suggest putting the PreprocessorDirectives plugin as early as possible in the plugins array.

[Soviut]

Also, I would be happy to make a PR if you want.

[KeJunMao]

pls! thanks