Webpackパッケージのファイルサイズが大きすぎる問題の解決方法

最適化の比較:

最適化前:index.html には、2M を超えるサイズの main.js ファイルが導入されています。

最適化後:index.htmlにはmain.js、commons.js、charts.js、other.jsが導入されています。 main.jsを均等に分割するという目的を達成するため。各ファイルは 300k 以内で管理されます (満足であれば 100k でも問題ありません)

使用したライブラリとツールの束:

vue, webpack, babel, highcharts, echarts, jquery, html2canvas****** Iここでは省略します いくつかの m コード

問題:

開発環境で webpack を使用した後、5m の単一の js ファイルを見つけました。

vue-cliのwebpack設定のおかげで本番環境は2mに縮小されました。

解決策:

さまざまな解決策を検索してください: require.ensure、require dependency、複数のエントリ、commonsChunkPlugin****労力を節約するための解決策をいくつか紹介します

インターネット上には以下のような解決策が多すぎますが、それらはすべて最新です 期待どおりではありません

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

最適な解決策:

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

}

上記のコードのパッケージ化の結果: main.js、commons.js、charts.js