Projects built with vue-cli, by default, are executednpm run build All js code will be packaged into one whole,
Packing location isdist/static/js/app.[contenthash].js
Similar to the following routing code
router/ Routing related information,This routing file introduces multiple .vueComponents import Personal from '@/components/page/Personal' import Message from '@/components/personnal/Message' import Settings from '@/components/personnal/Settings' import Setlanguage from '@/components/personnal/children/Setlanguage'
npm run build Will be packaged into oneapp.[contenthash].js, this file will be very large and affect the loading speed.
So we need to package the components we want to combine together into a chunk block
The following is required to use webpack in module packaging, and add a chunk name at the end,
Modules with the same chunk name will be packaged together.
const Personal = r=>([],()=>r(require('@/components/page/Personal')),'personal');
const Message = r=>([],()=>r(require('@/components/personnal/Message')),'personal');
const Settings = r=>([],()=>r(require('@/components/personnal/Settings')),'personal');
const Setlanguage = r=>([],()=>r(require('@/components/personnal/children/Setlanguage')),'personal');
Depending on the chunname, the above four components will be divided into 3 blocks for packaging. After the final package, the js files related to the component will be divided into 3 (except,, )
Summarize
The above is the vue-cli home screen load optimization problem introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!