Compilation Configuration

• The framework uses Esbuild by default for compilation because it is really fast.
• No configuration is required under normal circumstances, and you can also configure it according to your needs in the configuration file ndsk.config.js

module.exports = (isPro)=>{
    return {
        esbuild:{
            commentChunk:[],                                    //Separate the specified package, excluding react react-dom
            esmModule:[],                                       //Configure packages that only support esm, for example: react-markdown
            showCompileTime:true,                               //Whether to display the compilation time, the default is true
            parallel:true,                                      //Whether to compile in parallel depends on the computer performance, the default is true
            sscr:true,                                          //Whether to enable sscr in development mode, default is true
            liveLoad:true,                                      //Whether to enable live reload, default is true
            splitting:true                                      //Whether to enable code splitting, default is true
            plugins:[],                                         //https://esbuild.github.io/plugins/#using-plugins
            // ...see https://esbuild.github.io/api/#build      //The above are some additional configurations in the framework. For detailed configuration of esbuild, please refer to the esbuild documentation
        }
    }

• You can also specify certain directories to enable code splitting, for example: src/pages/index src/pages/app specify these two directories to enable code splitting, while other directories are not enabled

module.exports = (isPro)=>{
    return {
        esbuild:{
            splitting:['/index', '/app'],
        }
    }
}

Some notes

• The framework will load react by default, so there is no need to import it repeatedly on each page

• If you need to configure global, you should write it in the first entry file layout.js

Solve the problem that the blocks shared between modules always become many small blocks in code splitting

Normally, this problem rarely occurs in project development, but when some additional packages are introduced, it may cause the current problem. You can solve it like this:

1. You can set splitting:false in the configuration file to turn off code splitting

2. Add the problematic npm module to commentChunk, which will extract the entire package separately instead of splitting it into many small blocks

module.exports = (isPro)=>{
    return {
        esbuild:{
            // splitting:false,
            commentChunk:['xxxxx']
        }
    }
}

Loading packages that only support esm

• In some cases, the package you import only supports esm. In this case, you need to configure esmModule in the configuration file

module.exports = (isPro)=>{
    return {
        esbuild:{
            esmModule:['xxxx']
        }
    }
}

Next step

Server-side rendering