打包優化實踐(如何Code Spliting)

項目地址: reactSPA

使用 webpack 插件找出佔用空間較大的包

開發環境中可以使用 analyze-webpack-plugin 觀察各模塊的佔用狀況。以該項目爲例：瀏覽器中輸入 http://localhost:3000/analyze.html 能夠看到以下效果:

按需加載

• 對模塊結合 babel 進行按需加載;
• 測試 day.js 替代 moment.js. 實際上 moment.js 也使用按需加載 了(實驗減小了 40KB+)，因此最終結果相差不大;

code-spliting

使用 MiniCssExtractPlugin 插件分離 JavaScript 和 Css 文件:

823.94 KB           build / static / js / main.496a38b7.js
  8.2 KB              build / static / css / main.css

code-spliting 官方給出三種方案，分別以下：

方案一：在 entry 處增長打包入口

方案一的缺點以下：

• 若是多個文件引人了相同的包(好比 lodash)，引用的包會被分別打包兩次;
• 這種方案不夠靈活，沒法根據邏輯動態分割代碼;

因此方案一一般會結合方案2、方案三一塊兒使用，方案一的配置大體以下：

entry: [require.resolve('./polyfills'), paths.appIndexJs],

// 也能夠寫成

entry: {
  polyfill: require.resolve('./polyfills'),
  IndexJs: paths.appIndexJs,
},

方案二：使用插件 SplitChunkPlugin

optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'all',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          maxAsyncRequests: 5,
          priority: 10,
          enforce: true,
        },
      },
    },
  },

打包效果以下:

723.96 KB  build/static/js/vendor.a9289a29.chunk.js // node-modules 模塊
  98.72 KB   build/static/js/main.7bcaca24.js
  8.2 KB     build/static/css/1.css

此時將 node-modules 裏的包打包成了一個大塊頭，這樣對加載仍然是不友好的。解決方案爲：將核心的框架單獨打包出來，剩餘模塊異步加載，好比能夠使用 bundle-loader)。

optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        vendor1: { // 主要模塊
          chunks: 'all',
          test: /[\\/]node_modules[\\/](react|react-dom|antd)[\\/]/,
          name: 'vendor1',
          maxAsyncRequests: 5,
          priority: 10,
          enforce: true,
        },
        vendor2: { // 次要模塊
          chunks: 'all',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor2',
          maxAsyncRequests: 5,
          priority: 9,
          enforce: true,
          reuseExistingChunk: true,
        },
      },
    },
  }

打包效果以下：

588.06 KB  build/static/js/vendor2.d63694f4.chunk.js
  133.17 KB  build/static/js/vendor1.0d40234c.chunk.js
  98.72 KB   build/static/js/main.b7a98d03.js
  8.2 KB     build/static/css/2.css

能夠看到此時 node_modules 包已經被拆分紅了核心模塊和非核心模塊。

使用動態引入語法 import()

首先使用官網安利的 react-loadable 這個包，它的思想是根據路由(代替模塊)進行代碼的動態分割，異步加載所須要的組件，從而極大地提升頁面加載速率。

在路由界面進行以下配置：

const Loading = () => <div>Loading...</div>

const Home = Loadable({
  loader: () => import('../pages/home'),
  loading: Loading,
})

// 相似這樣使用路由
<Router>
  <Route path="/home" component={Home} />
  <Route path="/follow" component={Follow} />
  <Route path="/tools" component={Tools} />
  <Route path="/music" component={Music} />
  <Route path="/todo" component={Todo} />
  <Route path="/album" component={Album} />
  <Route path="/editor" component={Editor} />
  <Route path="/todoList" component={TodoList} />
  <Route path="/searchEngine" component={Search} />
  <Route path="/waterfall" component={Waterfall} /
</Router>

咱們來看代碼分割後的結果：

這裏測試結果是去掉方案二的配置後進行的，實驗對比後，使用方案三的方式稍優於方案2、三共同使用的方式。

235.89 KB  build/static/js/IndexJs.57ee1596.js
  225.94 KB  build/static/js/15.c09a5919.chunk.js
  138.18 KB  build/static/js/17.30c26142.chunk.js
  82.71 KB   build/static/js/1.667779a6.chunk.js
  57.55 KB   build/static/js/16.f8fa2302.chunk.js
  16.46 KB   build/static/js/2.e7b77a5d.chunk.js
  14.79 KB   build/static/js/18.cad1f84d.chunk.js
  12.51 KB   build/static/js/0.73df11a7.chunk.js
  11.22 KB   build/static/js/13.19501c58.chunk.js
  8.34 KB    build/static/js/5.33fd1c35.chunk.js
  7 KB       build/static/js/8.9f1d0a47.chunk.js
  5.86 KB    build/static/js/12.24f0a7ec.chunk.js
  5.06 KB    build/static/css/18.css
  4.97 KB    build/static/js/polyfill.1c61a660.js
  3.58 KB    build/static/js/7.dd4976e3.chunk.js
  3.53 KB    build/static/js/14.16f6b811.chunk.js
  3.42 KB    build/static/css/17.css
  2.98 KB    build/static/js/10.464a61e4.chunk.js
  2.02 KB    build/static/js/11.3728d5a9.chunk.js
  1.45 KB    build/static/js/6.92fbac58.chunk.js
  1.13 KB    build/static/js/9.59160a3a.chunk.js

有多少個路由，react-loadable 庫就自動幫咱們多拆分了多少個包文件。能夠想象在越大的項目中，這種動態引人庫的好處越明顯。

並且能夠很清晰的看到，當咱們在 /home 下，只有 home 組件是被加載的，其餘組件並無被加載！

那麼 react-loadable 的神祕之力是如何實現的呢，它本質上是個運用了屬性代理的高階函數，經過在高階函數裏配合 import() 加進各類狀態，從而達到異步加載模塊的效果。

參考文獻

code-splitting
Code-Splitting(react)