CDNを使用してvueプロジェクトに導入する

序文

CDN (Content Delivery Network) とは、リソースを要求する方法、つまり、スクリプトヘッダーを通じて対応するスクリプトリソースを要求する方法を指します。プロジェクトで構成した後、npm パッケージ管理ツールを通じて構成済みのパッケージをダウンロードする必要はありません。
目的: 参照される外部 js ファイルと css ファイルを分離し、vendor.js にコンパイルしないようにします。代わりに、ブラウザーが複数のスレッドを使用して、vendor.js、外部 js などを非同期的に読み込めるように、リソースの形式で参照されます。 . 、ホームページの表示を高速化する効果を実現します。

1.vue.config.jsで設定する

私は、、、、、vueをvuex引用しましvue-routerたaxios。(リクエスト、cdn の方が遅い)element-uiechartselement-uiecharts

//生产环境标记
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
//配置引用cdn的js、css地址
const cdn = {
    css: [
        'https://unpkg.com/[email protected]/lib/theme-chalk/index.css'
    ],
    js: [
        'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js',
        'https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js',
        'https://unpkg.com/[email protected]/lib/index.js',
        'https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js'
    ]
}
//配置打包时使用CDN节点（加入externals外部扩展）， 忽略打包的第三方库
//左面放package.json中的扩展的名称,右面放项目依赖的名称(项目初始化要用的名称)
const externals = {
  // 属性名称 vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，不去 node_modules 中找，而是去找全局变量 Vue（其他的为VueRouter、Vuex、axios、ELEMENT、echarts，注意全局变量是一个确定的值，不能修改为其他值，修改为其他大小写或者其他值会报错，若有异议可留言）
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    'element-ui': 'ELEMENT',
    'echarts': 'echarts'
}
chainWebpack(config) {
        if (IS_PRODUCTION) {
            config.plugin('html').tap(args => {
                args[0].cdn = cdn
                return args
            })
            //视为一个外部库，而不将它打包进来
            config.externals(externals)
        }
    }

2. public/index.html ファイルで設定します。

設定にはwebpack付属のhtmlプラグインを使用し、CDNを使用するかどうかの判定をindex.htmlに追加します。htmlWebpackPlugin.optionsはvue.configのconfig.plugin('html')のプラグイン属性を使用します。。

  <!-- 使用CDN的CSS文件 -->
     <% for (var i in
     htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
     <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
     <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
   <% } %>
    <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
   <% for (var i in
     htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
     <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
   <% } %>

3. 間違いやすいポイント

1、ルーターが定義されていません

解決策: ルーターを「VueRouter」に変更します。

2、キャッチされない TypeError: 不正なコンストラクター

解決策: externals の「element-ui」の値を変更します。

const externals = {
    'element-ui': 'ELEMENT',
}