Skip to content

Comments

Mark dependencies as webpack externals#679

Merged
skjnldsv merged 2 commits intomasterfrom
enh/noid/externals
Oct 23, 2019
Merged

Mark dependencies as webpack externals#679
skjnldsv merged 2 commits intomasterfrom
enh/noid/externals

Conversation

@juliusknorr
Copy link
Contributor

This PR adds the external dependencies we use to the webpack externals list, so they are not included in the bundle. Since they are part of the dependency section they will still be installed by npm when app developers install our package and webpack will take care of resolving them properly then.

Before
image

After
image

The size of the saving in the app bundles of course depends on which components are used, but when using multiple components that include the usage of v-tooltip, popper.js will only be included once with this PR.

A quick test run on the deck vue branch saved me ~300kb in duplicate dependencies.

@korelstar
Copy link
Contributor

Nice! Why not marking vue as external dependency, too?

@juliusknorr
Copy link
Contributor Author

@skjnldsv
Copy link
Contributor

Since they are part of the dependency section they will still be installed by npm when app developers install our package and webpack will take care of resolving them properly then.

But then they will be considered as extraneous dependencies, no?
https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md

@juliusknorr
Copy link
Contributor Author

juliusknorr commented Oct 23, 2019

No, as they are still part of the dependencies in package.json:

Forbid the import of external modules that are not declared in the package.json's dependencies

And for the app itself only exports of @nextcloud/vue should be imported so the linting rule should still be fine.

@ChristophWurst
Copy link
Contributor

I gave this a test with Mail. The bundle size is a sum of all .js files, without map files.

Built against nc-vue master: 2692B
Built against this branch: 2444B

This means the new bundle will be just 90.79% of the size. This is quite impressive considering that Mail uses many of the components of this lib.

@skjnldsv skjnldsv added configuration dependencies Pull requests that update a dependency file labels Oct 23, 2019
@skjnldsv skjnldsv added this to the 1.0.1 milestone Oct 23, 2019
Copy link
Contributor

@ChristophWurst ChristophWurst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does what it promises to do :)

root: 'Vue'
}
},
'@nextcloud/axios': '@nextcloud/axios',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we automate this somehow?
Instead of manually specifying them?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I pushed another commit to exclude all from node_modules. See https://www.npmjs.com/package/webpack-node-externals#why-not-just-use-a-regex-in-the-webpack-config for why the additional package. 😉

Seems to still work fine :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@skjnldsv skjnldsv merged commit 1c8ad2e into master Oct 23, 2019
@skjnldsv skjnldsv deleted the enh/noid/externals branch October 23, 2019 07:30
@juliusknorr juliusknorr mentioned this pull request Oct 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews dependencies Pull requests that update a dependency file

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants