vueでcdnを使う #Vue.js

コードと説明でわかりやすく知識を学べる！

cdnとは?

cdn使用前と使用後

Vue
vue-router
echarts
axios
....

一度に導入し、オンデマンドローディングを行わない場合のリソースサイズ

総リソースは16.8Mで、まだ比較的大きく、今のところ、ES5コードにコンパイルされたbabelを加えなくても、すでにこの大きさです。

上記は開発環境で、Tree-Shakingを使用しない場合、合計16.8Mのリソースがロードされます；

CDNを使用せず、Tree-Shakingを使用して本番環境で冗長なコードを削除する場合、コードサイズは16.8Mよりわずかに小さくなりますが、依存関係のあるvue、vuexなどは依然としてchunk-vendorにパッケージされているため、あまり目立ちません。

main.js


import Vue from 'vue'
import App from './App.vue'
import ELEMENT from 'element-ui'
import "element-ui/lib/theme-chalk/index.css";
import axios from 'axios'
import * as echarts from 'echarts';
import VueRouter from 'vue-router'
import Vuex from 'vuex'
 import router from './router'
Vue.use(ELEMENT)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.prototype.$http = axios
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
new Vue({
 render: h => h(App),
 router
}).$mount('#app')

本番環境では、フレームマップ用のCDNはなく、vue-cli 3 scaffoldingが自動的にツリーシェイクを行います。

CDNアクセラレーションの有効化

以下の変更が必要です。 vue-cli 3 scaffolding、新しいvue.config.jsファイルをプロジェクトのルートディレクトリに作成する必要があります。

vue-cli 2 scaffoldingの場合、対応する設定を追加する必要がありますが、本質は同じです。

vue.config.js

module.exports = {
    'bar': {
        'foo': { 'a': 'Vue', 'obj': 'VueRouter', 'c': 'Vuex', 'b': 'axios', 'Bar': 'ELEMENT', 'A': 'echarts'
        }
    }
};

左側の名前は、「element-ui」パッケージからのimport elementUIの名前です。右側の「ELEMENT」は、 UMD 仕様に従ってエクスポートされたパッケージの名前です。

UMDは、ブラウザに外部公開されているパッケージ名をどのように表示するのですか？

element-uiを例にとると、これはcdnアドレスです。


!(function(e, t) {
 // tこれが実際のコードだ。
 // nodeがCommonJS仕様を使っているかどうかを判断する
 "object" == typeof exports && "object" == typeof module ? 
 // 是CommonJS-パッケージを直接導入する
 module.exports = t(require("vue")) : 
 // CommonJSでない場合は、AMDを判断する
 "function" == typeof define && define.amd ? 
 // はAMDロードメソッド、tはパッケージ固有の自己実行関数である。
 define("ELEMENT", ["vue"], t) : "object" == typeof exports ? exports.ELEMENT = t(require("vue")) : 
 // 上記2つではなく、ネイティブで、グローバルにロードされる。 ウィンドウオブジェクトにマウントされる。
 e.ELEMENT = t(e.Vue)
}
)("undefined" != typeof self ? self : this, function somepackage(e) {//   do something
})
// ELEMENT これはブラウザに乱暴につけられた名前だ。

あなたが見る必要があるのはコードの最初の部分だけで、somepackageパッケージの実装ではありません。

今はcdnなので、ブラウザが認識する方法でロードする依存関係を見つけることが問題です。

ライブラリの中には、CDNを使って公開されているパッケージ名を明示的に教えてくれるものもあります。

その他のパッケージ名については、同様の方法で

変更する文書

導入されたパッケージ名は、一般に公開されているパッケージ名と同じなので、何も変更する必要はないので、main.jsをコメントアウトしたパッケージcssは以下のようになります。


import Vue from 'vue'
import App from './App.vue'
import ELEMENT from 'element-ui'
// これはCDN経由でロードされている
// import "element-ui/lib/theme-chalk/index.css";
import axios from 'axios'
import * as echarts from 'echarts';
import VueRouter from 'vue-router'
import Vuex from 'vuex'
 import router from './router'
Vue.use(ELEMENT)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.prototype.$http = axios
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
new Vue({
 render: h => h(App),
 router
}).$mount('#app')

public/index.htmlを修正

<!DOCTYPE html>
<html lang="en">
 <head>
 <!--要素-uicssリソースは-->
 <link href="https://..///-/../-/.ss" rel="stylesheet">
 </head>
 <body>
 <div id="app"></div>
 <script src="https://..////../..js"></>
 <script src="https://..////../..js"></>
 <script src="https://..///-/../-..js"></>
 <script src="https://..///-/../.js"></>
 </body>
</html>

ここでは、bootcdn が提供するオンラインリソースを直接使用します。

下のスクリーンショットは、開発環境をロードしているところです。リソースの全体的なパッケージサイズが小さくなっていることがわかりますが、これはGZip圧縮をオンにしてツリーシェイキングを使う前の状態です。

図 - 開発環境のスクリーンショット - ツリーシェイクなしのリソースロード

総合資源 3.1百万ドル

本番環境のスクリーンショット、cdn使用、ツリーシェイクあり、gzip圧縮なし

図 - cdnを使用し、ツリーシェーキングを行い、gzip圧縮を行わない本番環境のスクリーンショット。

全体リソース 1.8M、チャンク・ベンダー 25.7k

梱包、花火の発生

vue-cli3 scaffoldには webpack-bundle-analyzer組み込まれています。

vue-cli4+以上では、以下の個別の設定を参照してください。

npm uninstall axios echarts element-ui vue vue-router vuex --save

package.jsonに以下のコマンドを追加します。

"scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint",
 // 以下を追加する。
 "analyze": "vue-cli-service build --report"
},

実行すると花火が生成され、distディレクトリに格納されます。

npm run analyze

花火グラフを表示するには、file:// xxx/report.htmlのようなファイルプロトコルではなく、 http://:80/ ようなサービスとして実行する必要があります。

推奨パッケージは live-server です。

// グローバル・インストール
npm i live-server -g
// distディレクトリに移動する
cd dist
live-server report.html

GZip圧縮をオンにすると、ファイルサイズが小さくなります。

全体的なリソースは約11kのみ

GZip 圧縮を有効にした nginx のデプロイ

コードをパッケージ化するには、dis以下のすべてのファイルをnginxが指定したディレクトリにコピーします。

ウィンドウ下でnginxを起動します。

// cmdを開いて、直接nginxの出力がない場合は、最高の出力、つまり、起動成功である！
nginx

GZip圧縮を開始しない場合はこのようになります。

開封後

ソース4.4k、圧縮2.2k

nginxの設定

http {
 gzip on;
 gzip_static on;
 gzip_min_length 1024;
 gzip_buffers 4 16k;
 gzip_comp_level 2;
 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd- application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
 gzip_vary off;
 gzip_disable "MSIE [1-6]\.";
}

圧縮されていないファイルの種類を考えたい場合は、gzip_typesが正しく設定されていない可能性があり、gzip_comp_level圧縮レベルにも注意を払う必要があり、高い圧縮レベル、それはサーバがより多くの時間を費やす必要があることを意味します。

nginxのコンフィギュレーションを変更した後、必ず再起動してください。その後、ウィンドウがnginxを起動し、それが停止することはできませんが見つかりました、タスクの末尾の内側の'詳細'に手動で'タスクマネージャ'を使用してください、linuxは、この場合には存在しません！linuxではこのようなことはありません。

オンライン・サイトでGzip圧縮がオンになっているかどうかを確認ローカル・サービスをエクストラネットにマッピングするイントラネット侵入ツールがない限り、これはローカルではなくオンラインにしかできません。

vue-cli4, vue-cli5 analyzer

#  
npx vue-cli-service -help

vue-cli3 scaffoldingに--reportオプションがないことに気づきました。

analyzerは 基本的に手動で設定できるwebpackプラグインです。

依存関係のインストール

npm i cross-env webpack-bundle-analyzer -D
# ところで、私のデモのいくつかのコア・バージョンに印をつけた。
vue-cli-service： 4.4.6
"cross-env": "^7.0.3",
"webpack-bundle-analyzer": "^4.5.0"

package.json スクリプトの追加

{
 "scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "analyzer": "cross-env NODE_ENV=analyzer vue-cli-service build"
 }
}

vue.config.js


const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
/**
 * 静的CDNファイル
 */
const assetsCDN = {
 externals: {
 // 左側のキーはプロジェクトで導入された名前、右側の値はパッケージが公開する名前である。
 vue: 'Vue',
 'vue-router': 'VueRouter',
 vuex: 'Vuex',
 'element-ui': 'ELEMENT'
 },
 css: [
 '//cdn.jsdelivr.net/npm/element-ui@2.15.0/lib/theme-chalk/index.css'
 ],
 js: [
 '//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js',
 '//cdn.jsdelivr.net/npm/vue-router@3.4.9/dist/vue-router.min.js',
 '//cdn.jsdelivr.net/npm/vuex@3.6.0/dist/vuex.min.js',
 '//cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js',
 '//cdn.jsdelivr.net/npm/element-ui@2.15.0/lib/index.js'
 ]
}
function injectCDN(config) {
 // 非本番環境ではCDNを有効にしない
 if(process.env.NODE_ENV !== 'production') return
 config.set('externals', assetsCDN.externals)
 config.plugin('html').tap(args => {
 args[0].cdn = assetsCDN
 return args
 })
}
module.exports = {
 chainWebpack(config) {
 injectCDN(config)
 }
}

public/index.html

<!DOCTYPE html>
<html lang="">
 <head>
 <meta charset="utf-8">
 <meta http-iv="--le" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 <title><%= htmlWebpackPlugin.options.title %></title>
 <!-- CDNを使用したCSSファイル -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
 <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
 <% } %>
 </head>
 <body>
 <div id="app"></div>
 <!-- built files will be auto injected -->
 <!-- CDNを使用したJSファイル -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
 <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
 <% } %>
 </body>
</html>

注意事項

vueでcdnを使う

cdnとは?

cdn使用前と使用後

CDNアクセラレーションの有効化

UMDは、ブラウザに外部公開されているパッケージ名をどのように表示するのですか？

梱包、花火の発生

GZip 圧縮を有効にした nginx のデプロイ

vue-cli4, vue-cli5 analyzer

依存関係のインストール

package.json スクリプトの追加

vue.config.js

public/index.html

Read next