vue-cli3 項目框架優化(OneLine周分享)

Vue項目優化的背景

項目是經過vue-cli3 來構建的, 項目隨着需求的不斷增長. 代碼量也在隨着增大. 項目的文件大小也隨着增長. 可是這一狀況就變得,異常棘手. 咱們也須要找到解決辦法, 來處理這件事情, 來提升項目的運行效率. 在考慮優化以前, 咱們來看下在以前項目的結構中, 咱們須要作什麼樣的優化方式.

以往項目的優化

在以往的項目中, 咱們的代碼基本都是經過服務端渲染方式來響應給用戶. 在這種項目結構中. 代碼的狀況, 都是由開發人員控制, 按照本身的須要引入相關的代碼庫. 代碼的控制基本都是按照團隊規範來處理. 因此在頁面引入的代碼都是當前頁面須要的執行代碼. 代碼的優化, 主要表如今:

1. js,css代碼公用代碼提取, 按照須要引入
2. js,css代碼的最小化壓縮
3. 圖片文件的壓縮
4. gzip的壓縮

等等.相關的優化. 這裏咱們就不考慮其餘性能的處理. 性能的處理最主要仍是就項目的狀況來處理. 離開項目的性能優化, 其實都是沒有說服力. 由於不一樣項目, 在性能優化上是不同的, 好比某個性能優化方案在這個項目適合, 可是在另一個項目可能就不適合了.

Vue-cli3的優化

vue-cli3主要仍是創建在webpack和webpack-dev之上的. 因此重點優化,也應該是經過學習webpack相關的配置功能來優化咱們的代碼. 在vue-cli3中有兩種方式來配置webpack. 兩種方式: chainWebpack 和configureWebpack. chainWebpack的方式能夠查看官方教程. configureWebpack的話直接看webpack的官方教程. 再配合看vue-cli3的官方文檔, 咱們開始進一步的思考實際的優化方式.咱們新建一個vue.config.js文件

module.exports = {

}
複製代碼

在優化以前, 咱們先看看項目的代碼狀況. 這裏的項目是我寫的一個測試代碼, 用了element-ui來作界面.

單個文件已經到了8.5m, 這個是很是可怕的. 因此咱們必需要作相關的優化, 減小文件的大小.

1. 最小化處理: 代碼的最優化, 咱們會經過chainWebpak來處理. 這裏使用的是webpack配置中的optimization來處理的. 咱們在優化前, 看下相關文件的響應代碼: 看下app.js文件的返回代碼:

app.js代碼是沒有作任何的優化. 因此這也是咱們須要作的優化. 因此咱們須要最小化這個代碼

module.exports = {
  chainWebpack: config => {
    config.optimization.minimize(true);
  }
}
複製代碼

而後咱們運行咱們的項目, 能夠看到代碼的方式.

代碼已經減小到8.4M, 而後看到的源碼也是壓縮的了. 其餘的文件大小也是相應的減小了. 這個你們能夠看看本身的項目文件狀況.

2. 分割代碼 分割代碼是, 將某一些相關的文件放入到相應的文件中. 咱們先設置一下.

module.exports = {
    
    chainWebpack: config => {
        config.optimization.minimize(true);
        config.optimization.splitChunks({
          chunks: 'all'
        })
    }
}
複製代碼

這時候咱們的代碼文件分割了出來, 單個文件最大變成了7.4M, 單個文件的加載速度確定是有所提高的. 固然咱們還能夠繼續設置splitChunks的參數配置, 可是我這裏就不帶你們去設置了. 你們能夠參考 splitChunks插件的配置. 能夠設置最小文件大小, 最大文件大小, 設置異步方式, 還有模塊的緩存設置, 名稱的設置等等. 可是必定要平衡文件大小的和分割出來的文件數量的平衡, 數量多了, 請求也會變慢的, 影響性能. 不過你們能夠詳細去設置一下, 看下效果, 來設置符合本身的項目參數. 我這裏的話, 就只設置成這樣. 避免文件數量的增長了. 固然是能夠繼續優化的. 咱們經過其餘方式來減小文件的大小.

3. 提取公用代碼, 使用免費的cdn資源. 首先咱們要搞明白, 爲何會有個文件會如此之大? 才能去作進一步的優化. 這個文件會這麼大, 最主要是咱們引入了不一樣的模塊庫, 好比vue, vuex, vue-router, element-ui等公共資源庫. 那咱們是否將他們提取出來? 答案是確定. 咱們須要使用externals參數來配置:

module.exports = {
    
    chainWebpack: config => {
        config.optimization.minimize(true);
        config.optimization.splitChunks({
          chunks: 'all'
        })
        config.externals({
            vue: 'vue',
            vuex: 'vuex',
            'vue-router': "'vue-router'",
            'element-ui': "'element-ui'"
        })
    }
}
複製代碼

經過externals參數來忽略咱們這些模塊的打包. 而後咱們從新運行項目, 看看效果.

咱們的代碼已經減小到2.8M. 可是這裏有個問題, 就是咱們的代碼沒有執行起來, 報錯了. 由於咱們須要將vue, vuex, vue-router等引入到項目界面中.咱們須要對html作一下處理. 這裏咱們就引入網絡上的免費資源了, 就不下載代碼放到項目中了.

在index.html頁面加入這些連接. 而後咱們運行效果看下.

4. 提取css代碼, 到單個文件中.

有沒有發現, 咱們的請求中沒有看到css的請求. 那是由於css代碼都是放在了js文件中, 他會在執行js的時候, 會動態的將css代碼生成style標籤. 因此會將css代碼放在js中. 這也是一個形成文件過大的緣由之一. 這時候咱們須要提取css代碼到文件. 這裏咱們只須要將css配置一下:

module.exports = {
  css: {
      extract: true
  },
  chainWebpack: config => {
    config.optimization.minimize(true);
    config.optimization.splitChunks({chunks: 'all'})
    config.externals({
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': "VueRouter",
        'element-ui': "'element-ui'"
    })
  }
}

複製代碼

而後咱們運行項目. 這裏css的配置能夠看官方的文檔.

有沒有發現, 咱們的代碼在繼續減小. 已是編程2.3m了, 其餘都是k爲單位了. css文件咱們也發現了. 這裏咱們還得須要提取一個css文件出來, 那就是element-ui的樣式文件, 咱們如今用的是本地引入element-ui的樣式, 咱們也改成免費資源的形式

這裏咱們須要把他註釋掉.而後在html文件中, 加入免費資源

而後運行項目. 找到一個vendor開頭的css文件, 這裏從205k減小到8.3k

注意到的是咱們這裏還有2.3M的大文件. 我這裏咱們是必須繼續優化的. 這裏文件大的緣由. 咱們還引入了vue-codemirror這個組件, 咱們也能夠經過使用免費資源解決. 配置方式跟vue, vuex, vue-router這種方式配置,咱們就不在累贅說明. 這個組件用到了codemirror的樣式. 也須要引入進來. 最後的效果.

已是壓縮到1.4M了. 通過上面的步驟, 效果仍是比較明顯的. 由於咱們這裏使用的是開發環境的模式, 其實有些代碼是多出來的, 但這個環境下也是必須的.好比熱加載, webpack-dev-server這些插件.

5. gzip壓縮.

gzip壓縮, 這裏咱們須要引入一個插件: compression-webpack-plugin. 來完成js文件的壓縮. 安裝該插件:

npm install --save-dev compression-webpack-plugin
複製代碼

而後引入相關代碼:

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const compress = new CompressionWebpackPlugin(
  {
    filename: info => {
      return `${info.path}.gz${info.query}`
    },
    algorithm: 'gzip', 
    threshold: 10240,
    test: new RegExp(
      '\\.(' +
      ['js'].join('|') +
      ')$'
    ),
    minRatio: 0.8,
    deleteOriginalAssets: false
  }
)


module.exports = {
  css: {
      extract: true
  },
  configureWebpack: {
      plugins: [compress]
  },
  chainWebpack: config => {
    config.optimization.minimize(true);
    config.optimization.splitChunks({chunks: 'all'})
    config.externals({
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': "VueRouter",
        'element-ui': "'element-ui'"
    })
  }
}
複製代碼

這裏咱們只作js文件的gzip. 而後會生成一個.gz的文件. 咱們從新啓動項目. 可是是沒法看到效果的. 由於沒有將gz文件讓瀏覽器看到. 這時候, 咱們須要配置下服務器. 目前如今的應用服務器, 好比Nginx, apache等都是支持gzip壓縮的. 若是架設到這樣的服務器上, 是不須要經過這個插件來壓縮. 咱們啓用他們自身的gzip功能就能夠了. 咱們這樣作的目的, 是爲了更好的瞭解到gzip後, 文件的壓縮效果. 在這裏咱們還須要加入devServer的配置:

const compress = new CompressionWebpackPlugin(
  {
    filename: info => {
      return `${info.path}.gz${info.query}`
    },
    algorithm: 'gzip', 
    threshold: 10240,
    test: new RegExp(
      '\\.(' +
      ['js'].join('|') +
      ')$'
    ),
    minRatio: 0.8,
    deleteOriginalAssets: false
  }
)

module.exports = {
  devServer: {

    before(app, server) { 
      app.get(/.*.(js)$/, (req, res, next) => { 
        req.url = req.url + '.gz';
        res.set('Content-Encoding', 'gzip');
        next();
      })
    }
     
    // compress: true
  },
  css: {
    extract: true
  },
  configureWebpack: {
    plugins: [
      compress
    ]
  },
  chainWebpack: config => {
    config.optimization.minimize(true);
    config.optimization.splitChunks({chunks: 'all'})
    config.externals({
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': "VueRouter",
        'element-ui': "'element-ui'",
        "vue-codemirror": "'vue-codemirror'"
    })

 
  }
}

複製代碼

而後從新啓動項目, 這時候你就會發現咱們的Js文件已經壓縮了, 從1.4M的文件到300多k. 效果是很明顯的.

總體的優化, 咱們如今已經基本的完成. 更多的細節式優化, 有待你們去發掘. 注意: gzip壓縮裏devServer能夠直接設置成 **compress: true **就能夠實現效果, 沒必要要去加入這個壓縮建立, 也不須要本身去從新修改請求方式.

優化思考

從對vue-cli3項目框架來講, 他基本是基於webpack作的再次封裝, 因此咱們最主要的仍是得了解webpack的相關優化配置, 來完成咱們對項目的優化. 如今的插件愈來愈多, 可是最本質的優化方式, 仍是不變. 跟之前項目優化方式是殊途同歸的. 更多的細節化的操做, 你們能夠繼續研究. 但願對大家有所幫助. 有問題的地方, 歡迎你們指出.

附件: vue-cli3 項目框架優化 視頻分享下載地址: https://pan.baidu.com/s/1q2ELgOrikuiwqjg2IfXk-g 密匙: qx1q

文章轉載請聯繫咱們(One Line Team)