Vue 如何做首屏优化

精选原创

kang_dong 2024-05-05 10:42:46 ©著作权

文章标签 懒加载加载 html 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者kang_dong的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.尽量使用懒加载

主要是路由懒加载、组件懒加载、图片懒加载。

路由懒加载：首屏进入时直接加载和首屏相关路由，其他路由实现懒加载，即打开该路由时再去加载。
组件懒加载：const One = ()=>import("./one");
图片懒加载：使用vue-lazyload插件。

2.尽量不生成map文件

在vue.config.js配置：

module.exports = {
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件，一般情况不建议打开
}

在设置了productionSourceMap: false之后，就不会生成map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。我们一般开发模式打开，生产模式要记得关闭掉。

3.尽量减少js/css/html等文件的大小

webpack开启gzip压缩文件传输模式，gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。

4.CDN加速

使用用户访问资源会找离自己物理距离最近的站点去获取资源。

修改vue.config.js：

module.exports = {
    ...
    externals: {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT'
    }    
}