【フロントエンドカートンの最適化構想と方案01】webpackは2.2.1からwebpack 4全記録にアップグレードする(現在はwebpack 3.8.1にアップグレードする)

1499 ワード

babel webpack 最適化 vue.js javascript

背景

現在のwebpackのバージョンは2.2.1であり、webpackの現在の最新バージョンは4.39.3

に更新されている.

直接需要

フロントエンドページ比較カートン

理由1

ファイルはいずれもrequireのオンデマンドロードモードを採用しており、大きなファイルをクリックするとロード時間が長い.ページにロードするjsファイル2.4 mは、

をロードするのに2-3秒かかります.
理由2

トップページの内容が多すぎると、httpリクエストが多く発行され、この時点で他のページをクリックすると、リクエストがキューに並び、トップページのリクエストが完了するまで待たなければ開始できません.例えばトップページをクリックしてトップメニューバーページを直接クリックすると、Queueingの時間は6.77 sに達し、その後、現在のページのリクエストの送信が開始されます.合計ロード時間は7.10 s

しかありません

解決策

理由1

方法1:prefetchプリロードを採用し、トップページの空き時間から後続の他のページのファイルのロードを開始する.

メソッド2:バックエンドnginxをコード圧縮し、2.4 mのファイルを300 k程度に圧縮できます.

理由2

トップページの要求が多すぎる場合、ニュースバーをスクロールするなどの情報に対して、スクロール怠惰なロードを行い、トップページが多すぎる要求を処理しないようにすることができる.

現在の最適化開発計画

原因1を解決する方法1

preload-webpack-pluginというプラグイン

を採用

公式文書

var PreloadWebpackPlugin = require('preload-webpack-plugin');
// rel    'prefetch' / 'preload'
// include                   
...
new PreloadWebpackPlugin({
      rel: 'prefetch',
      include: 'Flow'
    }),

プリロードpreloadおよびprefetch

について

実際には、webpack 4は直接プリロードとプリロードのソートを設定することができ、次はwebpack 4にアップグレードした後に最適化されます.参照文書

開発ニーズ

chunkという名前のため、chunk nameを提供するために特別な注釈構文を使用します(Webpack>2.4が必要です).Webpackのアップグレードを行うには、まずwebpack 3.8.1

にアップグレードします.