[Webpack] Build/Bundle issue - Vue project build cả những files không được import/sử dụng (unused)
Hiện tại mình đang thực hiện optimize build time cho 1 source code dự án đã phình khá to. Các helper module trong dự án đang được export & sử dụng kiểu như này:
<pre>// utils/index.ts
export * from './helper-a.ts';
export * from './helper-b.ts';
export * from './helper-c.ts';
// components/Button.vue
<script lang="ts">
import { HelperA } from '../utils';
</script>
</pre>
<p>
Nhưng khi build, bundle build ra bao gồm luôn cả helper-b và helper-c (mặc dù không được sử dụng). Mình có đọc vào phần tree shaking của webpack nhưng chưa tìm được cách giải quyết tối ưu nhất ngoài việc manual remove unused hoặc sửa lại cách export/import của toàn bộ source. Anh/chị/em có cách nào giải quyết tốt hơn xin gợi ý giúp mình với ạ. Mình cảm ơn.
</p>
<p>
</p>
<hr />
<p>
</p>
<p>
Bổ sung cấu trúc utils & code sample cho helper:
</p>
<pre>utils/
┣ browser/
┃ ┗ clipboard.ts
┣ data/
┃ ┗ snapshot.ts
┣ date/
┃ ┣ custom-format.ts
┃ ┣ format.ts
┃ ┣ index.ts
┃ ┣ now.ts
┃ ┗ toTimer.ts
┣ file/
┃ ┣ file.ts
┃ ┗ image.ts
┣ mapper/
┃ ┣ paginate.ts
┃ ┗ status-mapper.ts
┣ normalizer/
┃ ┣ chain_id.normalize.ts
┃ ┣ index.ts
┃ ┣ number.normalize.ts
┃ ┗ path_name.normalize.ts
┣ number/
┃ ┣ bignumber.ts
┃ ┣ calculation.ts
┃ ┣ comparison.ts
┃ ┣ format.ts
┃ ┣ index.ts
┃ ┗ shift.ts
┣ object/
┃ ┣ getKeys.ts
┃ ┗ index.ts
┣ system/
┃ ┣ async.ts
┃ ┣ promise.ts
┃ ┗ reTryCatch.ts
┣ token/
┃ ┣ token-address.ts
┃ ┣ token-data-display.ts
┃ ┣ token-data.ts
┃ ┗ token-icon.ts
┣ ...
┣ campaign.ts
┣ contract.ts
┣ copy.ts
┣ index.ts
┣ misc.ts
┣ notification.ts
┣ promise.ts
┣ random.ts
┣ ref.ts
┣ string.ts
┣ viewport.ts
┗ string.ts</pre>
<pre>-----------------------------------------------
// utils/normalizer/path_name.normalize.ts
export const normalizeFileName = (path: string) => {
return (path.split('/').pop() as string).replace(/\\.\\w+$/, '') as string;
};
// utils/normalizer/index.ts
export * from './chain_id.normalize';
export * from './path_name.normalize';
export * from './number.normalize';
// utils/index.ts
export * from './browser/clipboard';
export * from './copy';
export * from './data/snapshot';
export * from './date';
export * from './file/file';
export * from './file/image';
export * from './mapper/paginate';
export * from './misc';
export * from './normalizer';
export * from './notification';
export * from './number';
export * from './object';
export * from './promise';
export * from './ref';
export * from './string';
export * from './system/async';
export * from './system/promise';
export * from './system/reTryCatch';
export * from './validate';
....</pre>
