سلام و وقت بخیر بعد از اینکه با npm run prod حجم فایل کم میشه و شما اون رو در سایت قرار میدید در قسمت network گوگل کروم حجم لود نمایشی رو کمتر نمایش میده یا خیر ؟ در ضمن سایتتون رو در سایتی مثلا gtmetrix چک کنید ببینید چه مواردی رعایت نشده در سایتون

بله استاد حجمش کم میشه در network . حجمش 1mb میگه زیاده انقدر سرعت سایت رو پایین میاره که وقتی مقداری داخل input ها وارد میکنم با تاخیر تایپ میشه

laravel-mix-lazy-loading-vue-components

توی فایل لاراول وبپک اینو وارد کنید

mix.config.webpackConfig.output = {
    chunkFilename: 'js/[name].bundle.js',
    publicPath: '/',
};

و توی فایل app.js به این شکل کامپوننت ها رو تعریف کنید

Vue.component(
    'example-component',
    () => import(/* webpackChunkName: "example-component" */ './components/ExampleComponent.vue')
);

ببینید حجمشون کم میشه

نمونه کد
https://github.com/acodeninja/laravel-mix-lazy-loading-vue-components/blob/master/resources/assets/js/app.js

علت کند بودنش رو متوجه شدم من توی تمام کامپوننت هام چند تا select دارم که بهشون کلاس selectpicker دادم و توی همه کامپوننتها هم این کد رو نوشتم

updated () {
            $('select.selectpicker').selectpicker('refresh');
            $('select.selectpicker').selectpicker({
                noneSelectedText : 'انتخاب کنید...', // by this default 'Nothing selected' -->will change to Please Select

            });
        }

چون سلکت ها رو به شکل Api گرفتم اگر این رو وارد نکنم موارد داخل select ها رو نمایش نمیده

@coaradsupp
از تعریف کامپوننت خطا میگیره

Vue.component(
    'example-component',
    () => import(/* webpackChunkName: "example-component" */ './components/ExampleComponent.vue')
);

من حتی داخل package.json این رو اضافه کردم

 "devDependencies": {
        "axios": "^0.19.0",
        "babel-plugin-dynamic-import-webpack": "^1.0.2",
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "bootstrap": "^4.4.1",

و فایل .babelrc رو هم در روت پروژه اضافه کردم و این رو قرار دادم ولی بازم خطا میگیری

{
  "plugins": ["syntax-dynamic-import"]
}

@zohremehran70
اینو نصب کن

npm install --save babel-plugin-dynamic-import-webpack babel-preset-env

این بذار تو وب پک

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[name].js',
        publicPath: '/'
    },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
                presets: ['babel-preset-env'],
                plugins:['babel-plugin-dynamic-import-webpack']
            }
        },

        ]
    }
});

توی app.js

Vue.component('search', () => import('./components/Search'));

تست کردم اوکی بود

@coaradsupp
باز هم به import خطا میگیره و فایل رو import نمیکنه