How can I solve the problem of excessive webpack package size?

Codesplitting:

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

After optimization: index.html introduces main. js, commons. js, charts. js, AND other. js. To divide main. js equally. Each file is less than kb. (If you are happy, KB is OK)

A bunch of libraries and tools used:

Several m codes are omitted in vue, webpack, babel, highcharts, echarts, jquery, and html2canvas *****.

Problem:

After webpack is used in the development environment, a single js file is found 5 MB.

The production environment is reduced to 2 MB by using the webpack configuration of vue-cli.

Solution:

Search for various solutions: require. ensure, require dependency, multi-entry, and commonsChunkPlugin ***** save effort

There are too many solutions similar to the following on the network, but they cannot achieve the expected results.

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) {// The following return refers to vue-cli configuration // any required modules inside node_modules are extracted to vendor return (module. resource & amp &&/\. js $ /. test (module. resource) & module. resource. indexOf (path. join (_ dirname ,'.. /node_modules ') = 0)}), // The following is the key new commonsChunkPlugin ({name: 'charts', chunks: ['commons'] MinChunks: function (module) {return (module. resource & amp &&/\. 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)}) // if you want to, you can create another commonsChunkPlugin}

The result of the preceding Code is as follows: main. js, commons. js, and charts. js.