标签: webpack-splitchunks

我想通过以下方式使用 Webpack 分割我的块：

每当我导入 NPM 包时，例如

import styled from "styled-components";

我想要一个像这样的块：

styled-components.[contenthash:5].js  // INCLUDING ITS DEPENDENCIES

这是我正在使用的配置：

webpack.config.js

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
          return `npm.${packageName.replace('@', '')}`;
        },
      },
    },
  },
}

现在我将每个依赖项styled-components作为不同的块。例如：下面的3个包都是需要的styled-components

理想情况下，我还希望有一个commons或shared块以避免多个模块需要可能的模块。

有人知道该怎么做吗？

Webpack 配置是 Vue CLI 设置的一部分（可以使用 进行检查vue inspect）。这是其中的一个相关部分：

  entry: {
    foo: [
      '.../src/foo.js'
    ],
    barWidget: [
      '.../src/barWidget.js'
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    },
    ...

而 HTML 输出是：

<script type="text/javascript" src="/assets/js/chunk-vendors.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/foo.[HASH].js"></script>

和

<script type="text/javascript" src="/assets/js/chunk-vendors.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/barWidget.[HASH].js"></script>

foo根据需要拥有尽可能多的脚本标签没有问题，但barWidget小部件入口点应该立即加载，没有初始块依赖性。我的目的是barWidget加载一行代码（为此可能会禁用散列）：

<script type="text/javascript" src="/assets/js/barWidget.js"></script>

但在当前状态下，如果chunk-vendors …

我正在尝试按以下方式使用 splitChunks 插件拆分我的 React 代码（使用 create-react-app 创建）：

我有以下组件（JSX）结构：

• 服务
  • 服务A
    • 组分A1
    • 组分A2
    • 子文件夹
      • 组分A3
    • ...
  • 服务B
    • 组件B1
    • 组件B2
    • ...
  • 服务C
    • 组件B1
    • 组件B2
    • ...
  • ...

我想要以下输出（构建）：

• 静态/js
  • 服务A
    • serviceA.bundle.chunkhash.js
  • 服务B
    • serviceB.bundle.chunkhash.js
  • 服务C
    • serviceC.bundle.chunkhash.js

（其他运行时/主电源位于 /static/js 的根目录下）

另一个限制是组件是动态加载的

const Component = lazy(() => import(componentPath));
...
<Suspense fallback={..}>Component</suspense>

“componentPath”是动态确定的（当用户单击图标时，它会打开给定的服务）。

这样做的原因是我想将每个包包含到运行后端的单独 Docker 映像中。然后，由于应用程序路由，每个 Docker 映像都可以访问：

static/js/serviceA/  ==> js served by Docker container running service A
static/js/serviceB/  ==> js served by Docker container running service B
static/js/serviceC/  ==> js served by Docker container running service …

我们使用 webpacksplitChunks来捆绑共享包，现在我们对我们的模块进行了 tree shake。（我们的图标、ui 组件、钩子和助手都是 npm 包）。

问题是，我们的包是完全可以进行树摇动的，但是splitChunks我们所有的包都被视为vendor~main.js并导入，没有任何树摇动。

Tree Shaking 只适用于本地进口吗？我们应该如何将 tree shake 和 splitChunks 用于 npm 包？

我从 create-react-app 的新副本开始。然后我运行弹出，并想添加代码分割。但是，每当我添加

splitChunks: {
        automaticNameDelimiter: '.',
        chunks: 'all',
      },

该应用程序卡在正在启动开发服务器...

如果我删除chunks: all该应用程序将再次开始工作。

注意：我根本没有改变任何其他内容。

1. npx create-react-app my-app --template typescript
2. cd 我的应用程序
3. npm 运行弹出
4. 编辑 webpack.config.js
5. npm 启动
6. 卡在启动开发服务器上......

我没有收到任何错误或任何关于如何找出问题所在的有用信息。它只是卡住了，有什么想法可能是错误的，或者我可以做些什么来获得更多关于卡住的地方的调试信息吗？

webpack.config.js

module.exports = function (webpackEnv) {
  const isEnvDevelopment = webpackEnv === "development";
  const isEnvProduction = webpackEnv === "production";

  const isEnvProductionProfile =
    isEnvProduction && process.argv.includes("--profile");

  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));

  const shouldUseReactRefresh = env.raw.FAST_REFRESH;

  // common function to get style loaders
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders …

我正在尝试使用 React.lazy() 来减小主 webpack 包的大小。我延迟加载的组件已成功拆分为自己的 js 块，在需要时按需下载。

但是，延迟加载组件的依赖项仍然包含在主 js 包中。这是预期的行为吗？如何正确地将延迟加载组件的依赖项拆分为自己的块或包含在延迟加载组件的块中？

// This code is part of our main bundle\nconst LazySection = React.lazy(() => import('./BaseSection'));\nconst Section = (\n    <Suspense>\n        <LazySection />\n    </Suspense>\n);\n\xe2\x80\x8b\nexport default Section;\n\xe2\x80\x8b\n\xe2\x80\x8b\n// This code is split into its own chunk\nimport { OtherComponent } from './OtherComponent ';\nimport { NonReactStuff } from './NonReactStuff'; \n// NonReactStuff is included in main bundle. How can I split into a separate lazy loaded chunk \n// or part of the BaseSection chunk?\n\xe2\x80\x8b\nconst BaseSection = …

我有一个问题,了解Webpack splitChunks插件的行为.我正在研究的是将现有站点上的旧脚本重写为组件并使用Webpack进行捆绑.捆绑只是JS,大多数是在身体的末端加载.但是一个小脚本需要位于页面的标题中,因为它还会在标题和正文中创建很少的全局方法,主要用作内联脚本.由于它用于GA跟踪,它不会改变,事件必须尽快发送.

下面的配置工作适合我,但问题是,为什么它的工作原理只是这样？

确切的问题是在下面的代码中的注释,但我也把它放在这里:我不明白为什么有必要也包括!isUsedInAppHeader在common块的条件.如果没有!isUsedInAppHeader条件,则不会common.header创建块.然后,当我尝试通过为common.header块添加更高优先级来修复它时,它会导致脚本中的脚本异步初始化app.header.js.

异步行为是我根本不理解的,因为它从未发生过app.js.

实际上,我有另一个问题.是否可以导出一个同时立即初始化的公共块？或者你会提出另一个解决方案吗？标题中的脚本无法移动,也必须同步初始化,因为它的主要作用是为GA跟踪创建全局方法,这些方法必须立即用于以下代码中.

谢谢!

Webpack配置:

...
gulp.task('webpack', function(callback) {
    var settings = {
        ...
        entry: {
            'app.header':   './js/app.header.js',
            'app':          './js/app.js',
            ... // page specific files etc.
        },
        ...
        optimization: {
            splitChunks: {
                cacheGroups: {
                    // Node modules used in app.js
                    vendorsApp: {
                        test(module, chunks) {
                            let isInAppEntryPoint = chunks.map(chunk => chunk.name).includes('app');
                            let isNodeModule = /\/node_modules\//.test(upath.normalize(module.resource));
                            return isInAppEntryPoint && …