Vue3 プロジェクトは cdn を使用して高速化します

最近、フロントエンドのパフォーマンス最適化の問題について学んでいました。以前行った小規模なプロジェクトを CDN を使用して最適化し、手をフリーズする準備ができないか疑問に思いました。まず、無料の CDN リソースを見つけることです
。インターネットなので説明は省略しますが、私が使っているものは以下です。

样式文件放在head里面
<link href="https://cdn.bootcdn.net/ajax/libs/vant/3.4.3/index.css" rel="stylesheet"> 

js文件放在body里面
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.3/vue-router.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0/vuex.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vant/3.4.3/vant.js"></script>

注意点は2つあります

vue に関連するリソースがある場合、vue も cdn リソースを使用する必要があります。たとえば、vue はローカル依存関係にすることはできませんが、vuex は cdn リソースです。このようにすると、vuex 内の vue に関連する部分は vue を認識しなくなります。
vue の紹介は一番上に配置する必要があります

次に、vue.config.js で次のように設定します。そのようなファイルがない場合は、プロジェクトのルートディレクトリに自分で作成します。

const objExternals = {
    
    
  // CDN 的 资源（和vue相关的） 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
  'vue': 'Vue',
  // 属性名称 Vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，
  // 不去 node_modules 中找，而是去找 全局变量 Vue
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios',
  'vant': 'vant'
}
module.exports = {
    
    
  publicPath: './',
  configureWebpack: {
    
    
  //判断在生产环境就使用cdn, 看个人项目情况
    externals: process.env.VUE_APP_STAGE === 'LOCAL' ? {
    
    } : objExternals
  },
}

最後は前回の import メソッドの変更です vuex、vue-router、axios などは変更ありませんが、vant などのサードパーティライブラリは変更が必要ですこれは前回の参照メソッド main.js
です

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'vant/lib/index.css'
import {
    
    Swipe, SwipeItem , Tab, Tabs, Progress, Form, Field, 
  CellGroup,Dialog, List, Popup, Toast, SwipeCell, Button, Cell, Lazyload,
  Overlay,Skeleton, PullRefresh, Badge} from 'vant'

import {
    
     useIntersectionObserver } from '@vueuse/core'
const app = createApp(App)
app.use(store)
  .use(router)
  .use(Swipe)
  .use(SwipeItem)
  .use(Tab)
  .use(Tabs)
  .use(Progress)
  .use(Form)
  .use(Field)
  .use(CellGroup)
  .use(Dialog)
  .use(List)
  .use(Popup)
  .use(Toast)
  .use(SwipeCell)
  .use(Button)
  .use(Cell)
  .use(Lazyload,{
    
    
    HomeView:true,
    highQualitySongsRec:true,
    newMusic:true,
    musicSwiperItem:true,
    iconList:true,
    musicListTop:true,
    musicList:true
  })
  .use(Overlay)
  .use(Skeleton)
  .use(PullRefresh)
  .use(Badge)
app.mount('#app')

cdnを使ってインポートする方法

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import {
    
     useIntersectionObserver } from '@vueuse/core'
const app = createApp(App)
app.use(store)
  .use(router)
  .use(vant)  //多的
  .use(vant.Lazyload,{
    
      //懒加载需要手动注册
    HomeView:true,
    highQualitySongsRec:true,
    newMusic:true,
    musicSwiperItem:true,
    iconList:true,
    musicListTop:true,
    musicList:true
  })
app.mount('#app')

(vant) を手動で使用するだけで済み、コンポーネントの使用方法は vant 公式 Web サイトの紹介に記載されています。簡単な例を示します。Toast を使用したい場合は、vant.Toast( ) を直接実行すると、プロジェクトが正常に実行され
、package.json 内の対応する依存関係を削除できます。

最後に、パッケージ化して前後のパッケージボリュームの比較を確認します。前
:
ここに画像の説明を挿入
後:

cdn リソースをインポートした後、パッケージ化されたボリュームは元のボリュームのわずか 46% です。これにより、
リソースの取得が高速化されるだけでなく、パッケージのボリュームが減り、最初の画面の読み込み時間を効果的に短縮できます
。ただし、いくつかの欠点があります。

無料の CDN リソースがダウンするとプロジェクトもダウンするため、自分の小さなプロジェクトを再生するのに適しています。または、より安定したサーバーを自分でセットアップすることもできます。
vant のコンポーネントなど、サードパーティライブラリのコンポーネントはオンデマンドでインポートできません。
ご質問がある場合は、お問い合わせください~

Vue3 プロジェクトは cdn を使用して高速化します

おすすめ