如何将项目部署到云服务器上?详细请参考项目部署，浅谈CI/CD。但是个人用户购买的云服务器往往会遇到一个问题（配置低），带宽通常只有 1M~2M。若是生成的资源文件体积过大会导致加载缓慢。没有使用 gzip 时文件大小为 2M 左右，以 1M 的带宽 128kb/s 加载时长要近 20s
没有使用gzip之前的vendors下面是我自己在项目优化过程中的一点经验。
路由懒加载
vue 中使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| {
path: "/home",
name: "Home",
component: () => import("views/home/Home.vue"),
meta: {
title: "s.kr",
},
children: [
{
path: "/service",
component: () => import("components/common/adside/Service"),
},
],
},
|
react 中使用 lazy 函数懒加载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import React, { Component,lazy,Suspense} from 'react'
const Home = lazy(() => import('views/home/Home.vue'))
<Suspense fallback={<>loading.....</>}>
<Switch>
<Route path="/home" component={Home} />
<Redirect to="/home" />
</Switch>
</Suspense>
|
不生成 map 文件
去掉打包生成的.map 文件，以 vue 项目为例，设置 vue.config.js 中的productionSourceMap:false，运行·yarn build后发现不会生成的.map 了。解释一下.map 就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 项目打包后，代码都是经过压缩加密的，如果没有.map 文件运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
webpack配置使用 gzip
使用 compression-webpack-plugin 插件，yarn add compression-webpack-plugin -D，按如下配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === "production") {
config.plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: /\.(js|css)$/,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false,
})
);
}
},
};
|
此时再运行 build 后可以看到生成的文件中多了以.gz 后缀名的文件。这个时候还需要在云服务器上的 nginx 配置vim /etc/nginx/nginx.conf中开启 gzip。配置可以直接拿去用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
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;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
|
配置完成后检查配置nginx -t（不使用是重载配置也会有错误提示）提示成功后重新载入配置nginx -s reload。
打开项目地址在资源的响应头中中查看 gzip 是否开启
gzip是否开启此时该文件大小为 500kb 左右，请求时长 4~5s
size使用 bootcdn 提供的 cdn
我们可以使用webpack-bundle-analyzer插件查看各个依赖包所占的体积,运行 build 后在浏览器展示结果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === "production") {
config.plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: /\.(js|css)$/,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false,
}),
new BundleAnalyzerPlugin({
analyzerMode: "server",
generateStatsFile: true,
statsOptions: { source: false },
})
);
}
},
};
|
我们发现 ant-design 占用了 147kb
size在 bootcdn
https://www.bootcdn.cn/ 找到对应版本的 antd 依赖包的文件，顺便将 vue，vuex，vue-router 也优化掉。
以 vue 为例 在 main.js 取消引用，或者在 webpack 打包时忽略这些依赖包
1
2
3
4
5
6
|
externals = {
vue: "Vue",
"vue-router": "VueRouter",
vuex: "Vuex",
};
|
在 public/index.html 中添加对应版本的依赖包的 script 链接
1
2
3
4
5
6
7
8
| <link
href="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.4/antd.min.css"
rel="stylesheet"
/>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.4/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.4/antd.min.js"></script>
|
此时运行 build 后文件大小只有 200kb，项目就会很快的加载完成了。
size
size我的项目地址http://expo.liufashi.top
