一次簡單的項目優化

前言

---

最近在幫同組的兄弟項目作需求，這幾天差很少業務代碼寫完了。

本着搞事情的原則， 簡單分析以後， 決定搞一波優化。

先簡單看一下優化成果。

先睹爲快

優化前：

優化後：

🐶🐶 30%⬆️ 🐶🐶

---

前：

後：

效果仍是有一點的， 下面就看看具體的步驟。

都作了啥

step1 - 分析瓶頸

第一步固然是先找影影響最大的因素， 此次主要是處理打包和加載的一些問題，因此仍是先總體分析一些項目的構成，具體的渲染問題不在此篇範圍。

首先， 祭出一個包分析工具： webpack-bundle-analyzer.

具體的使用方法：

// webpack.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// ...plugins
new BundleAnalyzerPlugin({
  analyzerMode: 'server',
  generateStatsFile: true,
  statsOptions: { source: false }
})

安裝， 而後重啓一下server， 而後就能夠在http://127.0.0.1:8888/ 看到這個分析了。

簡單分析一下以後發現幾個問題：

• node-modules 都打在了一個包裏，體積達到了 4.52M.
• 有的包使用姿式不對， 沒有被tree-shaking, 好比那一大坨lodash 和 vue-awesome.
• 有個炒雞大的css文件

瞭解上述信息後， 就能夠開始逐個擊破了。

step2: 對症下藥

1. Bundle Split

修改以前：

optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },

修改以後：

optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      minChunks: 1,
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `modules.${packageName.replace('@', '')}`;
          }
        }
      }
    }
  },

https://webpack.js.org/plugin...

2: 按需引入

• vue-awesome:

• lodash:

eg:

3:公共資源放CDN

回頭去看那個css 文件， 原來是個主題包， 其餘項目也在用， 這就好辦了， 拿出來放CDN上， 直接飲用就行了， 不必打在包裏。

step3: 模塊按需加載

react 有 Loadable 這樣的工具， 原理其實都是同樣的。

https://github.com/jamiebuild...

能夠在適當的節點異步加載所需的模塊， 避免一股腦的打在一塊兒。

好比你能夠單獨加載某個頁面， 好比：

const Hello = () => import('./components/Hello.vue');
Vue.component('xxx', Hello);

這樣每個模塊就會被單獨打包:

與此同時， 你還須要另外一個工具去合併這些小包產生的HTTP請求：

https://webpack.js.org/plugin...

大概就是這些， 固然可能處理的細節還有不少， 這裏就不贅述了.

結語

優化是個一步一步逐步深刻的過程，有時候也可能須要妥協， 可是每作一步優化， 心情都會是愉悅的， 也是能帶來成就感的， 或許還能拯救你的KPI，哈哈。

但願上面的一些文字能給你帶來一些些啓發。

才疏學淺，不免會有疏漏，還請指正，謝謝。

推薦閱讀：
https://segmentfault.com/a/11...