vue打包優(yōu)化

• 首屏加載慢

  • 也是網(wǎng)絡(luò)慢
  • 資源也比較大

  • 如下圖,加載完需要15s......崩了...

    
    
    image

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

  • 這個(gè)不同環(huán)境的打包環(huán)境變量配置
  image
  • 內(nèi)容
    • 其中 NODE_ENV 是關(guān)鍵
  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判斷是否為打包進(jìn)行注入 CDN資源
  image

• public/index.html

  • 查了下head中的 link 引入 js 是進(jìn)行 js 的預(yù)加載,其實(shí)真正加載是在最后
    
    image

• 注意:
  • 我在 index.html 引入了 iview.css 這樣在任何環(huán)境都會(huì)通過 CDN 加載.
  • 要將 main.js 中引用 iview.css 刪除,不然還會(huì)降 css 進(jìn)行打包.

結(jié)束看效果

• DOMContentLoaded / load 時(shí)間都成為 1s, 比之前的 14/15s 翻天覆地變化

  
  
  image