Vue-cli: Speed up scaffolding process

[sodatea]

What problem does this feature solve?

Current installed size of default preset:

• with yarn: 154M
• with npm: 165M

and 20k files in node_modules.

The installation process takes at least tens of seconds to finish, let alone fresh installs without cache.

What does the proposed API look like?

There're several ways to speed up dependency installation:

PNPM Support

Blocked by https://github.com/vuejs/vue-cli/issues/2703

Yarn Plug'n'Play Support

Tracked at https://github.com/vuejs/vue-cli/issues/2850
Blocked by https://github.com/yarnpkg/yarn/issues/6487

Reducing the number and size of indirect dependencies

Current installed size of core packages:

• https://packagephobia.now.sh/result?p=@vue/cli-service
• https://packagephobia.now.sh/result?p=@vue/cli-plugin-babel
• https://packagephobia.now.sh/result?p=@vue/cli-plugin-eslint

Could be done by bundling dependencies into the published package itself.

Possible bundling tool:

• https://github.com/zeit/ncc/
• https://github.com/moonreach/nodepack/

Problems encountered:

• Too many non-statically analyzable assets, hard to fix all the caveats

[sodatea]

Current @vue/cli-service deps:
97M, 11748 files

After extracting these deps (https://github.com/sodatea/vue-cli/blob/33c7c9f212f668e389b4abf231d706e9ea00b69a/packages/%40vue/cli-service-dependencies/package.json):

    "acorn": "^6.0.4",
    "acorn-walk": "^6.1.1",
    "address": "^1.0.3",
    "cliui": "^4.1.0",
    "debug": "^4.1.0",
    "fs-extra": "^7.0.1",
    "globby": "^8.0.1",
    "hash-sum": "^1.0.2",
    "launch-editor-middleware": "^2.2.1",
    "lodash.defaultsdeep": "^4.6.0",
    "lodash.mapvalues": "^4.6.0",
    "lodash.transform": "^4.6.0",
    "minimist": "^1.2.0",
    "ora": "^3.0.0",
    "portfinder": "^1.0.19",
    "read-pkg": "^4.0.1",
    "semver": "^5.6.0",
    "ssri": "^6.0.1",
    "string.prototype.padend": "^3.0.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "webpack-merge": "^4.1.4",
    "copy-webpack-plugin": "^4.6.0",
    "terser-webpack-plugin": "^1.1.0"

92 + 3M, 11076 + 1 files

Still a long way to go……

[yyx990803]

majority of it is probably webpack...

[yyx990803]

Actually, measuring size and file count probably isn't the most reflective of the gains - saving network requests is also important.

[sodatea]

• webpack + webpack-dev-server + html-webpack-plugin take up ~51M (these ones can't be easily bundled because many packages rely on their internal structure)
• cssnano alone takes 15M
• All postcss-related stuff (including cssnano) takes ~30M

I think we'll get the best ROI by tackling all the postcss stuff.

[sodatea]

As for the network request, it's 982 -> 888 after the above-mentioned commit.

As a sidenote:

• running npm i webpack installs 389 packages;
• running npm i webpack webpack-dev-server 567 packages;
• running npm i webpack webpack-dev-server html-webpack-plugin installs 648 packages.

Well… at least it's worth a try to bundle webpack-dev-server & html-webpack-plugin.

[sodatea]

After extracting webpack-dev-server, it's now 829 + 1 packages, node_modules size increased to 97M

[sodatea]

Extracting webpack-bundle-analyzer reduced the package number to 776.

[Kocal]

Nice initiative :+1:

[darrenjennings]

On a cold install of vue-cli, I get a timeout on material-design-icons, related ticket: https://github.com/yarnpkg/yarn/issues/5540

https://github.com/vuejs/vue-cli/blob/09be0f2e1fa37a39ca5c83c8a2f1320d40f0bab6/yarn.lock#L2156-L2162

[sodatea]

nyc uses bundledDependencies.
https://github.com/istanbuljs/nyc/issues/459
https://docs.npmjs.com/files/package.json#bundleddependencies
Worth a try.

[sodatea]

As of v3.6:
✅remove material-design-icons from @vue/ui deps
✅pnpm support

[rayfoss]

pnpm support should not be written off... there are about 5 packages that wreack havoc on glitch with vue-cli. The workaround is to disable pnpm. Glitch runs vanilla pnpm by default. Which means broken packages with undefined dependencies are not acceptable. Not to mention using shamefully-flatten destroys performance.

[sodatea]

@rayfoss feel free to submit a bug report.
As for shamefully-flatten, it is a temporary workaround. We are still trying to find out a way to remove this flag.