Webpack Package File size solution (code splitting)

Optimization comparison:

Before optimization: index.html introduces a main.js file that is more than 2M in volume.

Optimized after: Index.html introduced Main.js, Commons.js, Charts.js, Other.js. To achieve the purpose of dividing the main.js equally. Within 300k per file control. (If happy 100k is no problem)

A bunch of libraries and tools to use:

Vue, Webpack, Babel, Highcharts, Echarts, jquery, html2canvas****** this to omit some m code

Problem:

Development environment with Webpack after the discovery of a single JS file 5m.

The production environment is reduced to 2m thanks to the webpack configuration of the vue-cli.

Solution:

Search Various solutions: require.ensure, require dependent, multi-entry, commonschunkplugin**** this effort to save some programs

The network is similar to the bottom of the solution is too many, but not to achieve the desired effect

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) {// Below return reference VUE-CLI Configuration//any required modules inside Node_modules is extracted to vendor return (Modu Le.resource &&/\.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 &&/\.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, you can have a new commonschunkplugin}

The result of the above code package:main.js, Commons.js, Charts.js

Webpack Package File size solution (code splitting)