與webpack反應給我一個巨大的bundle.js文件

好吧我已經閱讀了許多文章（like this one）關於優化生產版本的bundle.js，但他們並沒有改變我的bundle.js文件，所以我必須做錯事。我用命令建立：與webpack反應給我一個巨大的bundle.js文件

的WebPack -p --config webpack.production.config.js

和webpack.production.config.js看起來是這樣的：

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: path.join(__dirname, 'public'), 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    modulesDirectories: ['node_modules', 'src'], 
    extensions: ['', '.js'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'] 
     } 
    ] 
    }, 
    alias: { 
     'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'), 
     'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js') 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { 
     warnings: false 
     } 
    }) 
    ], 
};

我不知所措。我有17個node_modules，包括反應和webpack等所有基礎知識。我的bundle.js文件是15.6MB ....絕對巨大且不可接受。從我讀它是什麼樣子的-p和這個插件在

new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
     } 
    })

應自動使用一切的.min.js版本。那是對的嗎？我必須做任何事情來強制我的應用程序使用它嗎？

任何優化都將有極大的幫助！該應用程序不是那麼大，並且該頁面的初始負載將使WAY變長。

謝謝！

來源

2016-07-01 James Hollyer

請看https://webpack.github.io/docs/code-splitting.html – lux

對於生產版本嘗試從https://webpack.github.io/docs/configuration.html改變devtool: 'inline-source-map'到devtool: 'source-map'

的配置的WebPack說：

inline-source-map - 一個SourceMap添加爲DataUrl對JavaScript 文件。

此外，再次對產品構建，可以消除在裝載機節「反應熱」。

例如，在我的一個項目中存在這些差異，開發包爲9MB，而生產包爲600KB。希望你會看到類似的改進。

來源

2016-07-02 08:59:29 Skiing

我強烈推薦你閱讀this教程，看完這個後答案很明顯。

簡而言之，您可以使用一個名爲uglify的插件，它可以顯着減小包的大小。另外，React使用'NODE_ENV': JSON.stringify('production')，與webpack無關

來源

2016-07-02 12:58:17 Guigui

與webpack反應給我一個巨大的bundle.js文件

回答

相關問題