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

推奨読書:

vue の select 組み込みコンポーネントを使用する手順の詳細な説明

React を使用する場合は再レンダリングを避ける

以上がWebpackでパッケージ化された大きなファイルを扱う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。