TypeScript webpack 特定のnode_modulesを切り出したい

現在、node_modules の肥大化に困っています。
src 自体は大したことないのですが、使用している node_module の1つが半分を占めるほど大きく、
これを完全に分離して、必要なタイミングで読み込まれるようにしたいです。

dynamic import などを試しましたが二重になってしまう結果となりました。
以下厳密な使用状況です。以下のような書き方はまずいのでしょうか？
ここでいう大きなnode_moduleとは 'hoge' のことです。

service.ts

ts
1import Hoge from 'hoge';
2
3class SomeService {
4  // この中で利用
5}

service-wrapper.ts

ts
1let service = null;
2
3const getService = async () => {
4  if (service == null) {
5    service = await import('service.ts');
6    return service;
7  }
8
9  return service;
10}
11
12export default service;

webpack.config.js

js
1
2module.exports = {
3  // ...
4  entry: {
5    index: '~~',
6    service: '/path/to/service/',
7  },
8  optimization: {
9    splitChunks: {
10      cacheGroups: {
11        commons: {
12          test: /[\/]node_modules[\/]/,
13          name: 'vendors',
14          chunks: 'all',
15        },
16      },
17    },
18  },
19  output: {
20    path: path.join(__dirname, 'dist'),
21    filename: '[name].bundle.js',
22    chunkFilename: '[name].chunk.js',
23  },
24  // ...
25}