Javascript 网页包拆分和导入模块_Javascript_Reactjs_Webpack

Javascript 网页包拆分和导入模块

javascript reactjs webpack

Javascript 网页包拆分和导入模块,javascript,reactjs,webpack,Javascript,Reactjs,Webpack,新的网页，特别是代码分裂我开始创建一个vendor.js，方法如下： ... optimization: { splitChunks: { cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all', },

新的网页，特别是代码分裂

我开始创建一个

vendor.js

，方法如下：

    ...
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          },
        },
      },
    },
   ...

import React, { Component } from 'react';

import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

<body>
  <div id="appRoot"></div>
  <script ......many..... />
</body>

filename: 'main.myApp.[contenthash].bundle.js',
chunkFilename: 'bundles/[name].myApp.bundle.js'

这很容易理解，在我的index.html中导入

main.js

和

vendor.js

，效果很好，但我的

vendor.js

文件仍然太大

我在这里找到了一个教程，它建议拆分每个包：

https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

这让我将模块分开，而不是仅仅创建一个大的

vendor.js

文件

https://gist.github.com/davidgilbertson/838312f0a948423e4c4da30e29600b16

  ...
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
  ...

我做到了，效果也很好！我可以按预期在我的

/dist/bundles

文件夹中看到我的所有捆绑包

那么，现在怎么办？ 在my index.html中手动列出

包似乎非常愚蠢理想情况下，我只想在需要的地方导入所有组件——这是否意味着要更改我的所有组件（我很乐意这么做，但怎么做呢？）

我有一个导入以下内容的组件：

    ...
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          },
        },
      },
    },
   ...

import React, { Component } from 'react';

import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

<body>
  <div id="appRoot"></div>
  <script ......many..... />
</body>

filename: 'main.myApp.[contenthash].bundle.js',
chunkFilename: 'bundles/[name].myApp.bundle.js'

看起来这些是相关的文件：

/dist/bundles/npm.react.myApp.bundle.js
/dist/bundles/npm.material-ui.myApp.bundle.js

如何在我的组件中导入这些内容？

我添加了

html网页插件

我指定了具有以下主体的模板：

<body>
  <div id="appRoot"></div>
</body>

我喜欢将

contenthash

添加到

main.js

中，这样当我推送一个新版本时，它会中断缓存，并且我的S3存储桶中会有一个备份/历史记录。

为什么需要更改源代码中的导入？如果一开始没有正确导入这些包，Webpack就不会将它们包含在您的输出中。我不确定从何处导入我刚创建的包最初所有包都在

main.js

中工作（但太大），然后我将它们移动到

vendor.js

中工作（但仍然太大）。然后，我在教程中使用配置将每个包拆分为自己的bundle.js（现在124个），我知道有更好的方法将它们导入到我的应用程序中，而不是在

index.html

中逐个导入它们。我不知道你为什么认为必须在任何地方导入它们。Webpack输出是为web打包的，它通常只需要提供服务。对不起——是的，我使用了错误的术语。我应该如何提供所有124个包裹