Webpackツリーは、dead_develope除去で振るとnode_moduleで動作しますか？

Question

これを考慮すると、Webpack 3.8.1の設定です。

// common 
module.exports = { 
     context: path.resolve(__dirname, './src'), 
     entry: [ 
      'whatwg-fetch', 
      './index' 
     ], 
     output: { 
      path: path.resolve(__dirname, 'build/assets'), 
      publicPath: '/assets/', 
      filename: 'main.js' 
     }, 
     plugins: [ 
      new CleanWebpackPlugin(['build']), 
     ], 
     module: { 
      rules: [{ 
       test: /\.js$/, 
       exclude: /node_modules/, 
       use: { 
        loader: 'babel-loader', 
       } 
      }, { 
       test: /\.(scss|css)$/, 
       use: [{ 
        loader: 'style-loader' 
       }, { 
        loader: 'css-loader' 
       }, { 
        loader: 'sass-loader' 
       }], 
      }, { 
       test: /\.(png|jpg|gif|woff2|woff)$/, 
       use: [ 
        { 
         loader: 'url-loader', 
         options: { 
          limit: 8192 
         } 
        } 
       ] 
      }] 
     } 
    }; 

//prod 
module.exports = merge(common, { 
    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('production') 
     }), 
     new UglifyJSPlugin() 
    ], 
    devtool: 'none' 
}); 

このBabel 6.26.0設定

{ 
    "presets": [ 
    [ 
     "env", 
     { 
     "modules": false, 
     "targets": { 
      "browsers": [ 
      ">1%" 
      ] 
     } 
     } 
    ], [ 
     "react" 
    ] 
    ], 
    "plugins": [ 
    "transform-class-properties", 
    "transform-export-extensions", 
    "transform-object-rest-spread", 
    "react-hot-loader/babel" 
    ] 
} 

私は木がUglifyJSのデッドコード削除と一緒に揺れは例えば、index.es.jsモジュールから名前の輸入を書くために私を可能にする方法で動作する必要があることを期待していたMaterial-UI-Icons未使用のものはバンドルから削除されます。

import {Menu} from 'material-ui-icons'; 

このライブラリは確か"module": "index.es.js"としてpackage.jsonで定義された再輸出ES6モジュールを行います。

ただし、単一のアイコンをインポートした後、バンドルサイズが0.5MB増加しました。私が変更したとき

import Menu from 'material-ui-icons/Menu; 

このアイコンだけをインポートすると、バンドルサイズが再び小さくなりました。

私の設定に何か間違いがありますか、またはツリーシェイキングがどのように機能し、このシナリオには当てはまらないのか分かりませんか？

Answer 1

追加の掘り下げの後、原因/一時的な解決策/解決策が見つかりました。基本的にES Modulesには副作用がある可能性があるため、index.es.jsまたは類似の"module"エントリポイントにある通常使用されていない未使用の再エクスポートを安全に（仕様ごとに）削除できます。

今のところ、いくつかの方法があります。必要なモジュールのみを手動でインポートすることも、babel-plugin-direct-importを使用することもできます。

Webpack 4は、side-effectsフラグを使用してsupport for pure modulesを追加することをお勧めします。図書館の作者がそれを純粋なものとしてマークすると、木の揺れや縮小が期待どおりに機能します。また、NodeJSでESM仕様のサポートについてthis nice summaryを読むことをお勧めします。

今のところ、this wonderfull visualizerを使って手作業でバンドルを処理し、それぞれの大きな依存関係をどのように扱うかを決めることをお勧めします。