记录下 NextJs 相关优化知识与踩过的坑 等待伊始-lcnoob

1、使用 preact 优化 nextjs 构建体积

  // package.json 需要安装的包
  {
    "preact": "^10.4.6",
    "preact-render-to-string": "^5.1.10",
    "react": "npm:@preact/compat",
    "react-dom": "npm:@preact/compat"
  }

  // next.config.js 相关webpack配置
  webpack(config) {
      Object.assign(config.resolve.alias, {
        'react': 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat'
      })
  }

其中这里面有一个坑：当正常按照上面的方式进行配置后，开发环境我没有遇到问题，但是一旦发布到生产环境就会出现问题：问题issues。

解决的方法：新增 next-plugin-preact，next-compose-plugins 包，同时移除 webpack 相关配置。

  // package.json 需要安装的包
  "next-compose-plugins": "^2.2.1",
  "next-plugin-preact": "^3.0.6"

  // next.config.js
  const withPlugins = require('next-compose-plugins');
  const withPreact = require('next-plugin-preact');
  
  module.exports = withPlugins([withPreact], nextConfig)

2、按需引入 antd

antd 版本：v4
webpack 版本: v5

虽然 v12 加入了 swc，但 swc 暂时还没有提供 babel-plugin-import 类似的功能。

• 安装前置包：less，less-loader，next-with-less，next-transpile-modules，babel-plugin-import

• next-with-less：让 Next.js 支持 less 。

• next-transpile-modules：处理一下node_modules中的 antd ,让 Next.js 可以 引入 组件的css文件。

•   // next.config.js 
    // 转换 antd ,用来支持 按需引入组件css
    const withTM = require('next-transpile-modules')(['antd']);
    const withPlugins = require('next-compose-plugins');
    const plugins = [
      [
            nextWithLess,
            {
                // 配置 less变量, 可以看到页面中的按钮都变成了红色
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: {
                            // '@primary-color': 'red',
                        },
                    },
                },
                javascriptEnabled: true,
            },
        ],
        [withTM],
    ];
  
    module.exports = withPlugins([...plugins], nextConfig)
  
    // _app.tsx
    // 删除 import 'antd/dist/antd.css'
    // antd 动画 css
    import "antd/lib/style/index.css";
  

3、优化构建体积

  // next.config.js 
  const HashedModuleIdsPlugin = require('webpack/lib/ids/HashedModuleIdsPlugin')

  webpack: (config, { dev, isServer }) => {
    // 开发环境 优化导致 程序异常
    if (!dev) {
      let optimization = {
        minimize: true,
        splitChunks: {
          chunks: 'all',
          maxSize: 200 * 1024, // 拆分较大体积的包
        }
      }

      if (isServer) {
        config.plugins = [
          ...config.plugins,
          new HashedModuleIdsPlugin(),
        ]

        optimization.splitChunks.cacheGroups = {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name (module) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)
              // 取得名称。例如 /node_modules/packageName/not/this/part.js
 
              if (packageName) {
                // npm package 是 URL 安全的，但有些服务不喜欢 @ 符号
                return `npm.${packageName[1]?.replace('@', '')}`
              }
            }
          }
        }
      }
  
      Object.assign(config.optimization, optimization)
    }

    return config
  }