vue打包优化

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