package: individually: true generates huge files when using the same handler file for multiple functions

This is a Bug Report

Description

For bug reports:

• What went wrong? I ran serverless deploy -s test and checked the code size of the functions in the lambda console. The size had gone up from 326.9 kB to 36.4MB.
• What did you expect should have happened? The size to go down, and differ between the packages
• What was the config you used? serverless.yml

package:
  individually: true
custom:
  webpackIncludeModules: true

webpack.config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const slsw = require('serverless-webpack')
const Visualizer = require('webpack-visualizer-plugin')

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  externals: ['aws-sdk'],
  plugins: [
    new UglifyJSPlugin(),
    new Visualizer({filename: '../webpack-stats.html'}),
  ]
}

• What stacktrace or error message from your provider did you see?

Additional Data

• Serverless-Webpack Version you’re using: github master (git://github.com/elastic-coders/serverless-webpack.git#85560afce2c60cdf6c4ba54392e45e991e0cc595)
• Webpack version you’re using: 3.5.5
• Serverless Framework Version you’re using: 1.20.2
• Operating System: Debian Stretch
• Stack Trace (if available):

My serverless.yml has 3 functions, all in the same file, handler.js.

[HyperBrain]

It is fixed in the attached PR, but consider changing the project layout as mentioned above 😉

[HyperBrain]

@msl-kabo I will fix the wrong packaging issue, but I see a general flaw in the layout of the project. Webpack can only set whole files as entries (see here). So, if all of your handlers are exports of the same file, this file will be optimized (with all exports that it has in it). This is not optimizable on a function level though.

The benefit from Webpacks optimization is only usable, if you separate the handler layer from the business logic, i.e. you should create 3 handlers for the functions that call the specific export from the lib files. Then Webpack will analyze each handler separately and only use the code used by each specific handler that is accessed from the handlers.

Sample:

# serverless.yml
functions:
  funcA:
    handler: handlers/funcA.handler
  funcB:
    handler: handlers/funcB.handler
  funcC:
    handler: handlers/funcC.handler

File system:

  handlers/
    funcA.js
    funcB.js
    funcC.js
  lib/
    handler.js

The handlers now export a handler function and each handler calls into lib/handler.functionX. Now Webpack can optimize the whole code correctly.