vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化

头上一片天空

已于 2023-10-19 15:35:51 修改

阅读量2.7k

点赞数 2

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2023-03-04 12:23:26 首次发布

本文链接：https://blog.csdn.net/qq_40739917/article/details/129332832

版权

VUE 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化

这个适合 Vue版本为 2.6.10 ！！！！
未引入 CDN前 main.js
更改CDN方式引入
CDN 服务商推荐

这个适合 Vue版本为 2.6.10 ！！！！

未引入 CDN前 main.js

// 依赖使用 npm 方式引入
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'

Vue.config.productionTip = false

const vueMain = new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

export default vueMain

更改CDN方式引入

在 vue.config 中引入 CDN

文件: vue.config.js ，如果没有 vue.config.js 那么这个教程不适合！！这个只适合Vue版本为 2.6.10

// CDN资源
const cdn = {
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    'element-ui': 'ELEMENT'
  },
  // externals 资源对应 css cdn地址
  css: [
    'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css'
  ],
  // externals 资源对应 JS cdn地址
  js: [
    'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
    'https://cdn.jsdelivr.net/npm/vue-router@3.0.2/dist/vue-router.min.js',
    'https://cdn.jsdelivr.net/npm/vuex@3.1.0/dist/vuex.min.js',
    'https://cdn.jsdelivr.net/npm/axios@0.18.1/dist/axios.min.js',
    'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js'
  ]
}


module.exports = {
 	// CDN配置
  chainWebpack(config) {
    // 引入CDN
    // 告诉webpack需要排除的依赖名称和挂载在window上的对象属性名称。
    config.set('externals', cdn.externals)
    // 这里的作用是在后面index.html页面中通过link，script标签加载这些cdn链接。
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
    // it can improve the speed of the first screen, it is recommended to turn on preload
    // it can improve the speed of the first screen, it is recommended to turn on preload
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        // to ignore runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }])

    // when there are many pages, it will cause too many meaningless requests
    config.plugins.delete('prefetch')

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    config.when(process.env.NODE_ENV !== 'development', config => {
      config.plugin('ScriptExtHtmlWebpackPlugin').after('html')
        .use('script-ext-html-webpack-plugin', [{
          // `runtime` must same as runtimeChunk name. default is `runtime`
          inline: /runtime\..*\.js$/
        }]).end()
      config
        .optimization.splitChunks({
          chunks: 'all',
          cacheGroups: {
            libs: {
              name: 'chunk-libs',
              test: /[\\/]node_modules[\\/]/,
              priority: 10,
              chunks: 'initial' // only package third parties that are initially dependent
            },
            elementUI: {
              name: 'chunk-elementUI', // split elementUI into a single package
              priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
              test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order-record-manage to adapt to cnpm
            },
            commons: {
              name: 'chunk-commons',
              test: resolve('src/components'), // can customize your rules
              minChunks: 3, //  minimum common number
              priority: 5,
              reuseExistingChunk: true
            }
          }
        })
      // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
      config.optimization.runtimeChunk('single')
    }
    )
  }
}

index.html 加载 cdn资源

文件: inidex.html, 一般是在 public 文件夹下

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= webpackConfig.name %></title>

   
  <!-- 遍历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文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script" />
  <% } %>
</head>

<body>
  <div id="app"></div>
  <!-- 遍历从cdn配置里面加载js文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>

  <script></script>
</body>

</html>

使用CDN引入资源后的main.js

把需要依赖引入的代码全部去掉了 , 例如 import elementUi from 'element-ui'

// 部分 依赖使用 cdn方式引入
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'

Vue.config.productionTip = false
const vueMain = new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
export default vueMain

如果引入CDN后组件不生效

1、请检查引入的时候组件名称是否是 CDN资源中的别名
2、这个只有生产模式才会使用CDN，本地开发模式走的还是NPM！！！所以请打包运行测试
在这里插入图片描述

CDN 服务商推荐

BootCDN: BootCDN

jsDelivr: jsDelivr

头上一片天空

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化

请检查引入的时候组件名称是否是 CDN资源中的别名。那么这个教程不适合！这个只适合Vue版本为。把需要依赖引入的代码全部去掉了 , 例如。, 一般是在 public 文件夹下。
复制链接

扫一扫