React.js app.js file size

问题

I created pretty simple react application containing 7 pages and 13 components. I am using gulp to compile it, browserify for dependencies, all files are minimized.

My build'ed app.js file has 1.1 MB. I think it is quite big.

What can I do to reduce its size ? Are there any good practices to achieve smallest size ?

EDIT:

My source code without dependencies is 91 KB.

回答1:

Using webpack-uglify and disabling source maps can greatly improve the output to a reasonable size (~140kbs for a hello world application)

A couple of steps:

Setting devtool in webpack config to cheap-source-map or cheap-module-source-map so the source maps are not bundled with the output:

{
  eval: 'cheap-source-map'
}

Activate uglify plugin or call webpack with -p argument

plugins: [
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  })
]

Defining node environment for production causes webpack to remove test helpers and optimize the ouput size:

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

Note: these steps should be only used for production builds as they increase the build time.

Resource: https://medium.com/modus-create-front-end-development/optimizing-webpack-production-build-for-react-es6-apps-a637e5692aea#.bug2p64de

回答2:

It seems to me that you just have a lot of dependencies. In modern JS development it's pretty easy to go overboard and include every library under the sun. People tend to forget that if they include library X, they also include its dependencies.

The only thing I can recommend is to go through each one and asses, how useful it actually is. If you're just using a small part of a big library, try to replace it with something smaller, or maybe roll out your own solution.

Maybe you can find replacements here: microjs

回答3:

Here is my plugin code that reduced the js from about 3MB to 350KB:

plugins: debug ? [] : [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': '"production"' } }), new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: true, sourcemap: false, compress: { warnings: false, } }), ]

回答4:

Have a look at browserify-shim. That library helps you to outsource your dependencies with CDNs. So you have less dependencies in your compiled file.

回答5:

If you don't manage to get your bundle size to where you need it to be, code-splitting is also an option.

The idea is that you don't send the code for your entire app at once - you send what is needed to load the first page, and then lazy-load other app code as it's needed.

来源：https://stackoverflow.com/questions/28098487/react-js-app-js-file-size

标签

javascript

gulp

reactjs

browserify