Как использовать расщепление кода в Webpack для получения пользовательских выходов? - PullRequest
Новая
       27

Как использовать расщепление кода в Webpack для получения пользовательских выходов?

1 голос
/ 22 января 2020

В настоящее время у меня есть только один пакет JS для всего моего приложения (это плохо, я знаю ...). Я хочу использовать разделение кода из Webpack для его оптимизации, но мне не удается выполнить то, что я имею в виду.

У меня есть основное приложение. js file: 

import './components/cookie';
import './components/accordion';
import './components/sidenav';
import './components/product';
etc.

Я хочу создать новый файл для всех компонентов, связанных со страницами профиля. Поэтому я взял их из основного приложения. js и поместил в новый профиль. js: 

import './profile';
import './order';
import './payment';
import './address';
import './subscription';

Теперь я хотел бы иметь 2 файла на выходе:

  1. основное приложение. js со всеми его поставщиками, включая
  2. профиль. js, который будет содержать только связанный профиль JS и будет загружать общих поставщиков из приложения. js. Если какой-либо поставщик связан с самим профилем. js, они должны быть включены непосредственно в этот файл.

В некоторых случаях приложение. js будет загружено на все страницы профиля. js будет загружено только на определенных c страницах.

Но в настоящее время я могу иметь только следующие выходные данные: 

                 Asset      Size               Chunks             Chunk Names
                app.js   225 KiB                  app  [emitted]  app
        app~profile.js   105 KiB          app~profile  [emitted]  app~profile
            profile.js   112 KiB              profile  [emitted]  profile
        vendors~app.js  34.2 KiB          vendors~app  [emitted]  vendors~app
vendors~app~profile.js   524 KiB  vendors~app~profile  [emitted]  vendors~app~profile
Entrypoint app = vendors~app~profile.js vendors~app.js app~profile.js app.js
Entrypoint profile = vendors~app~profile.js app~profile.js profile.js

Мой webpack.config выглядит следующим образом: 

module.exports = {
    entry: {
        app: './app/js/app.js',
        profile: './app/js/components/profile/_all.js'
    },
    mode: 'development',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'public/scripts/')
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

Есть ли способ получить результаты, которые я хочу в первую очередь? Или я не думаю, что правильно разделить код?

...