前端性能优化之——CDN优化加载

问题：在首开体验中，会觉得特别慢分析：原因很多，其中一个原因是首开时需要加载很多的js和css文件，这是因为在Vue项目中，引入到工程中的所有js、css文件，我们编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。解决方法：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而

荒男

4852人浏览 · 2021-12-17 14:36:26

荒男 · 2021-12-17 14:36:26 发布

CDN优化加载

前言
一、查找资源
二、资源引入
三、添加配置
- vue3配置
- vue2配置
四、去掉原有的引用
拓展1：vue3.0和vue2.0的cdn包名称不一样
拓展2:element-ui 不生效
相关文章:

前言

问题：在首开体验中，会觉得特别慢

分析：原因很多，其中一个原因是首开时需要加载很多的js和css文件，这是因为在Vue项目中，引入到工程中的所有js、css文件，我们编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。

解决方法：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来(既外部的库文件，可以使用CDN资源，或者别的服务器资源等)，达到加速首开的目的。

下面，以引入vue、vuex、vue-router为例，说明处理流程

一、查找资源

cdn资源很多，我这里使用的是bootcdn资源库，你们也可以选择其他资源库

二、资源引入

在index.html中，添加CDN资源

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.10/vue-router.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.min.js"></script>
</body>

三、添加配置

vue3配置

我们使用的是vue3
在vue.config.js定义chainWebpack.externals

module.exports = {
	 chainWebpack: config => {
        config.externals({
            'vue': 'Vue',
		    'vue-router': 'VueRouter',
		    'vuex':'Vuex'
        })
      },
}

vue2配置

如果我们使用的是vue2的话
在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入，如下

module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex'
  }

四、去掉原有的引用

去掉import，如：

// import Vue from 'vue'
// import VueRouter from 'vue-router'
// import Vuex from 'vuex'

去掉Vue.use(XXX)，如：

// import Antd from 'ant-design-vue'
// Vue.use(Antd)

拓展1：vue3.0和vue2.0的cdn包名称不一样

关于vue3.0以上的cdn分类就很细了

Vue的各种版本介绍：

cjs（两个版本都是完整版，包含编译器）

vue.cjs.js
vue.cjs.prod.js（开发版，代码进行了压缩）

global（这四个版本都可以在浏览器中直接通过scripts标签导入，导入之后会增加一个全局的Vue对象）

vue.global.js（完整版，包含编译器和运行时）
vue.global.prod.js（完整版，包含编译器和运行时，这是开发版本，代码进行了压缩）
vue.runtime.global.js
vue.runtime.global.prod.js

browser（四个版本都包含esm，浏览器的原生模块化方式，可以直接通过

vue.esm-browser.js
vue.esm-browser.prod.js
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js
- bundler（这两个版本没有打包所有的代码，只会打包使用的代码，需要配合打包工具来使用，会让Vue体积更小）
vue.esm-bundler.js
bue.runtime.esm-bundler.js

拓展2:element-ui 不生效

当我们使用cdn引入element的时候，发现不生效
原因1: 原使用.babelrc按需引入
只需要去除按需引入即可
```
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false
            }
        ]
    ]
    //去除按需引入
    // "plugins": [
    //     [
    //         "component",
    //         {
    //             "libraryName": "element-ui",
    //             "styleLibraryName": "theme-chalk"
    //         }
    //     ]
    // ]
}
```
原因2:将vue也用CDN引入的方式，因为element-ui依赖vue，因此vue只能通过import引入

相关文章:

前端性能优化之——浏览器http请求并发
.

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^