如何在 webpack 2 中将一个大的子文件拆分成一个单独的块

Question

我正在尝试将一个大文件导入到一个由 webpack 2 分块和丑化的 React 项目中。

我们的代码被分成了多个块，其中一个块是 29MG。我想从卡盘中排除大文件并单独加载该大文件。

如何使用 webpack 2 将大文件拆分为它自己的块？

我的文件

reactComponent 导入一个 js 文件，该文件包含将页面导出为 PDF 的代码

reactComponent.js -> import createPDF.js

在 createPDF 中，我导入了一个非常大的文件，我想将该文件从支票中拆分出来。该文件不在 node_modules.

下

createPDF.js -> import largeFile.js

我的一些 webpack 配置

     entry: {
        vendor: [
          'react',
          'react-dom',
          'lodash',
          'moment',
          'underscore',
          'redux-thunk',
          'react-bootstrap-table',
          'react-bootstrap-daterangepicker',
          'react-bootstrap-multiselect',
          'react-bootstrap',
          'react-translate-component'
        ],
        app: [ './index.js' ]
      },
      plugins: [
        // compresses the JS
        new webpack.optimize.UglifyJsPlugin({
          exclude: /^2(.*?)\.js$/i, // exclude the very large file
          compress: { warnings: false },
          sourceMap: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          minChunks: Infinity,
          filename: '[name].[hash].js'
        }),
      ],

我可以用这种方法拆分那个文件吗？ TIA！

Answer 1

我最终这样做了，我不确定这是否是拆分包的正确方法，但它对我有用。

我将单独块中想要的包添加到供应商的列表中。

   entry: {
      vendor: [
        'react',
        'react-dom',
        'lodash',
        'moment',
        'underscore',
        'redux-thunk',
        'react-bootstrap-table',
        'react-bootstrap-daterangepicker',
        'react-bootstrap-multiselect',
        'react-bootstrap',
        'react-translate-component',
        './other/fontPDF',
        './other/fontPDF.map',
        './other/exportCaseToPDF',
        'pdfmake/build/pdfmake'
      ],
      app: [ './index.js' ]
    },

除其他文件夹下的内容外，所有包都将进入供应商区块

    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks(module, count) {
            var context = module.context;
            if (context && context.indexOf('public/newPortal/other') >= 0) {
                return false;
            }
            return true;
        },
        filename: '[name].[hash].js'
    }),

我确保只有其他文件夹下的文件被放入新块

    new webpack.optimize.CommonsChunkPlugin({
        name: 'other',
        minChunks(module, count) {
            var context = module.context;
            return context && context.indexOf('public/newPortal/other') >= 0;
        },
        filename: '[name].[hash].js'
    }),

我从 uglify 中排除的大文件，因为它崩溃了...

    new webpack.optimize.UglifyJsPlugin({
        exclude: /^other(.*?)\.js$/i,
        compress: { warnings: false },
        sourceMap: true
    }),

如何在 webpack 2 中将一个大的子文件拆分成一个单独的块

How to split a large sub file into a separate chunk in webpack 2

reactjs

npm

webpack

webpack-2

commonschunkplugin

我的文件

我的一些 webpack 配置