前端性能优化【vue-cli使用CDN引入】

最新推荐文章于 2024-02-21 15:13:25 发布

前端菜菜怂

最新推荐文章于 2024-02-21 15:13:25 发布

阅读量994

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/weixin_43950643/article/details/108110313

版权

Vue学习专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1. index.html引入：

在public文件中的index.html中引入，要注意引入的顺序，vue必须在前面

<body>
  <div id="app"></div>
  <script src="//unpkg.zhimg.com/vue@2.6.11/dist/vue.min.js"></script>
  <script src="//unpkg.zhimg.com/vue-router@3.2.0/dist/vue-router.min.js"></script>
  <script src="//unpkg.zhimg.com/vuex@3.4.0/dist/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.8.0/echarts.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
</body>

2. vue.config.js配置：

在vue.config.js文件中，增加externals，将引用的外部模块导入，如下：

module.exports = {
  configureWebpack: {
    externals: {
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex",
      "echarts": "echarts",
      "highlight.js":"highlight.js"
    }
  }
}

注意一点：
格式为 ‘xxx’ : ‘bbb’, 其中，xxx表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，echarts为echarts，vue-router为VueRouter.

3. 所需文件中使用(以vue-router为例)

以下是我使用的方法，在所需的文件中引用，没有报错

import VueRouter from 'vue-router'
const ArticlesDetail = ()=>import("../views/articleDetail/ArticlesDetail")
const MainLogin = () => import("../components/common/MainLogin")

很奇怪的是，网上很多文章说去掉原有的引用，比如

去掉import，如：
// import Vue from 'vue'
// import Router from 'vue-router'
去掉Vue.use(XXX)，如：
// Vue.use(Router)

但是，当我去掉这些时，会报错，要是有人知道是怎么回事，欢迎评论~

最后，来对比一下，没有引入CDN和引入CDN后的体积大小变化：
引入前：在这里插入图片描述
引入后：

前端菜菜怂

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
前端性能优化【vue-cli使用CDN引入】

1. index.html引入：在public文件中的index.html中引入，要注意引入的顺序，vue必须在前面<body> <div id="app"></div> <script src="//unpkg.zhimg.com/[email protected]/dist/vue.min.js"></script> <script src="//unpkg.zhimg.com/[email protected]/dist/vue-rou
复制链接

扫一扫