前言：老项目经常出现的优化问题，特别是那种引了一堆三方库插件啥的，做好分包真的能很大程度优化首屏加载速度。

优化原因

在没有使用CDN加速的情况下，打包后的js和css文件有时会很大，甚至有1M或者几M以上，而且随着项目的越做越大，打包出来的文件就更大了，而在页面加载的时候，会拖慢加载速度，如果有CDN全站加速可能还好，如果托管于GitHub Page上面的话，会让加载速度变得很慢。

  • 比如下图，在没有使用CDN加速的情况下，可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大

查看依赖版本

首先项目中需要使用依赖项，打开项目中的vue.config.js，查看要加速的包的版本，我这里项目中打算将element-ui、vue、vuex、vue-router这些包进行分离，让它们通过cdn加速来载入页面，记录其依赖版本方便后面使用。

依赖名称 依赖版本
vue 2.6.14
vue-router 3.1.3
vuex 3.6.2
element-ui 2.15.6
axios 0.26.1

配置CDN加速

  • 打开vue.config.js

写入下面的代码，externals为要加速的包名和挂载在window上的对象属性名称，

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
43
44
45
46
47
48
49
50
51
52
// Vue打包优化-CDN加速

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';
 
// 本地环境是否需要使用cdn
const devNeedCdn = false

const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      "element-ui": "ELEMENT",
      'axios': 'axios',
  },
  // cdn的css链接
  css: [
      'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css',
  ],
  // cdn的js链接
  js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
      'https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js',
      'https://cdn.bootcss.com/axios/0.26.1/axios.min.js',
      'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js'
  ]
};


module.exports = {
	lintOnSave: false, // 关闭eslint
	publicPath: process.env.NODE_ENV === 'production'
    ? ''//这里写展示页面的仓库名称
    : '/',
	chainWebpack: config => {
		// ============注入cdn start============
		config.plugin('html').tap(args => {
			// 生产环境或本地需要cdn时，才注入cdn
			if (isProduction || devNeedCdn) args[0].cdn = cdn
			return args
		})
	
	},
	configureWebpack: config => {
		// 用cdn方式引入，则构建时要忽略相关资源
		if (isProduction || devNeedCdn) config.externals = cdn.externals
	},
}

index.html

  • 这里也需要说明一下，这个index.html页面的位置一般在public目录下。
    需要给index.html的<head>里面加点东西，才能使上面的加速链接载入到head里面。
  • 写入下面的代码到<head>里面
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 使用CDN的CSS文件 -->
		<% for (var i in htmlWebpackPlugin.options.cdn &&
		 htmlWebpackPlugin.options.cdn.css) { %>
		<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="stylesheet" />
		<% } %>
		<!-- 使用CDN的CSS文件 -->
		<!-- 使用CDN的JS文件 -->
		<% for (var i in htmlWebpackPlugin.options.cdn &&
		 htmlWebpackPlugin.options.cdn.js) { %>
		<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
		<% } %>
		<!-- 使用CDN的JS文件 -->

注意，CDN的引用必须写在上面

  • 配置好之后，重写执行打包操作即可。