2024年前端最全vue项目首页优化问题（前后端都要优化），web前端开发面试技巧

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2.2 配置Gzip的 插件配置

打开webpack.prod.config.js 配置一下这段代码

代码如下

if (config.build.productionGzip) {

const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)

webpackConfig.plugins.push(

new CompressionWebpackPlugin({

asset: ‘[path].gz[query]’,

algorithm: ‘gzip’,

test: new RegExp(

‘\.(’ +

config.build.productionGzipExtensions.join(‘|’) +

‘)$’

),

threshold: 10240,

minRatio: 0.8

})

)

}

2.3 配置打包report 查看详细打包信息

打开package.json ，配置

“report”: “npm run build --report=true”

2.4 重新打包查看Gzip压缩情况

重新 npm run build 可以看到提供的 gz 压缩包 vendor.js.gz 已经小到了100k左右了， 从刚开始1M已经优化到现在的100k了

3.开启Nginx Gzip功能 （后端操作）

---

3.1 gzip的概念

gzip 是 Web 世界最广泛的文件压缩算法，已经得到了绝大多数的服务端和客户端软件（例如我们使用的浏览器）的支持。gzip 最为擅长的是压缩纯文本文件，其效果非常明显，大约可以减少70％以上的文件大小，所以 Web 项目中开启 gzip 十分必要

3.2 nginx gzip如何配合vue使用

事先用Vue生成的 gzip 压缩好文件（.gz）让 nginx 根据请求来自己选择 .gz 文件输出，利用 nginx 中的模块 http_gzip_static_module，不消耗 CPU 资源，nginx配置只需要在上述里面加入一行即可，如下：

gzip_static on;

3.3 主要要添加 http_gzip_static_module 模块

nginx 中的模块 http_gzip_static_module 默认是不在的

所以我们要记得在 nginx 里面添加上 http_gzip_static_module 模块，参见：yum安装下的nginx，如何添加模块，和添加第三方模块

安装完http_gzip_static_module模块后，使用 nginx -V 命令查看是否模块加载成功

3.4 nginx gzip 详细配置

打开nginx的nginx.conf文件 在server部分配置上gzip的配置

gzip on; 开启或关闭gzip on off

gzip_buffers 32 4k;

gzip_comp_level 5; 压缩等级，字数越大压缩越好，时间也长

gzip_static on; 重要！表示使用已经压缩好的gz文件，根据请求 配合vue生成的gz文件

gzip_min_length 1k;

gzip_http_version 1.1;

gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

3.5 查看是否生效

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3.5 查看是否生效

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-SyVsQUyw-1714989257555)]