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

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请求并发
    .

    前端性能优化之——CDN优化加载_第1张图片

你可能感兴趣的:(前端,前端,javascript,vue.js,性能优化,cdn)