idea2020代码el组件红色波浪线_面试三板斧代码分割（下）

最新推荐文章于 2023-09-06 09:51:02 发布

Elaine要当律师

最新推荐文章于 2023-09-06 09:51:02 发布

阅读量202

点赞数

文章标签： idea2020代码el组件红色波浪线

本文链接：https://blog.csdn.net/weixin_31681589/article/details/113079476

版权

背景

本文接上两篇：

「面试三板斧」之代码分割(上)

「面试三板斧」之代码分割(中)

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

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

今天是实践篇。

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

正文

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

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

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

马上就看出了问题。

看包分析结果：

脑海里瞬间闪过一张图：

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

简直辣眼睛...

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

修正前

原始配置：


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

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

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

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

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

看起来没什么问题。

看了一下 webpack 配置：

  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,
        },
      },
    },
  },

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

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

<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`:

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

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

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

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

算了算了。。。

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

修正后:

  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,
        },
      },
    },
  },