前端性能优化 - 使用内容分发网络CDN_@antv/data-set

作者：菜鸟追梦旅行 | 2024-02-20 20:36:43

踩

@antv/data-set

为什么使用CDN

当引入的组件越来越多时，运用 webpack 打包后的 app.js 文件容易变得过大，对首屏加载很不友好。
使用CDN的第三方资源的JS代码，将不再打包到本地服务的JS包中。减小本地JS包体积，提高加载速度。-给网页加载提速
Vue项目打包的时候，默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的

解决问题

打包时间太长、打包后代码体积太大，请求慢
服务器网络不稳带宽不高，使用cdn可以回避服务器带宽问题

缺点

请求变多，第一次没做缓存的时候，有的包会下载特别慢
万一CDN资源路径有变动或者崩溃，项目没缓存的就崩溃了，建议自行搭建CDN库。

标题哪些需要使用CDN

在项目根目录下运行 npm run build --report
打包完成后，会打开一个页面，展示各个依赖包的大小，查看哪些第三方依赖包的体积大，就干掉它，从CDN上获取。

获取CDN地址

https://www.jsdelivr.com/
https://www.bootcdn.cn/

确认需要使用CDN加载的资源，在package-lock.json文件中，找到对应的版本号。
在BootCDN网站找到对应的资源路径。找不到echarts-gl的CDN资源路径

如何引入CDN

在package.json中删除即将通过 CDN 引入的组件，主要在 dependencies 和 devDependencies 中，删除 node_modules 后重新安装
vue.config.js配置

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
	  'axios': 'axios',
	  'vue-router': 'VueRouter',
	  'vuex': 'Vuex',
	  'moment': 'moment',
	  '@antv/g2': 'G2',
	  '@antv/data-set': 'DataSet',
	  'ant-design-vue': 'antd',
	  'AMap': 'AMap',
	  "element-ui": "ELEMENT", //有人说需要配置大写
    }
  },
  chainWebpack: config => {
    const cdn = {
      css: [
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vant/index.css',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/element-ui/element-ui-index.css'
      ],
      js: [
	    'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
	    'https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js',
	    'https://cdn.jsdelivr.net/npm/vue-router@3.1.2/dist/vue-router.min.js',
	    'https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
	    'https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js',
	    'https://cdn.jsdelivr.net/npm/moment@2.24.0/locale/zh-cn.js',
	    'https://cdn.jsdelivr.net/npm/@antv/g2@3.5.7/dist/g2.min.js',
	    'https://cdn.jsdelivr.net/npm/@antv/data-set@0.10.2/dist/data-set.min.js',
	    'https://cdn.jsdelivr.net/npm/ant-design-vue@1.3.16/dist/antd-with-locales.min.js'
	  ]
    }
    // 如果使用多页面打包，使用 vue inspect --plugins 查看 html 是否在结果数组中
    config.plugin('html').tap(args => {
      // html中添加cdn
      args[0].cdn = cdn
      return args
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

externals 配置选项的作用：

我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。

踩坑配置注意点：element-ui要大写为ELEMENT

public/index.html
在标签中添加以下代码使用：

<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>

<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
1
2
3
4
5
6
7
8
9

等价于直接引入标签

<html>
  <head>
    <link href="https://cdn.bootcss.com/element-ui/2.4.4/theme-chalk/index.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/three.js/100/three.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.4.4/index.js"></script>
    <script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.min.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注释掉main.js中的引入
main.js 中可能有引入相关组件的 css 文件，当使用了 css 文件的 CDN 时，无需在 main.js 中继续引用。

如果不删除原先的import，项目还是会从node_modules中引入资源。
也就是说不删的话，npm run build时候仍会将引用的资源一起打包，生成文件会大不少。所以我认为还是删了好

// main.js
import Vant from 'vant';
// import 'vant/lib/index.css'; // 使用了该 css 文件的 CDN 时，无需在 main.js 中引用
Vue.use(Vant);

// import 'element-ui/lib/theme-chalk/index.css'
// import Element from 'element-ui'
// Vue.use(Element, { size: 'small' })
1
2
3
4
5
6
7
8

完成引用后打包报错

完成引用后，打包报错Vue未定义，但是启动运行正常。
因为其实定义了全局变量，但是eslint并不识别全局变量，所以需要在.eslintrc.js配置文件中添加
声明一下这些是全局变量，再次打包即可。

globals: {
    'Vue': true,
    'VueRouter': true,
    'Vuex': true,
    'THREE': true,
    'echarts': true,
    'axios': true,
    '_babelPolyfill': true
}
1
2
3
4
5
6
7
8
9

使用预获取（有待考证）

只需在链接属性上增加 rel=“prefetch”,rel=“dns-prefetch”，或者 rel=“preload” 标记。
preload：代码会被优先加载，并且会占用http并发数，从而也导致页面加载时间变长，特别是首屏时间会变长
prefetch：的代码被安排在后面加载，这样才达到了优化效果。

<script rel="preload" src="https://cdn.bootcss.com/three.js/100/three.min.js"></script>
<script rel="prefetch" src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
1
2

以为被preload修饰的three会优先加载，而被prefetch修饰的echarts会延后加载。
本地也好，服务器也好，配置了完全没有变化，严格按照顺序加载的……

vue-cli 4使用report分析vendor.js

Vue Cli（@/vue/cli）自带的webpack包体积优化工具，它可以查看各个模块的size大小，方便优化。只需要在build后面加上 --report 参数即可。

1、我们把命令配置到package.json里

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "report": "vue-cli-service build --report"  //加入该行
},
1
2
3
4
5

2、执行npm run report 打包并生成report。
注意：网上很多说要先安装webpack-bundle-analyzer包，其实不需要安装。

3、运行 npm run report 后，会在 build 的同时，在dist目录会生成一个report.html，打开后可看到各文件占用大小

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/120824