Provide a slim build without JSON3 and debug

[darrachequesne]

Following the discussion here #1019:

Child default:
    Version: webpack 1.13.3
               Asset    Size  Chunks             Chunk Names
        socket.io.js  212 kB       0  [emitted]  main
    socket.io.js.map  256 kB       0  [emitted]  main
Child slim:
    Version: webpack 1.13.3
                    Asset    Size  Chunks             Chunk Names
        socket.io.slim.js  136 kB       0  [emitted]  main
    socket.io.slim.js.map  168 kB       0  [emitted]  main

[darrachequesne]

cc @JulesAU @benjamin-albert

[benjamin-albert]

The slim client is now 16KB minified and gzipped verses the 22KB of the old IE support client (more than 27% smaller).

Really nice work! but please fix the issues I mentioned in the review before merging.

[benjamin-albert]

You forgot to:

$ npm install strip-loader --save-dev

But after you install this everything works grate!

I'm impressed that not only you replace the debug module with a noop but you actually strip calls to debug!

Another issue is ESLint complains when running gulp test:

support/webpack.config.slim.js
  30:15  error  Strings must use singlequote  quotes

This is causing the Travis build to completely fail.

[benjamin-albert]

ESLint complains when running gulp test:

support/noop.js
  2:26  error  Missing space before function parentheses  space-before-function-paren
  2:52  error  Missing semicolon                          semi

This is causing the Travis build to completely fail.

[darrachequesne]

How does 'aller un peu vite en besogne' translate? 😄

@benjamin-albert thanks a lot for the review, it should be better now.

The output of webpack-bundle-size-analyzer now gives:

engine.io-client: 73.91 KB (60.7%)
  engine.io-parser: 25.27 KB (34.2%)
    wtf-8: 5.96 KB (23.6%)
    blob: 2.15 KB (8.49%)
    has-binary: 1.18 KB (4.65%)
      isarray: 120 B (9.97%)
      <self>: 1.06 KB (90.0%)
    arraybuffer.slice: 725 B (2.80%)
    after: 685 B (2.65%)
    <self>: 14.62 KB (57.8%)
  yeast: 1.32 KB (1.79%)
  parsejson: 873 B (1.15%)
  parseqs: 745 B (0.984%)
  component-inherit: 146 B (0.193%)
  <self>: 45.59 KB (61.7%)
socket.io-parser: 14.41 KB (11.8%)
  component-emitter: 2.93 KB (20.4%)
  isarray: 120 B (0.813%)
  <self>: 11.36 KB (78.8%)
component-emitter: 3.11 KB (2.55%)
base64-arraybuffer: 1.85 KB (1.52%)
backo2: 1.37 KB (1.12%)
has-binary: 1.3 KB (1.06%)
  isarray: 120 B (9.04%)
  <self>: 1.18 KB (91.0%)
parseuri: 1.2 KB (0.988%)
component-bind: 474 B (0.380%)
has-cors: 396 B (0.317%)
webpack: 241 B (0.193%)
to-array: 216 B (0.173%)
indexof: 199 B (0.160%)
<self>: 23.19 KB (19.0%)

[alexsorokoletov]

How do one use a slim version through the NPM package?

[benjamin-albert]

I'm not sure this is the right place for how to questions like this. However I will provide instructions here since it might be useful to anyone else who finds this PR.

1. Install the client:

npm install socket.io-client --save-dev

2. Import the slim build in your code:

ES6 import:

import io from 'socket.io-client/dist/socket.io.slim.dev';

CommonJS require:

const io = require('socket.io-client/dist/socket.io.slim.dev');

HTML script tag:

• Expose the socket.io-client dist directory.

Exapress example:

app.use('/socket.io-client', express.static('./node_modules/socket.io-client/dist'));

• Add the script tag before the script that uses socket.io-client:

Minified production version:

<script src="/socket.io-client/socket.io.slim.js"></script>

Development version with lots of comments:

<script src="/socket.io-client/socket.io.slim.dev.js"></script>

@alexsorokoletov Please open a separate issue if you need help installing the slim client using TypeScript or any other JavaScript dialect/module system.

[darrachequesne]

@alexsorokoletov I don't think you should include the dist/ build directly, because this file is already minified/optimized for production. For example, if you have a dependency in common with the Socket.IO client, webpack - or another bundler - will have to include it twice in the final bundle.

A better solution would be to use the webpack-remove-debug plugin directly in your webpack configuration.

[alexsorokoletov]

@benjamin-albert Thank you for the response, I was not sure also if it's the right place to ask.
Really appreciate the answer.

@darrachequesne very good point, that might not be an optimal solution.
What I was trying to achieve is to remove the debug and other dependencies like JSON3 for the project that specifically needs minimal size bundle and where the browsers used are all modern. If I recall correctly, the last time JSON3 dependency was revisited was a couple of years ago.

[darrachequesne]

@alexsorokoletov actually, the json3 dependency is not used anymore since [email protected]. I've updated the README in order to reflect this change: f08b933