问题描述
限时送ChatGPT账号..我正在尝试缩短网站的加载时间,为此,我在 vue.config.js
中使用了以下设置:
I'm trying to improve the load time of my website, and towards that, I'm using the following settings in my vue.config.js
:
config.output.chunkFilename(`js/[name].[chunkhash:8].js`)
config.optimization
.runtimeChunk('single')
.splitChunks({
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
}
}
}
})
此外,我还动态加载所有路由:
router.js
Additionally, I also load all my routes dynamically:
router.js
const LandingPage = () => import(/* webpackChunkName: "view-landing-page" */ '@C/landing-page')
const HomePage = () => import(/* webpackChunkName: "view-home-page" */ '@C/home-page')
const Room = () => import(/* webpackChunkName: "view-room" */ '@C/room')
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'landingPage',
component: LandingPage
},
{
path: '/land',
name: 'landingPage',
component: LandingPage
},
{
path: '/home',
name: 'homePage',
component: HomePage
},
{
path: '/*',
name: 'roomPage',
component: Room
}
]
})
这些视图中的每一个也使用延迟加载组件.例如:
room.vue
Each of these views also use lazy-loaded components. For example:
room.vue
export default {
name: 'room',
mixins: [SocketEventsMixin],
components: {
'video-element': () => import(/* webpackChunkName: "video-element" */ '@RC/media/video-element'),
'video-chat': () => import(/* webpackChunkName: "video-chat" */ '@RC/communications/video-chat'),
}
}
然而,即使有这一切,我在我的 index.html
中看到以下内容:
However, even with all this, I see the following in my index.html
:
...
<link href=/css/view-room.1ce954c7.css rel=prefetch>
<link href=/js/view-room.fe2de329.js rel=prefetch>
...
<link href=/css/video-element.8342e42f.css rel=prefetch>
<link href=/js/video-element.ab0e6cca.js rel=prefetch>
...
因此,访问着陆页时下载了高达 4.5MB 的文件,而这不需要任何这些资产.
As a result, a whopping 4.5MB is downloaded on visiting the landing page, which does not require any of these assets.
我如何确保 index.html
只包含最低限度的脚本/CSS,并动态加载其他所有内容?是什么导致资产包含在 index.html
中而不是动态加载?我做错了什么?
How do I ensure that index.html
only contains the bare-minimum scripts/CSS, and have everything else be loaded dynamically? What causes an asset to be included in index.html
as opposed to being dynamically loaded? What am I doing wrong?
推荐答案
Vue-CLI 自动为所有延迟加载的组件设置 webpackPrefetch: true
.我不知道您如何有条件地打开/关闭它,因此在我的项目中我将其完全关闭:
Vue-CLI automatically sets webpackPrefetch: true
for all lazy-loaded components. I do not know how you can conditionally turn it on/off so in my projects I am turning it off completely:
// vue.config.js
chainWebpack: config =>
{
config.plugins.delete('prefetch'); // for async routes
config.plugins.delete('preload'); // for CSS
}
这篇关于Vue index.html 包含 <link>标记到几个延迟加载的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论