项目部署
项目部署后个人用户购买的云服务器(配置低),带宽通常只有 1M~2M。若是生成的资源文件体积过大会导致加载缓慢。没有使用 gzip 时文件大小为 2M 左右，以 1M 的带宽 128kb/s 加载时长要近 20s
下面是我自己在项目优化过程中的一点经验。
打包体积优化
路由懒加载
vue 中使用
{
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 函数懒加载
import React, { Component,lazy,Suspense} from 'react'
//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Home = lazy(() => import('views/home/Home.vue'))
//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<>loading.....</>}>
<Switch>
<Route path="/home" component={Home} />
<Redirect to="/home" />
</Switch>
</Suspense>
// fallback也可加载一个外部组件。如：fallback={<Loading />}，但Loading组件不能用lazy()加载
不生成 map 文件
去掉打包生成的.map 文件，以 vue 项目为例，设置 vue.config.js 中的productionSourceMap:false，运行·yarn build后发现不会生成的.map 了。解释一下.map 就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 项目打包后，代码都是经过压缩加密的，如果没有.map 文件运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
使用 gzip
使用 compression-webpack-plugin 插件，yarn add compression-webpack-plugin -D，按如下配置
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]", //3.0以上版本使用fileName，低版本为assets
algorithm: "gzip",
test: /\.(js|css)$/,
threshold: 10240, // 达到10kb的静态文件进行压缩 按字节计算
minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
deleteOriginalAssets: false, // 是否删除压缩的源文件
})
);
}
},
};
//...
此时再运行 build 后可以看到生成的文件中多了以.gz 后缀名的文件。这个时候还需要在云服务器上的 nginx 配置vim /etc/nginx/nginx.conf中开启 gzip。配置可以直接拿去用。
#开启gzip
gzip on;
#不压缩临界值，大于1K的才压缩
gzip_min_length 1k;
gzip_buffers 4 16k;
#用了反向代理的话，末端通信是HTTP/1.0,默认是HTTP/1.1
#gzip_http_version 1.0;
#压缩级别，1-10，数字越大压缩的越好，开启与不开启差别较大，开启了之后1~9影响不明显。建设设置为4或者5
gzip_comp_level 5;
#进行压缩的文件类型JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式application/javascript 就行了
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;
#跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary off;
#IE6对Gzip不怎么友好，不给它开Gzip了
gzip_disable "MSIE [1-6]\.";
配置完成后检查配置nginx -t（不使用是重载配置也会有错误提示）提示成功后重新载入配置nginx -s reload。
打开项目地址在资源的响应头中中查看 gzip 是否开启
此时该文件大小为 500kb 左右，请求时长 4~5s
使用 bootcdn 提供的 cdn
我们可以使用webpack-bundle-analyzer插件查看各个依赖包所占的体积,运行 build 后在浏览器展示结果
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]", //3.0以上版本使用fileName，低版本为assets
algorithm: "gzip",
test: /\.(js|css)$/,
threshold: 10240, // 达到10kb的静态文件进行压缩 按字节计算
minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
deleteOriginalAssets: false, // 是否删除压缩的源文件
}),
new BundleAnalyzerPlugin({
analyzerMode: "server",
generateStatsFile: true,
statsOptions: { source: false },
})
);
}
},
};
//...
我们发现 ant-design 占用了 147kb
在 bootcdn www.bootcdn.cn/ 找到对应版本的 antd 依赖包的文件，顺便将 vue，vuex，vue-router 也优化掉。
以 vue 为例 在 main.js 取消引用，或者在 webpack 打包时忽略这些依赖包
//key为包名，value为引入的名称
externals = {
vue: "Vue",
"vue-router": "VueRouter",
vuex: "Vuex",
};
在 public/index.html 中添加对应版本的依赖包的 script 链接
<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>
