webpack拆分和导入模块

沙尔顿

webpack的新增功能,专门用于代码拆分。

我开始vendor.js使用以下方法创建一个

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

这很容易理解,可以导入,main.js并且vendor.js在我的index.html中可以很好地工作,但是我的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按预期看到文件夹中的所有捆绑包

所以现在怎么办?手动列出我的index.html中软件包似乎很傻124我希望只在需要的地方将它们全部导入-​​这是否意味着更改我的所有组件(这样做很酷,但是如何?)


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

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

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

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

如何/应该将这些导入我的组件中?

沙尔顿

我添加了html-webpack-plugin https://github.com/jantimon/html-webpack-plugin我指定了具有以下主体的模板:

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

导致以下结果:

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

FWIW,我还用以下内容更新了我的output道具webpack.config

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

我喜欢加入contenthashmain.js所以它会打破缓存,当我推一个新的构建和我有一个备份/历史在我的S3存储桶。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章