希望出一个 Next.js 按需加载的插件

[kwooshung]

• I'm sure this does not appear in the issue list of the repository

Basic Info

What are the similar cases of this feature

参考下这个：https://www.npmjs.com/package/next-plugin-antd-less，antd 的一个第三方插件，不过没有按需加载的实现，因为配置babel就行，但是arco，按照需求配置babel无效。

What problem does this feature solve?

我使用 Next.js 12 无法成功实现 按需加载，不只是我配置的问题还是什么？始终显示：Cannot use import statement outside a module，查阅了好多资料

[doyu2020]

结合 next-transpile-modules 这个插件可以实现.

yarn add next-transpile-modules

这是我的配置.

next.config.js

const withAntdLess = require('next-plugin-antd-less');

const withTM = require('next-transpile-modules')([
    '@arco-design/web-react'
]);
/** @type {import('next').NextConfig} */
const nextConfig = {
    lessLoaderOptions: {
        lessOptions: {
            modifyVars: {
                'arcoblue-6': '#3abd8f'
            }
        }
    },
    lessVarsFilePath: './src/styles/variables.less', // optional
    lessVarsFilePathAppendToEndOfContent: false, // optional
    // optional https://github.com/webpack-contrib/css-loader#object
    cssLoaderOptions: {
        mode: "local",
        localIdentName: "[hash:base64:8]",
        exportLocalsConvention: "camelCase",
        exportOnlyLocals: false
    }
}

module.exports = withAntdLess(withTM(nextConfig))

.babelrc.js

module.exports = {
    presets: [['next/babel']],
    plugins: [
        [
            'import',
            {
                libraryName: '@arco-design/web-react',
                libraryDirectory: 'lib',
                camel2DashComponentName: false,
                style: true, // 样式按需加载
            },
        ]
    ],
};