Webpackパッケージのファイルサイズが大きすぎる問題の解決方法-jsチュートリアル-php.cn

最適化の比較:

最適化前: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