vue项目性能速度优化

最新推荐文章于 2024-09-25 11:24:51 发布

guoxunkun

最新推荐文章于 2024-09-25 11:24:51 发布

阅读量860

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/guoxunkun/article/details/119212658

版权

本文介绍了Vue项目的性能和速度优化方法，包括在config/index.js中设置productionSourceMap为false以减小打包文件大小，取消js和css的预加载以优化首次加载速度，启用gzip压缩来减小文件体积，并在项目中实现路由懒加载以加速首屏渲染。此外，还建议根据需求选择v-if或v-show指令来平衡渲染效率和空间占用。

摘要由CSDN通过智能技术生成

1.打包的时候去掉map文件，缩小打包后的文件大小，提高编译速度

config/index.js中productionSourceMap: true,修改为false

2.取消js，css的预加载，在首次加载项目时不去加载页面的js，css文件

module.exports = {
        //取消打包文件dist里面的.map文件
        productionSourceMap: process.env.NODE_ENV === 'development' ? true : false,

        //取消引入css 的rel='preload'属性取消文件的预加载适用于引入文件较多的项目
          chainWebpack: config => {
        config.plugins.delete("prefetch") //取消预加载
          },
}

3.使用gzip压缩打包后的文件

vue使用 nginx gzip需要配合nginx服务器端配置。在nginx.conf里具体配置如下：

gzip on; 开启或关闭gzip on off
gzip_buffers 32 4k;
gzip_comp_level 5; 压缩等级，字数越大压缩越好，时间也长
gzip_static on; 表示使用已经压缩好的gz文件，根据请求配合vue生成的gz文件
gzip_min_length 1