Optimization 网页包-优化节点模块&；进口

配置网页我想知道一些优化的东西。我有两个JS文件index.JS和helper.JS。我在index.js中导入helper.js，如下所示：

import * as helper from 'helper.js';

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

在这两个JS文件中，我导入了一些node_模块

关于，为了防止代码和缓存重复，您可以这样做：

  const path = require('path');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      index: './src/index.js'
    },
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist')
    },
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    }
  };

• 如果我对优化很了解的话，它只从文件夹节点创建了一个供应商文件？它将从文件夹节点_模块导入所有内容，即使我不使用所有内容（例如devdependences）

• 它是否考虑在供应商的index.js中导入helper.js

• 为什么他们在提供的链接中使用runtimeChunk

或者我应该这样做：

import * as helper from 'helper.js';

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

---

希望您能帮助我

您不需要

测试

，因为它默认为node_模块。它将只编译您使用的。从html中包含文件时，请记住在应用程序1之前先包含该文件

它将拆分所有供应商模块，而不管这些模块来自哪个文件

但值得注意的是，由于您正在将helper.js导入index.js并创建一个捆绑包，只要helper.js不是编译为非es6模块的第三方模块，webpack就不会复制节点_模块，而是共享它们

换句话说，webpack将自动在您自己的源文件中对内容进行树震动，并在node_模块中对es2016模块进行树震动（不是最常见的CJS/UMD模块）

只有在以下情况下，您才需要拆分为供应商捆绑包：

a） 与src代码相比，您的供应商包更改的频率要低得多（如果您经常运行

npm update

，则不太常见）

b） 您正在生成多个输出文件，并且希望它们共享vendor.js/您不希望将它们声明为外部文件并让消费者安装它们（例如组件库）

另外，我不确定runtimeChunk的作用是什么，但就我个人而言，除非你有充分的理由，否则我不会指定它（将其保留为默认值）