如何在没有动态导入的情况下拆分commons js？答案

【问题标题】：How to split commons js in next without dynamic imports?如何在没有动态导入的情况下拆分commons js？
【发布时间】：2019-11-29 09:35:48
【问题描述】：

我的项目中有一个文件，其中包含多个像这样的export ASSET_NAME = require('/assets/myAsset.png') 导出，我将它用于一些我想使用url-loader 的ui 位，以便对这些资产图像进行base64。

然后我在项目的各个页面中使用这个文件，即import { ASSET_NAME } from "./assets.js"

检查我构建的项目后，我可以看到所有这些 base64 字符串都位于我的 commons.js 文件中。理想情况下，我希望这个文件是它自己的东西，比如assets.js，这样它就可以与commons.js 并行加载。在阅读了文档的唯一方法后，我看到这样做是通过dynamic imports，但是我不想等待这个文件，也不想在用户进行某些操作时加载它，我只是希望它是并行加载到我的页面的单独文件/ 与commons、js分开

【问题讨论】：

标签： javascript webpack next.js

【解决方案1】：

您需要在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;
  },
};

只需将path-to-your-asset 替换为导入路径（或其中一些，因为它是正则表达式）。

更多信息请阅读splitChunks docs。

【讨论】：

您是否有机会详细说明为什么需要在这里进行客户端检查？ !options.isServer
通常分块对服务器端没有任何影响，如果你想将它应用到服务器端（为什么？），你可以去掉这个检查：]
你知道我如何将块的数量限制在不超过 3 个，我在使用 google bot 时遇到了很多麻烦。