Supporting dynamic load multi projects

[zhazhaxia]

What problem does this feature solve?

We config mutil projects in vue/cli3，it'lll load all projects we configs. It waste time and most of the projects is useless.
For example,we have projceA,projectB,projectC,we only need to develop projectB,but vue/cli3 load all .
So,what the feature we need?That is,we use webpack-dev-serve listen to the url the browser accept.And then,resolve the projcet from url,then build the project we accept.
This feature improve development efficiency deeply.

What does the proposed API look like?

At this file,https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/serve.js.

• We use webpack-dev-serve to get the project from url.

          server.app.get('/*.html', function (req, res, next) {})

• match the project

         const matched = req.originalUrl.match(/\/(.*)\.html/);

• dynamic load the entry use MultiEntryPlugin

const handleMultiEntry = (app, paths, compiler) => {
  paths = hotEntry.concat(paths);
  const multiEntry = new MultiEntryPlugin(process.cwd(), paths, app);
  multiEntry.apply(compiler);
  findHtmlPlugin(app).apply(compiler);
};

findHtmlPlugin means to load HTMLWebpackPlugin to this project

• recomplie the project

server.middleware.invalidate();

• return the build result to browser

server.middleware.waitUntilValid(() => {
    compiler.outputFileSystem.readFile(
      path.join(compiler.outputPath, req.originalUrl),
      function (err, result) {
        if (err) {
          return next(err);
        }
     
        res.set('content-type', 'text/html');
        res.send(result);
        res.end();
      }
    );
  });

That's all the step i describe about the feature.

I had implemented the feature in my local environment. works well.
I hope vue/cli team can accept this feature.Thanks for reading.
(pardon my poor description)

[haoqunjiang]

Yeah, I was thinking about this feature too.
But there's a more universal solution for this problem: https://github.com/liximomo/lazy-compile-webpack-plugin which supports both multi-page apps and lazy imports in a single-page app.
Maybe just integrating that webpack plugin is enough?

[zhazhaxia]

Yeah, I was thinking about this feature too.
But there's a more universal solution for this problem: https://github.com/liximomo/lazy-compile-webpack-plugin which supports both multi-page apps and lazy imports in a single-page app.
Maybe just integrating that webpack plugin is enough?

I had read your project. But i didn't get your points how to get project dynamic from browser.For example,
as we accept http://localhost/projectA.html,http://localhost/projectB.html,our dev-server can load the projectA or projectB dynamic.
So the expected project structure may like

- src/pages
    - projectA/
    - projectB/
    - projectC/
    - projectD/

How do your define your entry dynamic?

[zhazhaxia]

Yeah, I was thinking about this feature too.
But there's a more universal solution for this problem: https://github.com/liximomo/lazy-compile-webpack-plugin which supports both multi-page apps and lazy imports in a single-page app.
Maybe just integrating that webpack plugin is enough?

So if cli-service support dynamic entry load，that most developer don't need to install another plugin in your vue config.

[haoqunjiang]

Yeah makes sense.

I'd like to add it after a flag (e.g. --lazy), and prompt the user if the compilation takes too long and there are more then a certain number of entries (e.g. > 5) that they can enable this flag to speed up the dev server.

[zhazhaxia]

Yeah makes sense.

I'd like to add it after a flag (e.g. --lazy), and prompt the user if the compilation takes too long and there are more then a certain number of entries (e.g. > 5) that they can enable this flag to speed up the dev server.

Got it.Thanks.I'll try to use this solution.
And I wonder know how much time you spend on your test tasks?
For example,starting the project and loading new entry,how much time it spend?

[haoqunjiang]

I'm not sure if I understand correctly.
But I think we don't need to "test" the task. Just serve the whole project and prompt.
Because the user might not want to opt-in this feature (e.g. when they want to show the demo pages to clients).

[zhazhaxia]

I'm not sure if I understand correctly.
But I think we don't need to "test" the task. Just serve the whole project and prompt.
Because the user might not want to opt-in this feature (e.g. when they want to show the demo pages to clients).

Hi,I had run your plugin in my project. It works.
But,I found a bug when the plugin runs on Winsows system.

#L3
It should be apiPath.replace(/\\/ig,'\\\\').Otherwise,the program will transform E:\code\app.js into E:codeapp.js in line 11 because of the template code.
Just make a judgement it'll runs ok!

And the PR here

[zhazhaxia]

That's a good way to resolve this problem.
As the official doc says Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations.
I think if @vue/cli supporting dymanic entry load officially that the user don't need to config to much loaders or plugins on theirs programming.

[Brass-neck]

Hope this feature will born soon !!!