New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

duplicate code in multi chunks or sooooo big common chunk file #1693

Closed
Wyntau opened this Issue Dec 2, 2015 · 11 comments

Comments

Projects
None yet
5 participants
@Wyntau

Wyntau commented Dec 2, 2015

duplicate code in multi chunks and sooooo big common chunk file

Suppose I have a SPA website. And I have a file main.js in which I config the route.

define(function(){
  // suppose I define route here
  route.when('#/aaa', function(){
    // a code split point
    require([
      'services/A',
      'style/a',
      'module/a'
    ])
  }).when('#/bbb', function(){
    // a code split point
    require([
      'services/A',
      'services/B',
      'style/b',
      'module/b'
    ])
  }).when('#/ccc', function(){
    // a code split point
    require([
      'services/B',
      'serivces/C',
      'style/c',
      'module/c'
    ])
  }).when('#/ddd', function(){
    // a code split point
    require([
      'services/A',
      'serivces/C',
      'style/d',
      'module/d'
    ])
  })// and has many route configs like this
});

I use webpack to bundle code. My webpack.config.js like this

module.exports = {
  entry: {
    main: path.resolve(__dirname, 'main.js')
  },
  output: {
    path: path.resolve(__dirname),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'main',
      async: true
    })
  ]
}

When I run webpack, various chunks have duplicate services/A services/B etc. code.
This is not I want.

I read webpack docs, and then I add minChunks: 2 option to CommonsChunkPlugin.

Then I run webpack again.

Now, every chunk only have its own code. But I also get a big common chunk file, which include
services/A, services/B, services/C and other shared code between various page file.

When I run these code, in page /aaa, the /aaa's files loaded, and also the big common chunk file.

Now the big problem is, page /aaa doesn't need services/B and services/C code at all, But the common chunk files contains all shared code between various page files. So the common chunk file is so big, and have many unused code.

I know I can set minChunks to bigger number, but in this way, every page file may agagin have duplicate code.

HELP!

Can I have other methods to only load necessary common chunks when route to different page?

@Wyntau

This comment has been minimized.

Show comment
Hide comment
@Wyntau

Wyntau Dec 2, 2015

@sokra Could you please take a look at my question? Thanks very much!!

Wyntau commented Dec 2, 2015

@sokra Could you please take a look at my question? Thanks very much!!

@sokra

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Dec 2, 2015

Member

There is a tradeoff here.

move more stuff into the commons chunk means less duplication, bigger commons chunk and more unneeded code loaded.

You can try multiple levels of CommonsChunks and/or manualy splitting of the chunks (minChunks can be a function).

Member

sokra commented Dec 2, 2015

There is a tradeoff here.

move more stuff into the commons chunk means less duplication, bigger commons chunk and more unneeded code loaded.

You can try multiple levels of CommonsChunks and/or manualy splitting of the chunks (minChunks can be a function).

@Wyntau

This comment has been minimized.

Show comment
Hide comment
@Wyntau

Wyntau Dec 2, 2015

@sokra sorry, could you please explain what's the meaning of multiple levels of commonChunks?
I think I may need something like this.
and I will see the example for seting minchunks to function to see if can solve my problem.

thanks for your reply and awesome work on webpack.

Wyntau commented Dec 2, 2015

@sokra sorry, could you please explain what's the meaning of multiple levels of commonChunks?
I think I may need something like this.
and I will see the example for seting minchunks to function to see if can solve my problem.

thanks for your reply and awesome work on webpack.

@sokra

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Dec 7, 2015

Member

see two-explicit-vendor-chunks example in the examples folder

Member

sokra commented Dec 7, 2015

see two-explicit-vendor-chunks example in the examples folder

@Wyntau

This comment has been minimized.

Show comment
Hide comment
@Wyntau

Wyntau Dec 8, 2015

In your example, all webpackJsonp like functions will go into vendor.js

but in my question, that files are not vendor(all third party libraries and plugins are in vendor.js), just common chunks, and I want to async load them when required, insteadof loading them in html before app.js or main.js or something else as shown in your example.

Anyway, thanks for your reply.

Wyntau commented Dec 8, 2015

In your example, all webpackJsonp like functions will go into vendor.js

but in my question, that files are not vendor(all third party libraries and plugins are in vendor.js), just common chunks, and I want to async load them when required, insteadof loading them in html before app.js or main.js or something else as shown in your example.

Anyway, thanks for your reply.

@Wyntau

This comment has been minimized.

Show comment
Hide comment
@Wyntau

Wyntau Dec 9, 2015

Hello @sokra I follow your two-explicit-vendor-chunks example, and add one example https://github.com/Wyntau/webpack-example

but the common used code not only exist in separate file but also these files required them.

Could you please take a look at my demo project?

You may say I can remove app from commonChunks plugins' names list, but If I do that, app.js will not have webpack's initialize code, and throw webpackJsonp is not defined error.

Could you give me some advise please?

Wyntau commented Dec 9, 2015

Hello @sokra I follow your two-explicit-vendor-chunks example, and add one example https://github.com/Wyntau/webpack-example

but the common used code not only exist in separate file but also these files required them.

Could you please take a look at my demo project?

You may say I can remove app from commonChunks plugins' names list, but If I do that, app.js will not have webpack's initialize code, and throw webpackJsonp is not defined error.

Could you give me some advise please?

@Wyntau

This comment has been minimized.

Show comment
Hide comment
@Wyntau

Wyntau Dec 11, 2015

Hello again @sokra

I bring a good news. I solved my problem! New code is in my webpack-example then-loader branch https://github.com/Wyntau/webpack-example/tree/feature/then-loader

This is what I want. And I think it is a typical use case, that's only bunlde each page's own sources, and async load common chunks(like common service or something else). Happy to migrate my project to webpack~~

Wyntau commented Dec 11, 2015

Hello again @sokra

I bring a good news. I solved my problem! New code is in my webpack-example then-loader branch https://github.com/Wyntau/webpack-example/tree/feature/then-loader

This is what I want. And I think it is a typical use case, that's only bunlde each page's own sources, and async load common chunks(like common service or something else). Happy to migrate my project to webpack~~

@jrs320

This comment has been minimized.

Show comment
Hide comment
@jrs320

jrs320 Feb 20, 2016

Awesome! I had the same issue for a few days, i am so happy to find a solution at here,now i am taking a closer look at your then-loader, thanks very very much @Treri

jrs320 commented Feb 20, 2016

Awesome! I had the same issue for a few days, i am so happy to find a solution at here,now i am taking a closer look at your then-loader, thanks very very much @Treri

@Wyntau

This comment has been minimized.

Show comment
Hide comment
@Wyntau

Wyntau Feb 21, 2016

@jrs320 Thanks. I have updated code in mater branch. You can have a look the newest code in https://github.com/Wyntau/webpack-angular-example

Wyntau commented Feb 21, 2016

@jrs320 Thanks. I have updated code in mater branch. You can have a look the newest code in https://github.com/Wyntau/webpack-angular-example

@Wyntau Wyntau closed this Mar 25, 2016

@wzup

This comment has been minimized.

Show comment
Hide comment
@Wyntau

This comment has been minimized.

Show comment
Hide comment
@Wyntau

Wyntau commented Jan 29, 2018

@wzup the new code is in https://github.com/Wyntau/webpack-angular-example master branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment