React项目优化打包、懒加载

2021-02-26

单页应用难点之一是大项目瘦身，打包技术学问很多也很深。

列举若干优化方向，具体细节实现自寻。

合并核心文件

项目初始化必须预加载的文件合理合并，减少网络请求次数。像全局的css、核心框架等文件。

资源压缩

  1. 图片资源压缩
  2. 代码文件压缩
  3. 部分常用小图小状态（如loading）用代码实现，减小体积

webpack打包

使用splitChunks，cacheGroups抽离依赖，如node_modules包等。

webpack水很深，对它学习还不太到位，有时候node_modules包如果分离不出来，可尝试多用React.lazy细分组件就能抽离。

optimization: {
    runtimeChunk: 'single',
    splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        // 抽离依赖
        cacheGroups: {
            // 将 node_modules 用到的包，每个都单独打包成一个 js 文件
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name(module) {
                    // get the name. E.g. node_modules/packageName/not/this/part.js
                    // or node_modules/packageName
                    const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                    // npm package names are URL-safe, but some servers don't like @ symbols
                    return `npm.${packageName.replace('@', '')}`;
                },
            },
            // 对于通过 MiniCssExtractPlugin 生成的 CSS 文件也可以通过 SplitChunks 来进行抽取公有样式
            styles: {
                name: 'styles',
                test: /\.css$/,
                chunks: 'all',
                enforce: true,
                priority: 100,
            }
        },
    },
}

代码分割懒加载

React代码分割：Code-Splitting。

文档很详细，主要用到React.lazy，能让你像渲染常规组件一样处理动态引入，十分方便。lazy资源打成独立包，按需加载，极大优化体验。

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}
技术