Avatar
2
8bu Beginner
8bu Beginner
[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:
// 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>

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.


Bổ sung cấu trúc utils & code sample cho helper:

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
-----------------------------------------------
// 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';
....
  • Answer
webpack vue vue cli bundle build issue
Remain: 5
2 Answers
Avatar
dungtv Beginner
dungtv Beginner
Em thử nâng target lên es2015 và sử dụng lazyload xem sao. Nếu target vẫn là es5, es6 thì khả năng ko đc em ạ

Nguồn: Nguyễn Tuệ Vương

  • 0
  • Reply
Dạ e cảm ơn a, mà project e đang để target build esnext & toàn bộ component đều lazy load rồi, build ra vẫn bị issue như trên ạ  –  8bu 1637030555000
Bạn có thể viết 1 đoạn sample code trong các helper lên đây không?  –  Nguyễn Tuệ Vương 1637031033000
Dạ e cập nhật trên post rồi ạ  –  8bu 1637036629000
Avatar
tvd12 Beginner
tvd12 Beginner
em thử bật tree shaking lên xem sao, webpack version cũ (<4) thì hình như phải config babel https://webpack.js.org/guides/tree-shaking

Nguồn: Đức An.

  • 1
  • Reply
Project e hiện tại dùng vue-cli 4 (dùng webpack@^4.0.0) rồi ạ. Tree-shaking chắc là bật rồi, docs phần đó e cũng thử config side-effect như repo @shopify/polaris được nhắc tới trong docs, nhưng cũng thế ạ @@  –  8bu 1637047185000