美文网首页
vue打包优化

vue打包优化

作者: 冰镇苏打水 | 来源:发表于2019-08-02 14:55 被阅读0次

vue打包优化

  • 首屏加载慢

    • 也是网络慢
    • 资源也比较大
    • 如下图,加载完需要15s......崩了...


      image
  • 配置到了!!!!!!!

    • 这个不同环境的打包环境变量配置
    image
    • 内容
      • 其中 NODE_ENV 是关键
    image
  • vue.config.js 配置

      ```
      let {
        VUE_APP_PROSRC: BASE_URL,
        NODE_ENV
      } = process.env
      
      const isProduction = NODE_ENV === 'production'
      let cdn = {
        css: [
        ],
        js: [
          '//cdn.bootcss.com/vue/2.5.21/vue.runtime.min.js',
          '//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
          '//cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
          '//cdn.bootcss.com/axios/0.18.0/axios.min.js',
          '//cdn.bootcss.com/iview/3.4.1/iview.min.js'
        ]
      }
      ```
    
    • 这里用到 isProduction判断是否为打包进行注入 CDN资源
    image
  • public/index.html

    • 查了下head中的 link 引入 js 是进行 js 的预加载,其实真正加载是在最后
      image
  • 注意:
    • 我在 index.html 引入了 iview.css 这样在任何环境都会通过 CDN 加载.
    • 要将 main.js 中引用 iview.css 删除,不然还会降 css 进行打包.

结束看效果

  • DOMContentLoaded / load 时间都成为 1s, 比之前的 14/15s 翻天覆地变化


    image

相关文章

  • vue项目优化

    vue 项目优化 项目打包体积优化 通常vue项目通过webpack打包后,会出现vendor包的体积过大的情况,...

  • 2019-05-10

    vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画 当打包构建应用时,Javascript...

  • Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启...

  • 博客网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启...

  • vue打包优化

    网站首页第一次加载很慢,优化过后从十多二十秒缩短到了几秒,主要是打包的时候按需加载了,然后使用了gzip压缩。 这...

  • Vue打包优化

    未优化前 优化步骤 1.按需加载 ​修改前 修改后 如果你用的组件较多的话,这个步骤会比较繁琐 优化后的文件 ve...

  • vue打包优化

    在初次vue打包之后,文件非常大,所以采取了几种方法优化打包,打包后文件大小确实是显著下降了,如果还有不完善的地方...

  • vue打包优化

    vue打包优化 首屏加载慢也是网络慢资源也比较大如下图,加载完需要15s......崩了...image 配置到了...

  • Vue打包优化

    1、路由懒加载 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组...

  • 打包优化去掉console.log,webpack.js配置排除

    一、打包优化去掉console.log 在vue.config中,配置: chainWebpack(config)...

网友评论

      本文标题:vue打包优化

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