blog

webpackのマルチエントリファイルパッケージングビルドのスタイルの損失。

元のプロジェクトには1つのエントリファイルapp.jsがあるだけで、今、我々はログイン認証のためのエントリファイルoAuth.jsを追加する必要があります、私たちは、梱包とビルドした後、我々は、oAu...

Nov 12, 2020 · 1 min. read
シェア

背景

元のプロジェクトにはapp.jsというエントリーファイルしかありませんが、新たにoAuth.jsというログイン認証のエントリーファイルを追加する必要があります。



理由

アプリとoAuthには同じログイン機能があり、どちらのファイルもloginコンポーネントを使用していますが、パッケージング後のapp.cssにはログイン用のスタイルがありません。

2つのファイルの導入方法を分析した結果、アプリはルートを非同期で読み込み、oAuthは同期で読み込んでいることがわかりました。webpackはログインに関連する同期スタイルをoAuth.cssにパッケージ化しましたが、アプリは非同期読み込みのためにスタイルを失いました。

解決方法

短所:app.cssのサイズが巨大になり、プロジェクト内のcssファイルが65kから229kに増大します。

oAuth.jsファイルでは、oAuthファイルの導入は、非同期に

app.jsで、ログイン参照に関連するルートを同期導入メソッドに変更します。



Read next

第46回 パラメータを渡すVueルーティングの基本的な使い方

はじめに\n\nそれから、ルートによって渡されるパラメーターには次の2つの方法があります:\nパラメータを渡すためにクエリを使う、たとえば: /login?id=1\nparams を使う、例:/login/1\nクエリを使ってパラメータを渡す\n\n

Nov 11, 2020 · 3 min read