「面试三板斧」代码分割（下）

背景

本文接上两篇：

「面试三板斧」之代码分割（上）

「面试三板斧」之代码分割（中）

在上两篇文章中，我们了解了 splitChunks 三个字段的含义。

分析了每个字段对应的行为，最后了解了分包的原理。

今天是实践篇。

看看如何修改短短几行配置，就达到了数百毫秒的优化效果。

正文

我的这个项目，迭代一年多了，中间打包配置也没没怎么改过，毕竟也没什么问题，速度也还可以。

刚好最近要搞优化，就顺带看了看。

不分析不知道，这一分析，很快啊！

马上就看出了问题。

看包分析结果：

脑海里瞬间闪过一张图：

几乎所有的三方依赖都打在了一起，写好的页面按路由加载也都打到了一起...

简直辣眼睛...

于是就去看了一下代码配置：

修正前

原始配置：

代码语言：javascript复制


const OnBoard = React.lazy(() => import('@/pages/onboard'));

const menuData = MenuItemTypes[] = [
  {
    title: 'onboard',
    path: '/onboard',
    meta: { showInMenu: false },
    children: [
      {
        component: OnBoard,
        // ...
      },
      // ...
    ]
  },
  // ...
];

代码语言：javascript复制

const AppRouter = () => {
  // ...
  const { el, routes } = getRoutes(menuData);
  // ...
   
  return (
    <BasicLayout {...matchedRoute.meta}>
      <Suspense fallback={<Spin />}>
        <Route path="/" exact component={MyDashboard} />
        {el}
      </Suspense>
      // ...
    </BasicLayout>
  );
};

代码语言：javascript复制

const App: React.FC<> = () => {
  // ...
  return <AppRouter />;
};

const AppContainer = () => (
  <Router history={history}>
    <Provider store={store}>
      <Locale>
        <App />
      </Locale>
    </Provider>
  </Router>
);

看起来没什么问题。

看了一下 webpack 配置：

代码语言：javascript复制

  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules/,
          enforce: true,
          priority: 5,
        },
        antd: {
          test: /[\/]node_modules[\/]antd[\/]/,
          priority: 10,
        },
        antdIcons: {
          test: /[\/]node_modules[\/]@ant-design[\/]/,
          priority: 15,
        },
        styles: {
          test: /.(scss|css)$/,
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
          priority: 20,
        },
      },
    },
  },

代码语言：javascript复制

看起来貌似也没什么问题。。。

build 之后 html 中的脚本，乍一看好像也没毛病...

代码语言：javascript复制

<script type="text/javascript" src="/main.75a8d9f8.js"></script>
<script type="text/javascript" src="/chunk.styles~main.eaa8f358.js"></script>
<script type="text/javascript" src="/chunk.antdIcons~main.6ee35491.js"></script>
<script type="text/javascript" src="/chunk.vendor~main.aa82abbc.js"></script>
<script type="text/javascript" src="/chunk.main.db1b67a1.js"></script>

这种情况下，修改 chunks 配置的对比：

chunks: all

包分析：

加载时间以及入口文件初始加载的脚本文件：

`chunks: async`:

代码语言：javascript复制

  <script type="text/javascript" src="/main.64245819.js"></script>
  <script type="text/javascript" src="/chunk.main.d6a

代码语言：javascript复制

几乎没有什么变化，一时间，开始怀疑是不是受了其他配置的影响。。。

就去仔细去找了一下，果然：

啊这。。。。我倒要看看是谁：

算了算了。。。

‍‍‍然后速度修改了配置。‍‍‍

修正后:

代码语言：javascript复制

  optimization: {
    runtimeChunk: {
      name: 'manifest',
    },
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules/,
          enforce: true,
          priority: 5,
        },
        antd: {
          test: /[\/]node_modules[\/]antd[\/]/,
          priority: 15,
          enforce: true,
        },
        antdIcons: {
          test: /[\/]node_modules[\/]@ant-design[\/]/,
          priority: 15,
          enforce: true,
        },
        antdV: {
          test: /[\/]node_modules[\/]@antv[\/]/,
          priority: 30,
          enforce: true,
        },
        bizcharts: {
          test: /[\/]node_modules[\/]bizcharts[\/]/,
          priority: 20,
          enforce: true,
        },
        dplayer: {
          test: /[\/]node_modules[\/]dplayer[\/]/,
          priority: 25,
          enforce: true,
        },
        styles: {
          test: /.(scss|css|less})$/,
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
          priority: 20,
        },
        'react-dom': {
          test: /[\/]node_modules[\/]react-dom[\/]/,
          priority: 25,
          enforce: true,
        },
        'rc-components': {
          test: /([\/]node_modules[\/]rc-[a-zA-Z-] [\/])/,
          priority: 25,
          enforce: true,
        },
      },
    },
  },

代码语言：javascript复制

很快啊!

马上就有了效果：