How to solve the problem that the webpack package file size is too large

Optimization comparison:

Before optimization: index.html introduces a main.js file with a size of more than 2M.

　 After optimization: index.html introduces main.js, commons.js, charts.js, and other.js. In order to achieve the purpose of dividing main.js equally. Each file is controlled within 300k. (If you are happy, 100k is no problem)

　 A bunch of libraries and tools used:

　 vue, webpack, babel, highcharts, echarts, jquery, html2canvas****** I will omit it here Some m codes

Problem:

After using webpack in the development environment, I found a single js file of 5m.

　The production environment is reduced to 2m with the help of vue-cli's webpack configuration.

　Solution:

Search for various solutions: require.ensure, require dependency, multiple entries, commonsChunkPlugin****Here are some solutions to save effort

There are too many solutions like the ones below on the Internet, but they are all up to Not as expected

entry:{  
    main:'xxx.js',
      chunks:['c1', 'c2'],
     commons:['jquery', 'highcharts', 'echarts','d3', 'xxxxx.js']      
}
plugins:{
new commonsChunkPlugin({
name:'commons',
minChunks:2
})        
}

Optimal solution:

entry:{  
    main:'xxx.js'
}

plugins:{
   new commonsChunkPlugin({
    name:'commons',
    minChunks:function(module){
      //  下边return参考的vue-cli配置
      // any required modules inside node_modules are extracted to vendor
      return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
   }
}) ,
// 以下才是关键
new commonsChunkPlugin({
    name:'charts',
    chunks:['commons']  
    minChunks:function(module){
      return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
        )
   }
})  
// 如果愿意，可以再new 一个commonsChunkPlugin

}

The results of the above code packaging: main.js, commons.js, charts.js