前回の記事でいくつかの webpack 最適化構成を紹介した後、引き続きいくつかの最適化ソリューションについて学びました。
プリロード/プリフェクト
Code Splitコード分割を使用した後、import動的インポート構文を使用してコードをオンデマンドでロードしますが、サイズが大きすぎる単一ファイルのリソースに遭遇すると、ユーザーは依然として行き詰まりを感じます. ブラウザがアイドル状態のときに後で使用されるリソースをロードしたい. 使用できpreloadますprefecth
プリロード
preload事前にロードが必要なリソースをブラウザに宣言しておき、ネットワークの消費を待たずに、リソースが実際に使用されるとすぐに実行するプリロード方式です。
プリフェッチ
prefetch予測読み込み。その機能は、将来使用される可能性のある特定のリソースをブラウザに伝えることであり、ブラウザは、アイドル状態のときに対応するリソースを読み込みます。ユーザーの行動を予測できる場合、そのリソースを読み込みます。中古。使い方はプリロードと同じです。
共通点
- リソースをロードし、実行しません
- キャッシュを持つ
- 特定の互換性の問題があります
互換性
preLoad の互換性は prefetch よりも比較的優れており、使用することをお勧めします。preLoad
2つの方法の互換性を見る
利用方法
1. インストール
npm install --save-dev preload-webpack-plugin
2.構成
const PreloadWebpackPlugin = require('preload-webpack-plugin');
plugins: [.... new PreloadWebpackPlugin({ rel: 'preload', //定义链接类型include: 'script' // or 'style' 资源类型// rel:'prefecth' })
]
まとめた結果は以下の通り
<link href="js/app.js" rel="preload" as="script" />
<link href="js/chunk-vendors.js" rel="preload" as="script" />
Core.js
一般に、babel は Js の互換性を処理するために使用され、 @babel/preset-preset-env スマート プリセットは互換性の問題を処理するために使用されます。アロー関数や拡張演算子など、ES6 の一部の文法はコンパイルおよび変換できますが、非同期関数、promise オブジェクト配列インクルードの一部のメソッドなどは処理できません.私たちの js コードにはまだ互換性の問題があるためCore.js、js を追加する必要があります.互換性 問題は完全に解決されました。
Core.jsとは
core.js は、ES6 以降の API を処理するために特別に設計されたポリフィル (パッチ) です。
使用する
1. インストール
npmi core-js
2.構成
- main.js を変更する
全量引入
import 'core-js'全量引入包的体积比较大
按需加载 比如只是用promise
import 'core-js/es/promise'
- または、必要
babel.config.jsに応じて core.js のモジュールを自動的にインポートするようにファイルを変更します。
module.exports = {presets: [[ '@babel/preset-env',{corejs: 3,useBuiltIns: 'usage', },],],
}
重さ
PWA を使用すると、プロジェクトにオフラインでアクセスできるため、プロジェクトの信頼性が向上します。
使用する
1.プラグインをインストールする
npm install workbox-webpack-plugin --save-dev
2. webpack の設定を変更する
const WorkboxPlugin = require('workbox-webpack-plugin');new WorkboxPlugin.GenerateSW({ // 这些选项帮助快速启用 ServiceWorkers // 不允许遗留任何“旧的” ServiceWorkers clientsClaim: true,skipWaiting: true,}),
3. main.js 構成を変更して、serviceWork を開始します。
// 在mains加上注册代码，serviceWorker判断兼容性问题兼容性较差
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then((registration) => {console.log('SW registered: ', registration)}).catch((registrationError) => {console.log('SW registration failed: ', registrationError)})})
}
//
開発モードでは、再度インストールして開発サーバーをservice起動
インストール
npm i serve
コマンドを実行
serve dist (dist为本地部署部署的目录)
やっと
フロントエンド情報パッケージは、すべての人に用意されています。54冊、2.57Gフロントエンド関連の電子書籍「フロントエンドインタビュー集（回答・分析付き）」、難解・要点解説動画チュートリアル（フルセット）を収録。
困っている友達は、下のカードをクリックして無料で受け取り、共有できます