javascript - 如何在不进行动态导入的情况下将Commons js拆分？(How to split commons js in next without dynamic imports?)

Question

I have a file in my project that has several export ASSET_NAME = require('/assets/myAsset.png') exports like this, I use it for some ui bits that I want to use url-loader on in order to base64 these asset images.(我的项目中有一个文件，其中有几个export ASSET_NAME = require('/assets/myAsset.png')导出，我将其用于一些ui位，我希望使用url-loader以便对这些资产进行base64图片。)

I then use this file in various pages of my project ie import { ASSET_NAME } from "./assets.js"(然后，我在项目的各个页面中使用此文件，即import { ASSET_NAME } from "./assets.js") After inspecting my built project I can see that all these base64 strings are located in my commons.js file.(检查commons.js构建的项目后，我可以看到所有这些base64字符串都位于我的commons.js文件中。) Ideally I'd want this file to be it's own something like assets.js so it can load in parallel with commons.js .(理想情况下，我希望该文件拥有诸如assets.js之类的东西，以便可以与commons.js并行commons.js 。) After reading the doc's only method I saw to do this was via dynamic imports , however I don't want to await this file nor load it when user makes certain action, I just want it to be separate file loaded to my page in parallel / separate from commons,js(阅读文档的唯一方法后，我看到是通过动态导入完成的 ，但是我不想等待此文件，也不想在用户执行某些操作时加载它，我只是希望将其作为单独的文件以并行方式加载到我的页面中/与Commons，js分开)   ask by Ilja translate from so

Answer 1

You need to specify a new splitChunk in your next.config.js file.(您需要在next.config.js文件中指定一个新的splitChunk 。)

// next.config.js module.exports = { webpack(config, options) { if (!options.isServer) { config.optimization.splitChunks.cacheGroups.assetsChunk = { chunks: 'all', enforce: true, minChunks: 1, name: 'assets-chunk', priority: 10, test: /[\/]path-to-your-asset[\/]/, }; } return config; }, }; Just replace path-to-your-asset to the import path (or some of it as it is a regex).(只需将path-to-your-asset替换为导入路径（或因为它是正则表达式而将其替换）即可。) For more info read splitChunks docs .(有关更多信息，请阅读splitChunks docs 。)