Webpack large Bundle Size

Question

由于大的webpack包的大小，我正面临问题。

我的包大小的大小是在166 kb附近。我使用-p标志运行webpack。大部分尺寸是由于捆绑文件中的反应模块。所以，我试图做的是我做了两个捆绑包：一个包含我的应用程序特定代码，另一个包含npm不经常更改的缩小版本。

我的包大小现在是20 Kb。

这里是我的WebPack配置文件：

var path = require('path'); 
var webpack = require("webpack"); 
var node_modules_dir = path.resolve(__dirname, 'node_modules'); 
var config = { 
    entry: path.resolve(__dirname, 'index.js'), 
    output: getOutput(), 
    plugins: [ 
     new webpack.optimize.UglifyJsPlugin(), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production') 
      } 
     }) 
    ], 
    devtool: process.env.NODE_ENV === 'production' ? false : "eval", 
    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       include: /src/, 
       loaders: [ 
        'style', 
        'css', 
        'autoprefixer?browsers=last 3 versions', 
        'sass?outputStyle=expanded' 
       ] 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       loaders: [ 
        'url?limit=8192', 
        'img' 
       ] 
      }, 
      { 
       test: /\.jsx?$/, 
       exclude: (node_modules_dir), 
       loaders: [ 
        'react-hot', 
        'babel-loader?presets[]=stage-0,presets[]=react,presets[]=es2015', 
       ] 
      }, { 
       test: /\.css$/, 
       loader: 'style-loader!css-loader' 
      } 
     ] 
    } 

}; 

module.exports = config; 

function getOutput() { 
    if (process.env.NODE_ENV === 'production') { 
     return { 
      path: path.resolve(__dirname, 'dist'), 
      filename: 'bundle.js' 
     } 
    } else { 
     return { 
      publicPath: 'http://localhost:3000/', 
      filename: 'dist/bundle.js' 
     } 
    } 
} 

这里是我的代码：

import {connect, Provider} from 'react-redux'; 
import React from "react" 
import {createStore, combineReducers} from 'redux'; 
import reducers from "./reducers"; 
import {increment} from "./actions/App.js"; 
var store = createStore(
    combineReducers({ 
     ...reducers 
    }) 
); 

class App extends React.Component { 
    render() { 
     return <div> 
      <span>Value is : {this.props.value}</span> 

      <div onClick={this.props.increment}><span>Increment</span></div> 
     </div> 
    } 
} 

App = connect((state)=> { 
    return {value: state.app.value} 
}, {increment})(App); 

module.exports = React.createClass({ 
    render:()=> { 
     return <Provider store={store}><App /></Provider> 
    } 
}); 

这里是我的package.json文件

{ 
    "name": "Sample App", 
    "version": "0.0.1", 
    "private": true, 
    "scripts": { 
    "webpack-server": "webpack-dev-server --hot --progress --colors --port 3000", 
    "serve-web": "npm run webpack-server", 
    "deploy": "NODE_ENV=production webpack -p --optimize-minimize" 
    }, 
    "dependencies": { 
    "babel-core": "6.9.0", 
    "babel-loader": "6.2.4", 
    "babel-plugin-transform-runtime": "6.9.0", 
    "babel-preset-es2015": "6.9.0", 
    "babel-preset-react": "6.5.0", 
    "babel-preset-stage-0": "6.5.0", 
    "babel-relay-plugin": "^0.9.1", 
    "babel-runtime": "6.9.0", 
    "css-loader": "^0.23.0", 
    "file-loader": "^0.8.5", 
    "http-server": "^0.8.0", 
    "img-loader": "^1.3.1", 
    "node-fetch": "^1.5.3", 
    "postcss-loader": "^0.8.0", 
    "react": "15.3.2", 
    "react-dom": "^15.1.0", 
    "react-hot-loader": "^1.2.8", 
    "react-redux": "^4.4.5", 
    "redux": "^3.6.0", 
    "source-map-loader": "^0.1.5", 
    "url-loader": "^0.5.7", 
    "webpack": "1.13.1", 
    "webpack-dev-server": "1.14.1" 
    }, 
    "jest": { 
    "preset": "jest-react-native" 
    }, 
    "devDependencies": { 
    "babel-cli": "6.9.0", 
    "babel-core": "^6.9.0", 
    "babel-loader": "^6.2.4" 
    }, 
    "engines": { 
    "npm": ">=3" 
    } 
} 

所以，我有已更改

module.exports = require('./lib/React'); 

01作为其他NPM像终极版还使用反应NPM

到

module.exports = window.React; 

在react.js文件反应模块。

在react npm的react.js文件中应用此补丁是否是件好事？

制作两个这样的包是否是件好事？

Answer 1

您可以使用源映射资源管理器来检测问题所在。

https://www.npmjs.com/package/source-map-explorer