serverless-webpack icon indicating copy to clipboard operation
serverless-webpack copied to clipboard

webpack not removing unused package

Open CharanRoot opened this issue 6 years ago • 2 comments

This is a Bug Report

Description

Tree-shacking is not working as expected.

  1. Final bundle should remove unused dependency imports libraries
  2. Final bundle should have single dependency from different modules.

For bug reports:

  • What went wrong? Tree-shacking is not working
  • What did you expect should have happened? Tree-shacking should remove un used imports from libraries
  • What was the config you used?

webpack config

const path = require('path');
const slsw = require('serverless-webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const nodeExternals = require('webpack-node-externals');
//const TerserPlugin = require('terser-webpack-plugin')
const webpack = require('webpack');
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;

module.exports = {
    entry: slsw.lib.entries,
    target: 'node',
    node: {
        __dirname: false
    },
    mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
    performance: {
        hints: false
    },
    stats: 'errors-only',
    resolve: {
        extensions: ['.ts', '.mjs', '.js', '.json']
    },
    output: {
        libraryTarget: 'commonjs2',
        path: path.join(__dirname, '.webpack'),
        filename: '[name].js',
        sourceMapFilename: '[file].map'
    },
    externals: [
        nodeExternals(),

        {
            'aws-sdk': 'aws-sdk',
            'dtrace-provider': 'dtrace-provider',
            mysql2: 'mysql2',
            'pg-native': 'pg-native',
            sqlite3: 'sqlite3',
            tedious: 'tedious'
        }
    ],
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: [/node_modules/, /test/],
                use: [
                    { loader: 'cache-loader' },
                    { loader: 'thread-loader' },
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true, // disable type checker - we will manually type check
                            happyPackMode: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
         new WebpackDeepScopeAnalysisPlugin(),

         new webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly

         new webpack.optimize.ModuleConcatenationPlugin(),
         new webpack.optimize.AggressiveMergingPlugin(),

        // uncomment for bundle analysis
         new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }),
    ]
};
  • What stacktrace or error message from your provider did you see?

after adding ModuleConcatenationPlugin plugin webpack returning warning error.

\[1447] ./src/config/index.ts 1.31 KiB {0} [depth 3] [built]
       ModuleConcatenation bailout: Module is not an ECMAScript module

package command sls package --stage prod --verbose

I analyzed the bundle using BundleAnalyzerPlugin i observed bundle contains unused imports(libphonenumber.js) and imports repeating in multiple module (moment.js)

image

Additional Data

  • Serverless-Webpack Version you're using: 5.1.1
  • Webpack version you're using: 4.25.1
  • Serverless Framework Version you're using: 1.51.0
  • Operating System: Mac
  • Stack Trace (if available):

CharanRoot avatar Sep 25 '19 03:09 CharanRoot

have same issue... how did you tackled it ? @CharanRoot

592da avatar Jan 21 '20 17:01 592da

@592da I was unable fix it. If you know any solution let me know. Thanks

CharanRoot avatar Jan 22 '20 01:01 CharanRoot