前端性能优化【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-router.min.js"></script>
  <script src="//unpkg.zhimg.com/[email protected]/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后的体积大小变化:
引入前:前端性能优化【vue-cli使用CDN引入】_第1张图片
引入后:前端性能优化【vue-cli使用CDN引入】_第2张图片

你可能感兴趣的:(Vue学习)