packer icon indicating copy to clipboard operation
packer copied to clipboard

packer::bundle() parameter for esbuild bundle

Open angelorbastos opened this issue 5 years ago • 1 comments

Hey man,

I found out about packer a couple of months ago and have been loving it, seriously! But I noticed build times can be quite slow, mostly because of babel, so I wanted to suggest using esbuild-loader for bundling/minifying via esbuild while still using packer::bundle() (so this could be the default bundling or just a parameter on packer::scaffold_golem()).

The modifications needed are very well explained at esbuild-loader's README.md, all it should take is:

  • Installing esbuild during packer's scaffold
  • Creating webpack.common.js with esbuild-loader imports and specific modifications to the options object
  • Creating loaders.json with the esbuild-loader configs instead of babel-loader

So webpack.common.js would look something like:

const {
  ESBuildPlugin,
  ESBuildMinifyPlugin
} = require('esbuild-loader')

...

var options = {
  entry: entryPoints,
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, JSON.parse(outputPath)),
  },
  externals: externals,
  module: {
    rules: loaders
  },
  plugins: [
    new ESBuildPlugin()
  ],
  optimization: {
    minimize: true,
    minimizer: [ new ESBuildMinifyPlugin({
      target: 'es2015'
    }) ]
  }
};

...

And loaders.json should look like:

[
  {
    "test": "\\.js$",
    "loader": "esbuild-loader",
    "options": {
      "target": "es2015",
      "loader": "jsx"
    }
  },
  ...
]

This setup has been working wonderfully for me, I got the build time to go down from ~3.3min to ~12sec, so I'd love to see it implemented on packer!

angelorbastos avatar Nov 30 '20 10:11 angelorbastos

Apologies, I totally forgot about this issue!

Thanks for sharing this, I just tried on a large project, and it's indeed mighty fast! I'll will try to add a add_plugin_esbuild.

JohnCoene avatar Jan 31 '21 15:01 JohnCoene