So lösen Sie das Problem, dass die Dateigröße des Webpack-Pakets zu groß ist

Optimierungsvergleich:

Vor der Optimierung: index.html führt eine main.js-Datei mit einer Größe von mehr als 2 MB ein.

Nach der Optimierung: index.html führt main.js, commons.js, charts.js und other.js ein. Um den Zweck der gleichmäßigen Aufteilung von main.js zu erreichen. Jede Datei wird innerhalb von 300 KB kontrolliert (Wenn Sie zufrieden sind, sind 100 KB kein Problem)

Eine Reihe verwendeter Bibliotheken und Tools:

vue, webpack, babel, highcharts, echarts, jquery, html2canvas* *****Einige M-Codes werden hier weggelassen

Problem:

Nach der Verwendung von Webpack in der Entwicklungsumgebung wurde eine einzelne JS-Datei von 5 m gefunden.

Die Produktionsumgebung wird mithilfe der Webpack-Konfiguration von vue-cli auf 2 m reduziert.

Lösung:

Suche nach verschiedenen Lösungen: require.ensure, require dependency, multiple enters, commonsChunkPlugin**** Hier sind einige Lösungen, um Aufwand zu sparen

Das Netzwerk ist Ähnlich wie unten. Es gibt zu viele Lösungen für dieses Problem, aber keine davon kann die erwarteten Ergebnisse erzielen.

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

Die optimale Lösung:

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

}

Das Ergebnis der Verpackung der obige Code: main.js, commons.js, charts.js