سلام دوستان فایل app.js من حجمش خیلی بالا بود و سرعت سایت رو خیلی پایین میاورد با npm run prod حجمش رو کم کردم ولی سرعت سایت هیچ تغییری نکرده . تعداد کامپوننت های زیادی رو توی app.js ایمپورت کردم و همچنین یه فایل blade دارم که بیشتر کامپونتت ها رو داخل اون فرخوانی کردم
<component1> </component1>
<component1> </component2>
<component1> </component3>
.
.
.
سلام و وقت بخیر بعد از اینکه با npm run prod حجم فایل کم میشه و شما اون رو در سایت قرار میدید در قسمت network گوگل کروم حجم لود نمایشی رو کمتر نمایش میده یا خیر ؟ در ضمن سایتتون رو در سایتی مثلا gtmetrix چک کنید ببینید چه مواردی رعایت نشده در سایتون
بله استاد حجمش کم میشه در network . حجمش 1mb میگه زیاده انقدر سرعت سایت رو پایین میاره که وقتی مقداری داخل input ها وارد میکنم با تاخیر تایپ میشه
توی فایل لاراول وبپک اینو وارد کنید
mix.config.webpackConfig.output = {
chunkFilename: 'js/[name].bundle.js',
publicPath: '/',
};
و توی فایل app.js به این شکل کامپوننت ها رو تعریف کنید
Vue.component(
'example-component',
() => import(/* webpackChunkName: "example-component" */ './components/ExampleComponent.vue')
);
ببینید حجمشون کم میشه
علت کند بودنش رو متوجه شدم من توی تمام کامپوننت هام چند تا 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'));
تست کردم اوکی بود
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟