时间戳

首页 > 解决方案 > Webpack - 优化节点模块和导入

optimization - Webpack - 优化节点模块和导入

问题描述

配置 webpack 我想知道一些优化的东西。我有两个 JS 文件 index.js 和 helper.js。我像这样在 index.js 中导入 helper.js：

import * as helper from 'helper.js';

在这两个 JS 文件中，我导入了一些 node_modules。

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

  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'
          }
        }
      }
    }
  };

或者我应该这样做：

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

希望你能帮助我

标签： optimizationwebpackwebpack-4

解决方案

您不需要它，test因为它默认为 node_modules。它只会编译你使用的那些。从您的 html 中包含它们时，请记住在您的应用程序之前首先包含该文件。

它会将所有供应商模块拆分出来，无论它们来自哪个文件。

值得注意的是，由于您将 helper.js 导入 index.js 并创建一个包，webpack 已经不会复制 node_modules 而是共享它们，只要 helper.js 不是编译为非第三方模块es6 模块。

换句话说，webpack 会自动在你自己的源文件中摇树，以及 node_modules 中的 es2016 模块（不是最常见的 CJS/UMD 模块）。

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

a）您的供应商捆绑更改频率比您的 src 代码低得多（如果您经常运行，则不常见npm update）

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

PS 不完全确定runtimeChunk它的用途，但我个人不会指定它（将其保留为默认值），除非你有充分的理由。

推荐阅读