Laravel Vue Non SPA-如何为每个页面拆分其vue js组件的文件? [英] Laravel Vue Non SPA - How to split the files for every page for its vue js components?

问题描述

我的应用程序使用的是laravel vue，但未使用SPA，因此我仍然使用laravel刀片来分隔页面.每个页面都在导入app.js.我的App.js是由webpack编译的，而我所有的vue组件都是在该文件上编译的.所以问题是app.js的MB大小越来越大，每页加载文件的速度都会变慢.他们是使用webpack拆分vuejs代码或为每个页面分离文件的方法吗?

My application is using laravel vue but not SPA,.. so im still using laravel blades to separate the pages. Every page are importing app.js. My App.js is compiled by webpack and all my vue components are compiled on that file. so the problem is the app.js getting MB size and the every page will slow to load that file. Is their way to split the code of vuejs or separate the file for every pages using webpack?

这是我的Web应用程序中的webpack.js.

this is my webpack.js in my web application.

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'
    });
}

我的laravel使用laravel样板模板，他将其他文件分离到vender.js中.我的问题是app.js的大小越来越大，并且由于连接速度较慢的用户而难以加载.

My laravel is using laravel boiler plate template and he separated the other files into vender.js. And my problem is the app.js getting biggger size and it will hard to load for the users have slower connection.

推荐答案

据我所知，您能做的最好的就是使用 Dynamic Imports ， laravel-mix 内部使用 webpack代码拆分，它已包含在最新版本的 laravel-mix 框.

As far as I know, the best you can do is that using Dynamic Imports, laravel-mix internally uses webpack code-splitting and it's included out of the box by the latest version of laravel-mix.

将此添加到您的 webpack.mix.js 文件

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

并且您还需要更改导入组件的方式.

And also you need to change how you import your components.

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

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

通过这种方式， laravel-mix 将在单独的文件中编译组件.并在 html head 部分中动态插入文件.因此，仅在需要时插入文件.

By doing this way laravel-mix will compile the component in a separate file. And dynamically insert the file in your html head section. So will only insert the file if it is needed.

Webpack会将动态导入的文件拆分为多个块，并将其命名为 0.js ， 1.js 等.如果要配置文件的块名，您需要在import语句中添加一个魔术"注释，以告知Webpack您要使用的名称.就像您在 webpack 设置中所做的一样.喜欢:

Webpack will split the dynamically imported files into chunks and name them 0.js, 1.js, etc. If you want to configure the chunk name for a file, you need to add a "magic" comment to the import statement to tell Webpack the name you want to use. Just like how you would do it in a webpack setup. Like:

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

这篇关于Laravel Vue Non SPA-如何为每个页面拆分其vue js组件的文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！