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

今回は、Webpack パッケージ ファイルが大きすぎる問題を解決するためのアイデアをいくつか紹介します。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*** ** *ここでは一部の m コードを省略します

問題:

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

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

解決策:

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

以下に類似した解決策が多すぎますが、どれもありませんそのうちの 3 つが期待どおりの結果を達成できます

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
 
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS から画像の白黒設定へ

vue select コンポーネントを有効または無効にする方法の詳細な説明

以上がWebpack パッケージ ファイルのサイズが大きすぎる問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。