序文Vue プロジェクトが開発された後、プロジェクトをパッケージ化してリリースする前に、プロジェクトの最適化という重要な操作が行われます。これはプログラマーにとってもプラスになります。この記事の手順に従って、プロジェクトを最適化する方法を確認してください。 1. ルーティングの遅延読み込み1. ルートの遅延読み込みが必要なのはなぜですか?プロジェクトを実行したところ、ページに入るとすぐにすべての js ファイルと css ファイルが読み込まれることがわかりました。このプロセスは非常に時間がかかります。 2. ルートの遅延読み込みを実装する方法Vue 公式ドキュメント: ルーティングの遅延読み込み コードは次のとおりです(例): { パス: '/login', コンポーネント: () => import('@/views/login/index'), 非表示: true }, 3. ルートの遅延読み込みにおけるマジックコメントコメントに webpackChunkName を指定することで、このファイルの名前をカスタマイズできます。 コードは次のとおりです(例): コンポーネント = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue") 2. パッケージサイズを分析する 1. 需要パッケージ化されたファイル内の各ファイルのサイズを知りたいです。コードを分析して最適化できるようにするためです。 2. パッケージ分析ファイルの生成方法ターミナルで npm run preview -- --report を実行します。このコマンドは、エントリ ポイント main.js から依存関係分析を実行し、各パッケージのサイズを分析します。最後に、生成された dist フォルダーに report.html ファイルが生成されます。これを開くと、プロジェクトで使用されているファイルが占めるスペースを確認できます。 3. Webpack構成ではパッケージ化は除外される1. 需要生成されたパッケージ ファイルから、あまり使用されないパッケージを除外します。 たとえば、上図に示す xsxl.js と element.js は、生成されるファイルから除外できます。 2. 包装を除外するvue.config.js を見つけて、次のように外部項目を追加します。 コードは次のとおりです(例): Webpack を構成する: { //シングルページアプリケーションのタイトルを設定します。ページ名: name, 外部: { /** * 外部オブジェクト属性の解析。 * 基本フォーマット: * 「パッケージ名」: 「プロジェクトで導入された名前」 * */ 'vue': 'vue', '要素-ui': 'ElementUI', 'xlsx': 'XLSX' }, 解決する: { エイリアス: { '@': 解決('src') } } } IV. オンラインリソースの引用1. 需要前の手順を実行した後、生成されたパッケージは大幅に小さくなりました。ただし、これらの依存パッケージがないと、プロジェクトをオンラインで実行することはできません。次に、コードの操作をサポートするために、ネットワーク内のリソースを参照する必要があります。 2. CDN
利点:
3. 実装手順注: 開発環境では、ファイル リソースは引き続きローカルの node_modules から取得できますが、プロジェクトがオンラインの場合にのみ外部リソースを使用する必要があります。この時点では、環境変数を使用して区別することができます。詳細は以下の通りです。 コードは次のとおりです(例): vue.config.js ファイル内: 外部を {} にします cdn = { css: [], js: [] } とします。 const isProduction = process.env.NODE_ENV === 'production' // 本番環境かどうかを判定する if (isProduction) { 外部 = { /** * 外部オブジェクト属性分析: * 「パッケージ名」: 「プロジェクトで導入された名前」 */ 'vue': 'vue', '要素-ui': '要素', 'xlsx': 'XLSX' } cdn = { css: [ 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css スタイルシート], js: [ // 最初に vue が必要です。 'https://unpkg.com/[email protected]/dist/vue.js', // vuejs 'https://unpkg.com/element-ui/lib/index.js', // 要素 UI js 'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', // xlsx ] } } webpack 構成外部構成項目 Webpack を構成する: { //シングルページアプリケーションのタイトルを設定します。ページ名: name, 外部: 外部、 解決する: { エイリアス: { '@': 解決('src') } } } html-webpack-plugin 経由で index.html に挿入されます: vue.config.js ファイルで設定します。 チェーンWebpack(config) { config.plugin('preload').tap(() => [ { rel: 'プリロード', ファイルブラックリスト: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], 含める: '初期' } ]) //cdn 変数を挿入します (パッケージ化時に実行されます) config.plugin('html').tap(args => { args[0].cdn = cdn // プラグインにcdnを設定する argsを返す }) // 残りは省略します... } public/index.html を見つけて、CDN Config を設定して css と js を順番に挿入します。 ヘッドの内容を次のように変更します。 <ヘッド> <メタ文字セット="utf-8"> <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= webpackConfig.name %></title> <!-- スタイルをインポート --> <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <link rel="スタイルシート" href="<%=css%>"> <% } %> <!-- JS をインポート --> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> <script src="<%=js%>"></script> <% } %> </head> 5. console.log をパックして削除する1. 需要プロジェクトがパッケージ化されて起動したら、コード内のすべてのconsole.logを削除します。 2. コードデモンストレーションvue.config.js ファイルで設定します。 コードは次のとおりです(例): チェーンWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true 引数を返す }) } 要約するこれで、Vue プロジェクトの最適化とパッケージ化のフロントエンドに不可欠なボーナス項目に関するこの記事は終了です。Vue プロジェクトの最適化とパッケージ化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: DockerにTomcatコンテナを追加したときにホームページにアクセスできない問題の解決方法
>>: MySQL 8の新機能である降順インデックスの基礎となる実装の詳細な説明
ワームは、その名前が示すように、自ら複製し、その数は倍増、つまり指数関数的に増加します。 MySQL...
画像リンク <img src="" /> jsを使用してURLが有効...
1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...
まず、効果図の下にコードを添付します <!DOCTYPE html> <html&...
nohup コマンドUnix/Linux を使用する場合、通常はプログラムをバックグラウンドで実行す...
目次原理ソースコード分析委任されたイベントバインディングすべてのサポートされているイベントを聴くネイ...
重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...
また、多くの場合、メンテナンスのために Web サイトを少なくとも数分間オフラインにする必要がありま...
目次すべてのストレージエンジンを表示InnoDB ストレージ エンジンMyISAM ストレージエンジ...
Centos7 の起動プロセス: 1.post(電源投入時のセルフテスト) 電源投入時のセルフテスト...
Dockerはプライベートレジストリ内のイメージを照会または取得するために、 docker 検索 1...
目次移行ツールアプリケーション変換mysql8.0 ドライバ パッケージを追加データソース構成の変更...
目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...
Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...
HTTP/1.1 プロトコルで指定されている HTTP リクエスト メソッドには、OPTIONS、...