Webpack tạo tệp lớn với dự án nhỏ

Question

Tôi đã tạo webpack của mình tạo tệp main.js lớn (1.7mb) với một dự án nhỏ ~ 20-30 tệp nhỏ hơn 100 dòng mỗi tệp. Các phụ thuộc yêu cầu rất ít trong số (Phản ứng, Fluxible) và tôi đang sử dụng tất cả các Plugin optimize tôi có thể hiểu:

module.exports = { 
    output: { 
    path: './build', 
    publicPath: '/public/', 
    filename: '[name].js' 
    }, 
    debug: false, 
    devtool: 'eval', 
    target: 'web', 
    entry: [ 
    'bootstrap-sass!./bootstrap-sass.config.js', 
    './client.js', 
    ], 
    stats: { 
    colors: true, 
    reasons: false 
    }, 
    resolve: { 
    extensions: ['', '.js'], 
    alias: { 
     'styles': __dirname + '/src/styles', 
     'components': __dirname + '/src/scripts/components', 
     'actions': __dirname + '/src/scripts/actions', 
     'stores': __dirname + '/src/scripts/stores', 
     'constants': __dirname + '/src/scripts/constants', 
     'mixins': __dirname + '/src/scripts/mixins', 
     'configs': __dirname + '/src/scripts/configs', 
     'utils': __dirname + '/src/scripts/utils' 
    } 
    }, 
    module: { 
    loaders: [ 
     { test: /\.css$/, loader: 'style!css' }, 
     { test: /\.js$/, exclude: /node_modules/, loader: require.resolve('babel-loader') }, 
     { test: /\.json$/, loader: 'json-loader'}, 
     { test: /\.(png|svg|jpg)$/, loader: 'url-loader?limit=8192' }, 
     { test: /\.(ttf|eot|svg|woff|woff(2))(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?name=/[name].[ext]"}, 
     { test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style-loader', 
      'css!sass?outputStyle=expanded&' + 
      "includePaths[]=" + 
      (path.resolve(__dirname, "./node_modules")) 
     ) 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "windows.jQuery": "jquery" 
    }), 
    new ExtractTextPlugin("[name].css", {allChunks: true}), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.AggressiveMergingPlugin() 
    ], 

}; 

Tôi đang làm gì sai hoặc nơi tôi có thể nâng cao hơn nữa kích thước của tập tin?

Answer 1

Bạn nên đặt ít nhất

plugins: [ 
    new webpack.DefinePlugin({ 
    'process.env': { 
     // This has effect on the react lib size 
     'NODE_ENV': JSON.stringify('production'), 
    } 
    }), 
    ... 
], 

Điều đó sẽ giúp đáng kể với phản ứng.

Ngoài ra, thiết lập devtool đến source-map là thích hợp hơn trong môi trường sản xuất. Xem official documentation để biết thêm thông tin.

Bạn có thể thử kiểm tra đầu ra bằng cách sử dụng the analyse tool. Để có được JSON, bạn sẽ cần phải làm một cái gì đó như webpack --json > stats.json và sau đó vượt qua điều đó stats.json đến công cụ. Điều đó có thể cung cấp cho bạn một số thông tin chi tiết.

Answer 2

Tôi nhận được phản ứng từ 2.1mb xuống 160kb chỉ bằng cách thực hiện những điều ở đây (devtools: 'source-map'), sử dụng uglifyjs với các thiết lập mặc định (không có gzip nó kết thúc lên khoảng 670kb).

Có thể không phải là rằng tuyệt vời, nhưng ít nhất nó không còn phát điên nữa.

Đối với hậu thế, đây là cấu hình webpack của tôi:

// webpack.config.js 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'source-map', 
    entry: [ 
     'webpack-dev-server/client?http://127.0.0.1:2992', 
     'webpack/hot/only-dev-server', 
     './js/main' 
    ], 
    output: { 
     path: './out/', 
     filename: 'main.js', 
     chunkFilename: '[name]-[chunkhash].js', 
     publicPath: 'http://127.0.0.1:2992/out/' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loaders: ['react-hot', 'babel?optional=runtime&stage=0&plugins=typecheck'] 
      } 
     ] 
    }, 
    progress: true, 
    resolve: { 
     modulesDirectories: [ 
      'js', 
      'node_modules' 
     ], 
     extensions: ['', '.json', '.js'] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       // This has effect on the react lib size 
       'NODE_ENV': JSON.stringify('production'), 
      } 
     }), 
     new webpack.optimize.UglifyJsPlugin() 
    ] 
}; 

Answer 3

Bạn cũng có thể có một cái nhìn tại Webpack Bundle Analyzer.

Nó đại diện cho nội dung gói dưới dạng sơ đồ trang web có thể thu phóng tương tác thuận tiện.