# vue 首屏页面性能优化
# 1、vue 开启文件大小分析
# 1.1 安装
npm install webpack-bundle-analyzer --save-dev
1
# 1.2 vue.config.js 配置
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
},
};
1
2
3
4
5
6
7
2
3
4
5
6
7
# 1.3 运行命令
npm run serve
1
访问 http://localhost:8888
# 2、vue-router 使用懒加载
{
path: '/Login',
name: 'Login',
component: () = >import( /* webpackChunkName: "Login" */ '@/view/Login')
}
1
2
3
4
5
2
3
4
5
同一个 vue 文件 webpackChunkName 保持一致
# 3、对于第三方 js 库分离打包
- 生产环境是内网的话，就把资源放内网，通过静态文件引入，会比 node_modules 和外网 CDN 的打包加载快很多。
- 如果是外网的话，可以通过 CDN 方式引入，因为不用占用访问外网的带宽，不仅可以节省流量，还能通过 CDN 加速，获得更快的访问速度。但是要注意下，如果你引用的 CDN 资源存在于第三方服务器，在安全性上并不完全可控。
目前采用引入依赖包生产环境的 js 文件方式加载，直接通过 window 可以访问暴露出的全局变量，不必通过 import 引入，Vue.use 去注册
# 3.1 配置 externals
在 vue.config.js 中配置 externals
// cdn 服务
const cdn = {
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT',
},
};
module.exports = {
configureWebpack: {
externals: externals: process.env.VUE_APP_ENV !== 'development' ? cdn.externals : {}, // 非开发环境
// 未配置 VUE_APP_ENV 值可能是 process.env.NODE_ENV
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 3.2 使用 CDN 加载资源
/public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<link
rel="resource"
type="application/l10n"
href="<%= BASE_URL %>viewer.properties"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<% if (process.env.VUE_APP_ENV !== 'development' ) { %>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<% } %>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- 引入组件库 -->
<% if (process.env.VUE_APP_ENV !== 'development' ) { %>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!--vue-router -->
<script src="https://unpkg.com/vue-router@3"></script>
<!--vuex -->
<script src="https://unpkg.com/vuex@3"></script>
<!-- elementUI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<% } %>
</body>
</html>
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
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
# 4、移除 console.log
# 4.1 安装依赖
npm install babel-plugin-transform-remove-console --save-dev
# 4.2 配置 babel.config.js
const prodPlugins =
process.env.VUE_APP_ENV === 'production' ? ['transform-remove-console'] : [];
module.exports = {
plugins: [...prodPlugins],
presets: ['@vue/cli-plugin-babel/preset'],
};
1
2
3
4
5
6
2
3
4
5
6
# 5、开启 gzip
# 5.1 vue 开启 gzip
（1）安装依赖
npm i compression-webpack-plugin@5.0.1 --save-dev
（2）在 vue.config.js 配置
// gzip包
const CompressionWebpackPlugin = require('compression-webpack-plugin');
//匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
configureWebpack: {
// 开启gzip
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(productionGzipExtensions),
threshold: 10240,
minRatio: 0.8,
}),
],
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 5.2 nginx 开启 gzip
gzip on;
gzip_min_length 1k;
gzip_comp_level 5;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
gzip_buffers 32 4k;
gzip_http_version 1.0;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8