Question

我想在执行source-map和CommonChunk之后更多地减少我的包的大小。

假设我正在使用react-d3库。但是在整个应用程序中只使用了D3.PieChart。

// only PieChart is used
var PieChart = require('rd3').PieChart

当我查看捆绑文件时，还包括所有其他组件，如BarChart，blah blah。反正只有包含react-d3库的PieChart部分吗？反应和反应路由器的情况相同，无论如何只导入一部分库而不是整个。

我正在使用Webpack进行捆绑。

这是我的webpack配置：

var Webpack = require('webpack')

var DevelopmentEnvironmentConfig = new Webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify('development'),
  }
})

var CommonChunkConfig = new Webpack.optimize.CommonsChunkPlugin({
  name: "vendor",
  filename: "vendor_bundle.js",
  minChunks: 4
})

module.exports = {
  devtool: 'eval',
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-router', 'react-dom', 'd3', 'rd3']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader"
      }
    ]
  },
  output: {
    filename: "app_bundle.js",
    path: __dirname + '/public/javascripts/'
  },
    plugins: [DevelopmentEnvironmentConfig, CommonChunkConfig]
}

Webpack包拆分或提取

0 个答案: