search

aurelia / webpack-plugin

A plugin for webpack that enables bundling Aurelia applications.
MIT License
90 stars 36 forks source link

Cannot Exclude Vendor Files From App Bundle #123

Closed rathwell closed 7 years ago

rathwell commented 7 years ago

I'm submitting a bug report

Current behavior:

I'm hoping the bug here is actually more a lack of documentation, but I cannot reduce the size or contents of the app bundle using webpack with aurelia. I have seen mentions of small bundles, but I cannot get below 10 MB for a small app.

Libraries that are specified in the vendor bundle config are still being included in the app bundle output. I am not a webpack expert, nor aurelia, but as far as I can tell the config I am using should result in vendor libraries not being included in the app bundle, and much smaller bundle sizes.

Here are the relevant sections from the webpack config:

resolve: {
    extensions: ['.js'],
    modules: [srcDir, 'node_modules'],
    alias: {
        //'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        'jquery-ui': path.resolve(__dirname, 'static/jquery-ui/jquery-ui.js')
    },
  },
  entry: {
    app: ['aurelia-bootstrapper'],
    vendor: ['bluebird', 'jquery', 'jquery-ui', 'ag-grid', 'ag-grid-aurelia'],
    polyfill: ['babel-polyfill'],
  },
  output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
    sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
    chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
  },
...
plugins: [
    new AureliaPlugin(),
    new ProvidePlugin({
      'Promise': 'bluebird',
      '$': "jquery",
      'jQuery': "jquery",
      'window.jQuery': 'jquery',
      'window.$': 'jquery',
    }),
    new ModuleDependenciesPlugin({
      'aurelia-testing': [ './compile-spy', './view-spy' ]
    }),
    new HtmlWebpackPlugin({
      template: 'index.ejs',
      metadata: {
        // available in index.ejs //
        title, server, baseUrl
      },
      chunks: ['polyfill', 'app', 'vendor'],
      chunksSortMode: 'manual'
    }),
...
...when(production, new CommonsChunkPlugin({
      name: ['vendor']
    })),
...

Expected/desired behavior:

I am expecting the vendor libraries to be excluded from the app bundle, as well as much smaller bundle sizes. Documentation on how to do this if it is possible would be ideal.

See above.

A 10 MB app bundle is not viable.

jods4 commented 7 years ago

I am going to close this issue as it's not actually related to aurelia-webpack-plugin. What the plugin does is to ensure that dynamic dependencies of aurelia-loader (i.e. your app) are properly included in the webpack bundle.

Unless you encounter a specific issue, optimizing your build is rather a generic Webpack activity that is best supported in other places such Webpack gitter channel.

That said, a few observation and tips to get you started: (1) 10 Mo is an aweful lot. You absolutely need to know what are you putting in there, what takes this space? Knowing where your size budget goes is the first required step to be able to optimize your build as there is no silver bullet that magically shrinks your bundle. This tool will help you examine your bundle size, module by module: https://github.com/th0r/webpack-bundle-analyzer

(2) Are your numbers production bundles, in particular minified? Webpack adds lots of comments to make the bundles more easily examinable during development but it doesn't matter as they'll all go away for production.

(3) What makes me doubtful about 2 is when you say your vendor config is still in the main bundle. The piece that will move out those modules is CommonsChunkPlugin (you should read about it) and in your config it is behind a "production" switch.

(4) Another (more complex) option to move stuff out of one bundle and be long-term caching friendly is to use DLLPlugin. I'm not saying you should, just pointing out alternative options. More info about usage with Aurelia: https://github.com/aurelia/webpack-plugin/wiki/Using-Webpack-DLL

(5) This page gives additional tips to reduce the size of Aurelia: https://github.com/aurelia/webpack-plugin/wiki/Minimize-size It won't save 10Mo, though, as Aurelia itself is far from that size.

rathwell commented 7 years ago

Thanks. I figured out the main issue: there is a bug in the build task generated by 'au new' with the webpack selection. build.js sends property 'isProd' where the webpack config expects property 'production'.

jods4 commented 7 years ago

That is a good find! You should open a bug in aurelia/cli so that the template can be fixed. CC @JeroenVinke

rathwell commented 7 years ago

I actually went to do that, but it looks like it was already fixed a few weeks ago:

https://github.com/aurelia/cli/commit/4880c19557f3d0e4fc37159321d9686c5f2caa70#diff-0b7bcaaa099e969711912c4756765c0c