Question

主要问题是在使用react-routerV4然后使用webpack 2进行代码拆分时，我有几个模块，我无法访问主模块。

我的配置如下：

Webpack 2.2.1
React-route 4.1.1

我正在使用react-router v4 documentation

中的代码拆分

基本上，我不使用导入，但是在路由配置上我有：像这样：

import loadHome from 'bundle-loader?lazy&name=home-chunk!./pages/market/Home';
[
  {
    path: url1,
    component: props => <Bundle load={loadHome}>{Home => <Home {...props} />}</Bundle>,
    exact: true,
  },
  // other routes
  ]

这对于代码拆分完全正常，我得到了每个路由的一个包，以及我稍后可以拆分的node_modules的另一个包。

我的问题是，我有几个bundle中的一个node_module（react-slick）。所以我想在主要包中找到它。

我的网站配置是：

module.exports = {
  entry: [
    'whatwg-fetch',
    './src/scripts/index.js',
  ],
  output: {
    path: path.resolve(__dirname, 'src/build'),
    publicPath: '/build/',
    chunkFilename: "[name].js?[hash]",
    filename: '[name].js',
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"production"'
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['4_node-modules'],
      minChunks(module) {
       const context = module.context;
       return context && context.indexOf('node_modules') >= 0;
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['3_react'],
      chunks: ['4_node-modules'],
      minChunks(module) {
        return module.context && /.*\/react.*/.test(module.context);
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
        children: true,
        minChunks: 2,
    }),
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true,
    }),
    new HtmlWebpackPlugin({
      filename: '../index.prod.html',
      template: 'src/template.index.prod.html',
      inject: false,
      hash: true,
    }),
  ],
};

根据文档，这应该可以解决问题：

new webpack.optimize.CommonsChunkPlugin({
    children: true,
    minChunks: 2,
}),

但没有任何反应，我的3个捆绑包中仍然有“反应灵敏”。

有没有人暗示发生了什么？

感谢任何帮助:)谢谢！

Answer 1

我终于得到了解决方案;）

我这样做可能有助于某人。

答案是：没有指定chunk并没有显然针对所有的块，而只是最后一个块。

所以，让我们说使用react-router V4，我们已经创建了2个异步块＆＃39; home-chunk＆＃39;和＆＃39; welcome-chunk＆＃39;。从中获取公共块的方法是添加webpack配置文件（在插件中）：

new webpack.optimize.CommonsChunkPlugin( {
  name : 'common',
  chunks : ['home-chunk', 'welcome-chunk'],
  minChunks : 2,
}),

这将检查异步块中是否存在通用模块，如果存在，则将它们放在公共块中。

Answer 2

下面的答案是从这里复制的：How to remove duplicate Ant Design components across chunks

无需修改webpack的解决方案：

在父级组件（或更高级别的父级）上，在此处执行完全相同的导入。

import { Row, Col, Button } from "antd"

您也可以使用React.lazy导入此处。我认为没有必要，但是您可以将其放在useEffect中，这样，只有在安装了父组件时，应用程序才能读取此代码。

useEffect(() => {
  React.lazy(() => import("antd"))
}, []);

在子组件中，使用与普通代码相同的代码导入以使用变量。 Webpack认识到该模块已经下载，因为父组件仍然存在，因此它不将其包含在新的捆绑软件中。

import { Row, Col, Button } from "antd"

Webpack - React Router V4 - 在异步块中分割重复模块的代码

2 个答案: