webpack 为什么splitChunks：'initial'不会在我的项目中生成单独的块吗？

pinkon5k 于 2023-05-18 发布在 Webpack

关注(0)|答案(1)|浏览(158)

下面是我的项目中的文件，以及webpack.config.js。

//index.js
import './a';
import './b';

//a.js
import './helpers'

//b.js
import './helpers'

//webpack.config.js
const path = require("path");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  entry: './src/index.js',
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  optimization: {
    splitChunks: {
      chunks: 'initial'
    }
  },
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

a.js和b.js都导入helpers.js。和helpers.js的大小大于30kb。我认为helpers.js将被拆分成一个单独的块。但实际上我得到的结果是这样的：

我想知道的是
1.为什么a.js和b.js没有出现在最终结果中？
1.为什么helpers.js没有被分割成一个单独的块？

webpack

来源：https://stackoverflow.com/questions/75703884/why-does-splitchunks-initial-not-generate-a-separate-chunk-in-my-project

1条答案

按热度按时间

5anewei61#

要生成的块有一个最小大小。大约20 KB。
要消除限制，您需要将splitChunks.minSize指定为零。
splitChunks应该看起来像这样：

splitChunks: {
    chunks: 'all',
    minSize: 0,
    cacheGroups: {
        default: {
            // get all modules excluding entry points
            // entry point will be separate anyway
            test: module => !module.isEntryModule(),
            name: module => {
                const matchName = module.identifier().match(/(\w+)\.js$/)

                // name chunk like 'a', 'b' or 'helpers'.
                // by default it's 'a_js' for some reason
                return matchName[1]
            }
        }
    }
}

赞(0）回复(0）举报 2023-05-18

我来回答

webpack 为什么splitChunks：'initial'不会在我的项目中生成单独的块吗？

1条答案

相关问题

热门标签

最新问答