vue 怎么拆分代码,并按需加载代码
时间: 2023-07-03 17:13:19 浏览: 54
在 Vue 中,我们可以使用 webpack 的 Code Splitting 技术来拆分代码,并按需加载代码,有以下几种方式:
1. 使用 Vue 官方推荐的路由懒加载方式,可以将每个路由对应的组件打包成一个独立的文件,使用时再动态加载,以减小页面首次加载所需的资源大小。
例如:
```
const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
```
2. 使用 webpack 的动态 import 语法,可以将组件打包成多个文件,使用时再动态加载,以减小页面首次加载所需的资源大小。
例如:
```
const loadFoo = () => import('./Foo.vue')
const loadBar = () => import('./Bar.vue')
export default {
components: {
Foo: loadFoo,
Bar: loadBar
}
}
```
3. 手动拆分代码,使用 webpack 的 SplitChunksPlugin 插件将重复的代码提取到单独的文件中,减少每个页面需要加载的 JavaScript 代码量。
例如:
```
optimization: {
splitChunks: {
chunks: 'all'
}
}
```
以上是几种常见的拆分代码并按需加载代码的方式,可以根据具体情况选择适合自己的方式来进行优化。