Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: document npm.excludeWebComponents property #3922

Open
wants to merge 4 commits into
base: latest
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions articles/flow/configuration/development-mode/index.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,49 @@
-Dvaadin.skip.dev.bundle=true
----

[role="since:com.vaadin:[email protected]"]
[#exclude-vaadin-components]
== Optimize bundle and package.json by excluding all Vaadin components

Check warning on line 142 in articles/flow/configuration/development-mode/index.adoc

View workflow job for this annotation

GitHub Actions / lint

[vale] reported by reviewdog 🐶 [Vaadin.HeadingCase] 'Optimize bundle and package.json by excluding all Vaadin components' should be in title case. Raw Output: {"message": "[Vaadin.HeadingCase] 'Optimize bundle and package.json by excluding all Vaadin components' should be in title case.", "location": {"path": "articles/flow/configuration/development-mode/index.adoc", "range": {"start": {"line": 142, "column": 4}}}, "severity": "WARNING"}

If Vaadin’s pro and core components are not used, they can be excluded from `package.json` with the `vaadin.npm.excludeWebComponents` property and from the project’s dependencies.
mshabarov marked this conversation as resolved.
Show resolved Hide resolved

Here is an example of excluding both pro and core components by adding exclusions to the `vaadin-core` dependency in the Maven project's `pom.xml`. Use the `vaadin-core` artifactId, not `vaadin`:

Check failure on line 146 in articles/flow/configuration/development-mode/index.adoc

View workflow job for this annotation

GitHub Actions / lint

[vale] reported by reviewdog 🐶 [Vale.Spelling] Did you really mean 'artifactId'? Raw Output: {"message": "[Vale.Spelling] Did you really mean 'artifactId'?", "location": {"path": "articles/flow/configuration/development-mode/index.adoc", "range": {"start": {"line": 146, "column": 171}}}, "severity": "ERROR"}

.pom.xml
[source,xml]
----
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-core</artifactId>
<exclusions>
<exclusion>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-core-components</artifactId>
</exclusion>
<exclusion>
<groupId>com.vaadin</groupId>
<artifactId>copilot</artifactId>
</exclusion>
<exclusion>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-icons-flow</artifactId>
</exclusion>
</exclusions>
</dependency>
----

Also `copilot` is excluded. This is recommended because Copilot depends on core components and would not work without them.

Vaadin's Lumo and Material themes are not excluded. `vaadin-icons-flow` is excluded in the example because it's otherwise included by Lumo theme dependency.
mshabarov marked this conversation as resolved.
Show resolved Hide resolved

Set `vaadin.npm.excludeWebComponents` <<../properties.adoc#,configuration property>> to `true` to exclude pro and core components, including `hilla-auto-crud`, from `package.json`. Material and Lumo themes are not excluded.

Use `npmExcludeWebComponents` Vaadin Plugin property when building with Maven/Gradle.

When property is set to `true`, Vaadin's pro and core components are not installed by npm. If project has dependencies to uninstalled components, there will be error saying `Failed to find the following imports in the node_modules tree` with a list of missing resources. These remaining dependencies can be removed from the project's dependencies.

Check warning on line 179 in articles/flow/configuration/development-mode/index.adoc

View workflow job for this annotation

GitHub Actions / lint

[vale] reported by reviewdog 🐶 [Vaadin.Will] Avoid using 'will'. Raw Output: {"message": "[Vaadin.Will] Avoid using 'will'.", "location": {"path": "articles/flow/configuration/development-mode/index.adoc", "range": {"start": {"line": 179, "column": 153}}}, "severity": "WARNING"}

Notice that production bundle size may not change with this property as production bundle is already optimized by including only used components.

== Topics

section_outline::[]
3 changes: 3 additions & 0 deletions articles/flow/configuration/maven.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,9 @@ The Node.js version to be used when Node.js is installed automatically. Should b
`nodeAutoUpdate`::
Flag to enable automatic update of the Node.js version installed in `~/.vaadin` if it's older than the default or defined `nodeVersion`. Note: any installed version below `should work` is automatically updated regardless of this flag. Defaults to `false`.

`npmExcludeWebComponents`::
Excludes all Vaadin pro and core components from the `package.json`. Material and Lumo themes are preserved. Excluded packages aren't installed by npm which makes development bundles smaller. This property alone doesn't remove any Maven dependencies. See <<development-mode/index.adoc#exclude-vaadin-components, Optimize bundle and package.json by excluding all Vaadin components>> for more information. Defaults to `false`.

`npmFolder`::
The folder where the [filename]`package.json` file is located. Defaults to `${project.basedir}`.

Expand Down
4 changes: 4 additions & 0 deletions articles/flow/configuration/properties.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,10 @@ The following table contains the properties that are defined in the [classname]`
|5000 ms (i.e., 5 seconds)
|Sets the maximum time in `milliseconds` that the client waits for predecessors of an out-of-sequence message, before considering them missing and requesting a full state resynchronization from the server. For example, when a server sends adjacent `XmlHttpRequest` responses and pushes messages over a low-bandwidth connection, the client may receive the messages out of sequence. Increase this value if your application experiences excessive resynchronization requests. However, be aware that it degrades the UX with flickering and loss of client-side-only states, such as scroll position.

|`npm.excludeWebComponents`
|false
|Excludes all Vaadin pro and core components from the `package.json`. Material and Lumo themes are preserved. Excluded packages aren't installed by npm which makes development bundles smaller. This property alone doesn't remove any Maven/Gradle dependencies. Supported also as a Vaadin Plugin property `npmExcludeWebComponents`. See <<development-mode/index.adoc#exclude-vaadin-components, Optimize bundle and package.json by excluding all Vaadin components>> for more information.

|`pnpm.enable`
|`false`
|Enables `pnpm`, instead of `npm`, to resolve and download frontend dependencies. It's set by default to `false` since `npm` is used typically. Set it to `true` to enable `pnpm`. See <<development-mode/npm-pnpm-bun#, Switching Between npm, pnpm and bun>> for more information.
Expand Down
Loading