Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In
Continue with Google
Continue with Facebook
or use


Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here
Continue with Google
Continue with Facebook
or use


Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.


Have an account? Sign In Now

Sorry, you do not have a permission to ask a question, You must login to ask question.

Continue with Google
Continue with Facebook
or use


Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

Stack Ask

Stack Ask Logo Stack Ask Logo

Stack Ask Navigation

  • Home
  • About Us
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • About Us
  • Contact Us
Home/ Questions/Q 3157
Next
In Process
8bu
  • 2
8buBeginner
Asked: November 16, 20212021-11-16T05:59:40+00:00 2021-11-16T05:59:40+00:00In: JavaScript

[Webpack] Build/Bundle issue – Vue project build cả những files không được import/sử dụng (unused)

  • 2

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';
....
buildbundleissuevuevue cliwebpack
  • 6 6 Answers
  • 195 Views
  • 0 Followers
  • 0
Answer
Share
  • Facebook
  • Report

6 Answers

  • Voted
  • Oldest
  • Recent
  1. tvd12 Enlightened
    2021-11-16T14:10:43+00:00Added an answer on November 16, 2021 at 2:10 pm

    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
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report
    • 8bu Beginner
      2021-11-16T14:19:45+00:00Replied to answer on November 16, 2021 at 2:19 pm

      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ế ạ @@

      • 0
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp
        • Report
  2. dungtv Pundit
    2021-11-16T09:24:56+00:00Added an answer on November 16, 2021 at 9:24 am

    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
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report
    • 8bu Beginner
      2021-11-16T09:42:35+00:00Replied to answer on November 16, 2021 at 9:42 am

      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 ạ

      • 1
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp
        • Report
      • Nguyễn Tuệ Vương Beginner
        2021-11-16T09:50:33+00:00Replied to answer on November 16, 2021 at 9:50 am

        Bạn có thể viết 1 đoạn sample code trong các helper lên đây không?

        • 1
        • Share
          Share
          • Share on Facebook
          • Share on Twitter
          • Share on LinkedIn
          • Share on WhatsApp
          • Report
        • 8bu Beginner
          2021-11-16T11:23:49+00:00Replied to answer on November 16, 2021 at 11:23 am

          Dạ e cập nhật trên post rồi ạ

          • 0
          • Share
            Share
            • Share on Facebook
            • Share on Twitter
            • Share on LinkedIn
            • Share on WhatsApp
            • Report

You must login to add an answer.

Continue with Google
Continue with Facebook
or use


Forgot Password?

Need An Account, Sign Up Here

Sidebar

Ask A Question

Stats

  • Questions 629
  • Answers 1k
  • Best Answers 70
  • Users 322
  • Popular
  • Answers
  • monkey

    [Deep Learning] Làm thế nào để xác định được cái ...

    • 16 Answers
  • Tú Trần Anh

    [Ezyfox Server] Unity game client không gửi được command khi ...

    • 12 Answers
  • Thưởng Đặng Văn

    Multiple tenant multiple database .net core

    • 11 Answers
  • tvd12
    tvd12 added an answer Qua rất nhiều trình gửi mail và các dự án… August 12, 2022 at 3:15 pm
  • monkey
    monkey added an answer use cosmwasm_std::{ Response, StdError, StdResult, Addr, Storage }; use cw_storage_plus::Map;… August 11, 2022 at 4:33 am
  • monkey
    monkey added an answer # Set up biến môi trường: source <(curl --insecure https://raw.githubusercontent.com/CosmWasm/testnets/master/malaga-420/defaults.env)… August 10, 2022 at 9:31 am

Related Questions

  • monkey

    JS: Convert duration string to millisecond kiểu như Jira Atlassian

    • 1 Answer
  • Nguyễn Hiếu

    Tích hợp vào laravel

    • 7 Answers
  • monkey

    Javascript chuyển đổi qua lại giữa hex và string

    • 0 Answers

Top Members

tvd12

tvd12

  • 70 Questions
  • 1k Points
Enlightened
monkey

monkey

  • 101 Questions
  • 709 Points
Enlightened
Nguyễn Thái Sơn

Nguyễn Thái Sơn

  • 153 Questions
  • 234 Points
Professional

Trending Tags

.net core abstract class ai analytics android ansible anti-flooding apache poi api artificial intelligence async asyncawait atomicboolean backend backend nestjs bash script batch bean big project binding bitcoin blockchain blog boot-nodes branch british btree buffered build bundle c# cache caching callback career career path cast centos chat cloud cloud reliability commit company content-disposition contract cors cosmos cosmos-sdk css database datasource datastructure decentralized exchange deep learning deploy contract design-pattern devops dex distraction programing dns docker download draw.io du học duration dữ liệu lớn eclip editor employee english erc20 erc721 eth ethereum ethereum login extensions exyfox ezyfox ezyfox-boot ezyfox-server ezyfoxserver ezyhttp ezymq-kafka ezyredis facebook fe floating point flutter freetank french front-end frontend fullstack fulltextsearch future game game-box game-room game-server gateway get git glide go golang google grapql grpc guide hazelcast hibernate hibernateconfig html http https index indexing integration-test intellij interface interview io ipfs isolate issue it java javacore java core javascript java spring javaw java web job jpa js json jsp & servlet jvm jwt kafka keep promise kerberos keycloak kotlin language languague library load-balancing log log4j log4j-core login lưu trữ machine learning macos math maven merge messaging metamask microservice model mongo msgpack multiple tenant multithread multithreading mysql n naming naming convention netcore netty nft nft game nio nodejs non-blocking io opensource optimize orm pagination pancakeswap panic pgpool phỏng vấn pointer postgresql pre private_key programming promise push message android push notification python python unicode question queue rabbitmq reactive reactjs reactjs download recyclerview redis request resource rest roadmap ropssten ropsten rr rust rxjava s3 schedule search security server shift jis singleton sjis slack smart contract soap socket socket server soft delete sosanh spring spring-boot-test spring-jpa spring aop spring boot springboot spring data jpa spring redis springsecurity spring security springwebflux mysql sql sql server sse stackask storage stream structure trong spring boot system environment variables thread threadjava thymeleaf totp tracking location transfer transfer git uniswap unit test unity upload file validate vector view volatile vue vue cli web web3 web3 client webpack websocket windows 11 winforms work zookeeper

Footer

Stack Ask

Stack Ask is where Developers Ask & Answers. It will help you resolve any questions and connect you with other people.

About Us

  • Meet The Team
  • About Us
  • Contact Us

Legal Stuff

  • Terms of Service
  • Privacy Policy
  • Cookie Policy

Help

  • Knowledge Base
  • Support

Follow

© 2021 Stack Ask. All Rights Reserved
Powered by youngmonkeys.org