パッケージのファイルサイズが大きすぎる場合の対処方法

今回は、パッケージ化されたファイルのサイズが大きすぎる場合の対処方法を紹介します。 以下に、パッケージ化されたファイルのサイズが大きすぎる場合の注意点を示します。

最適化の比較:

最適化前: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***** *this いくつかの m コードを省略するには

問題:

開発環境で webpack を使用した後、単一の js ファイルが 5m であることがわかりました。

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 サイトの他の関連記事に注目してください。

推奨読書:

vueコンポーネントにより無限の複数選択メニューが作成される

Macにnodejs、npm、cnpmをインストールする

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