美文网首页vuevueVUE
vue-cli3.x 项目优化

vue-cli3.x 项目优化

作者: 追忆单飞 | 来源:发表于2019-06-03 11:25 被阅读425次

    1.路由懒加载

           像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

    1.1懒加载写法

    简写component: () => import('@/components/Two')

    1.2非懒加载写法

    2.剔除 console 和 debugger 代码

       在vue.config.js里对webpack配置

    3.压缩图片

    在vue.config.js里对webpack配置,采用的是image-webpack-loader

    4.图片懒加载

    4.1安装插件
    npm install vue-lazyload --save-dev

    4.2在入口文件main.js中引入并使用

    4.3修改图片显示方式为懒加载(将 :src 属性直接改为v-lazy)

    5.用<keep-alive>标签包裹<router-view>标签缓存

    CDN

    Gzip压缩

    相关文章

      网友评论

        本文标题:vue-cli3.x 项目优化

        本文链接:https://www.haomeiwen.com/subject/dwoqxctx.html