2017-02-09 2 views
7

웹팩이 import { select } from 'd3-selection'을 수행하여 해결 될 수있는 다음 bundle visualization. 문제에서 볼 수 있듯이 import { select } from 'd3'을하고있는 번들 d3.js의 모든 포함됩니다 D3.js를 흔들어이되지 트리하지만이 자동 트리의 목적을 패배 다소 흔들렸다.웹팩 제대로

트리가 흔들리는 것은 라이브러리가 아닌 코드에서 간단한 경우 작동하는 것처럼 보입니다.

우리는 모듈 구문을 유지하고 D3의 모듈 기반의 코드를 선택하기 위해 우리의 webpack.config.js resolve: { mainFields: ['module', 'browser', 'main'] }'module' 결의를 사용하기 위해 우리의 .babelrc"modules": false를 사용합니다. 보시다시피 가져온 node_modules/d3/index.js은 모 놀리 식 브라우저 번들 또는 CommonJS 내보내기 대신 ES6 모듈로 분할됩니다.

webpack github 페이지에 문제로 게시해야합니까, 아니면 잘못된 것이 있습니까? 이 라이브러리의 모든 최신 버전 ([email protected], [email protected] 등)을 사용하고

편집 :

+0

Webpack 2.2.1 및 d3 4.6.0에서 같은 문제가 발생했다고 언급하고 싶습니다. 다른 라이브러리에서는 트리 떨림이 작동합니다. 해결책을 찾은 경우 의견을 보내주십시오. – Nicd

+0

Common JS를 처리 할 새로운 webpack 플러그인이있는 것처럼 보입니다. 내 업데이트 된 답변을 참조하십시오. – nickytonline

+0

명백한 버그가 수정되는 동안 (가능하다면) 좀 더 구체적인 모듈에서 가져 오는 것이 좋습니다. 예 : 'd3-selection''에서 import {select}하거나,'d3-selection/src/select''에서 import를 선택하십시오. –

답변

1
: 이 다음과 같은 문제와 관련된 것 같다

정적으로 분석 할 수 있기 때문에 트리 떨림은 ES6 모듈에서만 작동합니다. 많은 libs가 게시하는 AMD/CommonJS는 가능하지 않습니다. 그래서 어떤 나무가 흔들리는 것을 보지 못했을 것입니다. 참조하십시오 https://advancedweb.hu/2017/02/07/treeshaking

업데이트 : 일반 JS 모듈, https://github.com/indutny/webpack-common-shake을 떨고 수있는 새로운 webpack 플러그인이있는 것 같습니다. Repo에 알파가 있다고 표시되어 있습니다.