VueRouter 路由懒加载如何实现?
时间: 2024-06-11 16:09:12 浏览: 90
VueRouter 路由懒加载可以通过动态导入的方式实现,即在路由定义时通过 import() 函数异步加载组件。这样当用户访问该路由时,组件才会被加载,从而减少了首次加载时的文件大小和加载时间,提高了页面加载速度。
具体实现步骤如下:
1. 在路由定义时,将组件定义为一个函数,该函数通过 import() 函数动态加载组件。
```js
const router = new VueRouter({
routes: [
{
path: '/about',
component: () => import('./views/About.vue')
}
]
})
```
2. 在 webpack 中配置 babel-plugin-syntax-dynamic-import 插件,以支持 import() 函数动态导入语法。
```js
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.js$/,
loader: 'babel-loader',
options: {
plugins: ['syntax-dynamic-import']
}
}
]
}
}
```
3. 在生产环境中开启路由懒加载,可以通过 webpack 的 SplitChunksPlugin 插件将路由组件打包成单独的文件,从而实现按需加载。
```js
// webpack.config.js
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'production',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js'
},
module: {
rules: [
// ...
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
],
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
```
这样就可以实现 VueRouter 路由懒加载了。
阅读全文