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

我是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"
  }
}

解决方法:

我能用Webpack取得相当不错的成绩.我在Optimizing Webpack Prod Build for React + ES6 Apps写了这篇文章

这是我的Webpack配置：

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',

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

    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) }
    })
  ],

Uglify – 你可能知道它做了什么.与process.env设置相结合将从React lib中清除相当多的dev代码.

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

哦,如果你想看到我的package.json匹配这个webpack配置：

"scripts": {
    "start": "webpack-dev-server --history-api-fallback --hot --inline --progress --colors --port 3000",
    "build": "NODE_ENV=production webpack --progress --colors"
  },
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "file-loader": "^0.8.4",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0",
    "webpack-hot-middleware": "^2.2.0"
  }

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

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

标签：javascript,node-js,reactjs,minify,browserify
来源： https://codeday.me/bug/20190706/1396697.html