Question

我是React和javascript dev的新手。我已经习惯了java构建工具，所以现在使用NPM我已经有了一个新的构建工具来学习。我刚刚进入我的项目，我注意到我的缩小，uglified捆绑仍然〜275kb，我想知道这可以扩展到一个大尺寸的应用程序。我的原始源代码本身只有34kb，但当然我必须引入所有这些框架和诸如此类的东西。

那么 - 当我的应用程序增长时，如何保持我的应用程序的大小？我有点难以理解我在线阅读的内容，因为很多人似乎都在使用Grunt，但我只是在下面的包中使用npm start和npm run build。

我应该以不同的方式管理我的requires（）以防止重复包装吗？我不知道从哪里开始...

这是我的package.json：

{
  "name": "someapp",
  "version": "0.0.1",
  "description": "foo",
  "repository": "",
  "main": "js/app.js",
  "dependencies": {
    "classnames": "^2.1.3",
    "flux": "^2.0.1",
    "jquery": "^2.2.0",
    "keymirror": "~0.1.0",
    "object-assign": "^1.0.0",
    "react": "^0.12.0"
  },
  "devDependencies": {
    "browserify": "^6.2.0",
    "envify": "^3.0.0",
    "jest-cli": "^0.4.3",
    "reactify": "^0.15.2",
    "uglify-js": "~2.4.15",
    "watchify": "^2.1.1"
  },
  "scripts": {
    "start": "watchify -o js/bundle.js -v -d js/app.js",
    "build": "browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js",
    "test": "jest"
  },
  "author": "Some Guy",
  "browserify": {
    "transform": [
      "reactify",
      "envify"
    ]
  },
  "jest": {
    "rootDir": "./js"
  }
}

Answer 1

我能用Webpack取得相当不错的成绩。我在Optimizing Webpack Prod Build for React + ES6 Apps

中写到了这一点

这是我的Webpack配置：

LocalCacheServiceClear.isAvailable()

需要考虑的两个要点：

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

var nodeEnv = process.env.NODE_ENV || 'development';
var isProd = nodeEnv === 'production';

module.exports = {
  devtool: isProd ? 'cheap-module-source-map' : 'eval',
  context: path.join(__dirname, './client'),
  entry: {
    jsx: './index.js',
    html: './index.html',
    vendor: ['react']
  },
  output: {
    path: path.join(__dirname, './static'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: 'file?name=[name].[ext]'
      },
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: [
          'react-hot',
          'babel-loader'
        ]
      },
    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    root: [
      path.resolve('./client')
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: false
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
    })
  ],
  devServer: {
    contentBase: './client',
    hot: true
  }
};

这个将输出最少的源图，并将使用外部文件，这有利于您的最终包大小。

devtool: isProd ? 'cheap-module-source-map' : 'eval',

Uglify - 你可能知道它的作用。加上plugins: [ new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: false }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(nodeEnv) } }) ],设置将从React lib中删除相当多的开发代码。

process.env将允许您将库（或您喜欢的其他块）捆绑到单独的构建文件中。这非常棒，因为它允许您为供应商库设置不同的缓存模式。例如。您可以比业务逻辑文件更积极地缓存它们。

哦，如果你想看到我的CommonsChunkPlugin符合这个webpack配置：

package.json

编辑：树摇动是Webpack 2中预期的一个闪亮的新版本（目前处于测试阶段）。再加上上面的配置，它将是一个杀手级功能，将显着缩小您的最终捆绑。

编辑2：Webpack 2 我修改了现有的示例应用程序以使用Webpack 2配置。它节省了28％的额外费用。在此处查看项目：Webpack 2 sample config project

React Js - 如何保持bundle.min.js小？

1 个答案:

需要考虑的两个要点：