ダークホース] バックグラウンド管理 - ルーティングの遅延読み込み

ビルドプロジェクトをバンドルすると、JavaScript バンドルが非常に大きくなり、ページの読み込みに影響を与える可能性があります。異なるルートに対応するコンポーネントを異なるコードブロックに分割し、ルートにアクセスするときに対応するコンポーネントを読み込むことができれば、より効率的になります。

具体的には、次の 3 つの手順が必要です。

① @babel/plugin-syntax-dynamic-import パッケージをインストールします。

② 設定ファイル babel.config.js でプラグインを宣言します。

③ ルートをオンデマンドでロードする形式に変更します。サンプルコードは次のとおりです。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')

ルートの遅延読み込みに関する詳細なドキュメントについては、次のリンクを参照してください。

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

foo と bar の両方のグループ名は group-foo と呼ばれます

これら 2 つのファイルは同時に同じ js ファイルにパッケージ化され、foo がリクエストされると、同時に bar もリクエストされます。

依存関係をインストールした後、以前のすべてのルートを遅延読み込み形式に再適合します。

const+ コンポーネントの名前、次にコンポーネントのグループ名とストレージパス、

どれをjsファイルに入れて、同じグループ名を使用しますか?

グループ名は通常、コンポーネントの名前コレクションとして名前が付けられます。

// import Login from '../components/login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/login.vue')
// import Home from '../components/home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/home.vue')
// import Welcome from '../components/welcome.vue'
const WelCome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/welcome.vue')

// import Users from '../components/user/Users.vue'
const  Users  = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/Users.vue')
// import Rights from '../components/power/Rights.vue'
const   Rights  = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
// import Roles from '../components/power/Roles.vue'
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')


// import Cate from '../components/goods/Cate.vue'
const  Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue')
// import Params from '../components/goods/Params.vue'
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue')

// import GoodsList from '../components/goods/List.vue'
const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue')
// import Add from '../components/goods/add.vue'
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/add.vue')

// import Order from '../components/order/Order.vue'
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
// import Report from '../components/report/Report.vue'
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')

ダークホース] バックグラウンド管理 - ルーティングの遅延読み込み

おすすめ