[Feature request] Detach package dependencies for app.xxx.js

[Trezedo]

Feature request

Description

I found that a vuepress2 project with a relatively large structure, for example, contains a number of custom components. After executing build, all related codes will be bundled in dist/assets/app.xxx.js, resulting in the large size of a single js file and prolonged white screen of the site.

Whether vite or webpack, the code of all custom components is in the same javascript file.

For vite, it even packages vue-router and nprogress into app.xxx.js.

Is the packaging behavior able to be controlled by vuepress2? Is it possible to split them into different small files ?

功能需求

描述

我发现，一个结构较为庞大的 vuepress2 项目，例如含有较多数量的自定义组件，经过 build 之后，会把所有相关的代码都放在 dist/assets/app.xxx.js，导致单个 js 文件太大，从而导致打开站点的白屏时间较长。

不论是 vite 还是 webpack，所有自定义组件的代码都在同一个js文件中。

对于 vite，甚至还会把 vue-router、NProgress 也放在 app.xxx.js。

这部分打包的行为能否由 vuepress2 控制？能否能够将他们拆分为不同的小文件？

[github-actions[bot]]

This issue is marked as stale because it has not had recent activity. Issues marked with stale will be closed if they have no activity within 3 days.

[Mister-Hope]

1. Components

You should try importing your components directly in markdown files if you want them to async loaded with that page.

Registerting them globally is expected to result them being bundled in entry files.

2. Entry packages

Any packages invoke or imported in appSetup stage is expected to appear in entry file, because they should be loaded when initilizing and seting up the VuePress App. so bundling vue-router NProgress and so on should be the expected behavior.

If you found packages with really big size imported, you may need to contact plugin developer to see if they can load it async (probably using dynamic import), to split those big packages as chunks, and load them async.

So currently there are not much VuePress team can do. (Alos NProgress is not big in size, so I don't think there are actually benifit spiliting it in to a sperate chunk resulting an extra web request)

[Mister-Hope]

Maybe we should add some reminder in documentaion here.

[Mister-Hope]

And if you are taling about spilting "common official packages" such as vue, vue-router, @vuepress/client, @vuepress/shared packages in to a sperate chunk, so that they won't be upgraded when reploying docs so that users don't need to refetch them, that should be another thing, you can open a PR or issue for that, and I agree with that.

@meteorlxy Does this sound ok to you? (Also, does vite support that? I am not pretty much sure)

[Trezedo]

1. Components

You should try importing your components directly in markdown files if you want them to async loaded with that page.

Registerting them globally is expected to result them being bundled in entry files.

2. Entry packages

Any packages invoke or imported in appSetup stage is expected to appear in entry file, because they should be loaded when initilizing and seting up the VuePress App. so bundling vue-router NProgress and so on should be the expected behavior.

If you found packages with really big size imported, you may need to contact plugin developer to see if they can load it async (probably using dynamic import), to split those big packages as chunks, and load them async.

So currently there are not much VuePress team can do. (Alos NProgress is not big in size, so I don't think there are actually benifit spiliting it in to a sperate chunk resulting an extra web request)

Thanks a lot, I had a look at documentation again, found that plugin @vuepress/register-components is a good choice rather than registering components manually in clientAppEnhance.ts . The custom components are indeed detached from app.xxx.js into different js files now.