Как разделить большой вложенный файл на отдельный кусок в веб-пакете 2 - PullRequest
Новая
       45

Как разделить большой вложенный файл на отдельный кусок в веб-пакете 2

0 голосов
/ 31 января 2019

Я пытаюсь импортировать большой файл в реактивный проект, который Chunked и Uglified с помощью веб-пакета 2.

Наш код разбит на куски, один из наших кусков - 29MG.Я хочу исключить большой файл из чака и загрузить этот большой файл отдельно.

Как я могу разделить большой файл на его собственный кусок с помощью веб-пакета 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'
        }),
      ],

это способ, которым я мог бы выделить этот файл?ТИА!

1 Ответ

0 голосов
/ 03 февраля 2019

Я закончил тем, что делал это, я не уверен, что это правильный способ разделения пакетов, но у меня это сработало.

Я добавил нужные пакеты в отдельном блоке в список в vender.

   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
    }),
...