Laravel Vue Non SPA - vue js 컴포넌트의 모든 페이지의 파일을 분할하려면 어떻게 해야 합니까?

Laravel Vue Non SPA - vue js 컴포넌트의 모든 페이지의 파일을 분할하려면 어떻게 해야 합니까?

제 어플리케이션은 SPA가 아닌 라라벨 vue를 사용하고 있기 때문에 페이지를 분리하기 위해 라라벨 블레이드를 사용하고 있습니다.모든 페이지가 app.js를 Import하고 있습니다.My App.js는 웹 팩에 의해 컴파일되고 모든 vue 컴포넌트는 해당 파일에 컴파일됩니다.따라서 문제는 app.js가 MB 사이즈를 취득하면 모든 페이지가 해당 파일을 로드하는 속도가 느려진다는 것입니다.웹 팩을 사용하여 vuej의 코드를 분할하거나 모든 페이지의 파일을 분리하는 방법입니까?

이것은 내 웹 어플리케이션의 webpack.dll입니다.

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.setPublicPath('public')
    .setResourceRoot('../') // Turns assets paths in css relative to css file
    // .options({
    //     processCssUrls: false,
    // })
    .sass('resources/sass/frontend/app.scss', 'css/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend.css')
    .js('resources/js/frontend/app.js', 'js/app.js')
    .js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend.js')

    .extract([
        // Extract packages from node_modules to vendor.js
        'jquery',
        'bootstrap',
        'popper.js',
        'axios',
        'sweetalert2',
        'lodash'
    ])
    .sourceMaps();

if (mix.inProduction()) {
    mix.version()
        .options({
            // Optimize JS minification process
            terser: {
                cache: true,
                parallel: true,
                sourceMap: true
            }
        });
} else {
    // Uses inline source-maps on development
    mix.webpackConfig({
        devtool: 'inline-source-map'
    });
}

내 라라벨은 라라벨 보일러 플레이트 템플릿을 사용하고 있고 그는 다른 파일들을 벤더.js로 분리했다.그리고 문제는 앱.js의 사이즈가 커져서 사용자의 접속이 느리기 때문에 로딩이 어려워지는 것입니다.

내가 알기로는, 당신이 할 수 있는 최선의 방법은Dynamic Imports,laravel-mix내부적으로는 웹 팩 코드 스위칭이 사용되며, 최신 버전의 웹 팩 코드 스위칭이 포함되어 있습니다.laravel-mix.

이 항목을 에 추가합니다.webpack.mix.js파일

mix.babelConfig({
  plugins: ['@babel/plugin-syntax-dynamic-import'],
});

그리고 당신은 그 방법을 바꿀 필요가 있다.import컴포넌트.

// Standard import
import StandardComponent from './components/ExampleComponent.vue';

// Dynamic import
const DynamicallyImportedComponent =
        () => import('./components/ExampleComponent.vue');

이렇게 함으로써laravel-mix는 컴포넌트를 다른 파일로 컴파일합니다.파일을 동적으로 삽입하여html head부분.그래서 필요한 경우에만 파일을 삽입합니다.

웹 팩은 동적으로 Import된 파일을 청크로 분할하여 이름을 지정합니다.0.js,1.js파일의 청크명을 설정하는 경우는, Import 문에 「매직」코멘트를 추가하고, Webpack 에 사용하는 이름을 통지할 필요가 있습니다.마치 네가 한 짓처럼webpack셋업:

const DynamicallyImportedComponent =
        () => import(/* webpackChunkName: "dynamically-imported-component" */ './components/ExampleComponent.vue');

언급URL : https://stackoverflow.com/questions/63626792/laravel-vue-non-spa-how-to-split-the-files-for-every-page-for-its-vue-js-compo