Webpack 分包實踐

什麼是分包#

分包（Code Splitting）是一種優化技術，用於將應用程序的代碼分割成多個較小的包，而不是將所有代碼打包成一個單一的文件。這種技術可以顯著提高應用程序的性能和加載速度，特別是在大型應用中。

Webpack 中的分包#

Webpack 經過初始化、編譯、優化、輸出和插件執行等多個階段，把源碼輸出為一個個包（Chunk）。Webpack 中的分包行為自 Webpack4 開始是一個默認行為，並且在配置文件中可以通過optimization.splitchunks這個對象字面量來配置相關行為 (https://webpack.js.org/plugins/split-chunks-plugin/)。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        // 拆分從node_modules中導入的依賴
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        // 拆分公共模塊
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

分包策略#

分包的大致思路有以下兩種

動態導入（dynamic import）
拆分大文件，合併小文件和公共模塊

動態導入#

動態導入也可以說是懶加載，在非必要的時候不拉取模塊文件，只在使用時才從服務端獲取相關文件。Js 內置的import()語句、React 的lazy方法和 vue-router 開箱即用的路由懶加載都是動態加載的實現。

包拆分與合併#

Webpack 在輸出時會根據配置的 filename 給每個 Chunk 加上 hash，合理地拆分那些不會變動的模塊，文件能更長久地緩存在客戶端，並且在多次打包部署中，緩存仍會有效，
根據網絡資源，把大 Chunk 分為多個小 Chunk，能更高效地加載應用。比如 http2 下，這種操作會進一步提高網絡資源的利用率
抽離出幾個 Chunk 的公共部分，避免模塊的重複注入

實踐#

cdn 與緩存組比對
cdn 導入包內容實際上也是實現長效緩存的一種方式，但隨著 tree-shaking 的廣泛應用，cdn 某種意義上來講也成了一種負優化。

1. cdn導入
//webpack.config.js

modules.exports={
  externals: {
    lodash: '_'
  }
}

//index.html
//使用externals將lodash排除，再在模版文件中通過script加載，實際上是直接拉取了整個lodash庫
<script src="bootcdn/ajax/[email protected]/lodash.min.js">

2. 配置緩存組
modules.exports={
  optimization.splitchunks: {
    chunks: "all",
    cacheGroups: {
      // 最後的優化階段，會把並未使用的lodash方法給移除掉，相較於cdn導入，需要加載的代碼量無疑是更少的
	  lodash: {
	    test: [\\/]node_modules[\\/]lodash,
	  }
    }
  }
}

但是在某些場景下 cdn 仍有用武之地，比如服務器使用 http1.1 進行數據傳輸同時依賴較小或者全量使用依賴。

合理拆分不易變動的模塊
Webpack4 的默認拆包行為會把從 node_modules 中導入的依賴全部打包到一個 Chunk 中。其中一些經常變動的依賴，比如公司內部的 sdk 或組件庫可以採用默認的分包策略，但一些長期無變動的依賴，就可以使用緩存組拆分，並長期緩存在瀏覽器

modules.exports={
  optimization.splitchunks: {
    chunks: "all",
    cacheGroups: {
	  vue: {
	    test: [\\/]node_modules[\\/](vue|vue-router|vuex),
	  },
	  lodash: {
	    test: [\\/]node_modules[\\/]lodash
	  },
	  element: {
		test: [\\/]node_modules[\\/]element-ui
	  }
    }
  }
}

懶加載
通過 Js 內置的 import () 方法來動態地導入組件

export default {
  component: () => import('./A.vue'),
}

同理，動態地導入路由組件

const router = createRouter({ 
// ... 
  routes: [ 
    { path: '/a', component: () => import('./views/A.vue') }, 
  ]
})

一些框架內置的懶加載方法，比如 react 中的 lazy

import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';

const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));

export default function MarkdownEditor() {
  const [showPreview, setShowPreview] = useState(false);
  const [markdown, setMarkdown] = useState('Hello, **world**!');
  return (
    <>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <label>
        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
        Show preview
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Preview</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}