1 将常用的依赖包使用cdn的方式加载
可以大大减小vendor 的大小 主要是不占用自己的带宽 可以更快的加载出页面
<link href="https://cdn.bootcss.com/element-ui/2.14.1/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.4.9/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.14.1/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
两个提供cdn的网站
2 productionSourceMap 设置
module.exports = {
build: {
productionSourceMap: false,
}
}
设置为false就不会生成map文件 大大减少包的大小
3 productionGzip 代码压缩
在vue项目中安装依赖并将productionGzip改为true 开启Gzip压缩
module.exports = {
build: {
productionGzip: true,
}
}
npm install --save-dev compression-webpack-plugin@1.1.2
nginx 需要按照下面设置 并且重启nginx
# 开启动态压缩
gzip on;
# 开启静态压缩
gzip_static on;
# gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 5; # 静态压缩的文件修改这个参数不会生效
# 进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
关于 nginx 的 gzip ，可以分为两种：
nginx 动态压缩，对每个请求先压缩再输出。
nginx 静态压缩，使用现成的扩展名为 .gz 的预压缩文件。
参考 https://killtheradio.net/technology/using-gzip_static-in-nginx-to-cache-gzip-files/
