Vue打包优化之路由懒加载

前言

Vue打包构建项目时，js包会变得非常大，影响页面加载，我们把不同路由的对应组件分割成不同的代码块，然后当路由被访问的时候加载对应的组件，这样能提升访问效率。

切分之后，并不是浏览器访问某个路由，才去下载对应的模块，仍然在首次访问程序时，下载所有模块，只不过每个模块分的很小，加载首页时需要的模块能够更快的下载下来，所以能够更快的显示

解决方案

• 基础写法，没有懒加载，打包分离代码

• 路由懒加载，import()方法。（按需加载）

• vue的异步组件+webpack的ensure()方法。（按需加载+js打包分离）

• 最优官方，懒加载和打包分离代码。（【官方推荐】按需加载+js打包分离）

一、基础写法，没有懒加载，打包分离代码

• Vue官方提供的最基础写法

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/home/home'

Vue.use(Router)

export default new Router({
    routes: [ {
            path: '/',name: 'home',      
            component: Home 
        } 
    ]
})

二、路由懒加载，import()方法。（按需加载）

• 官方的一种按需加载的方法，点击的时候才会请求，减少首页加载时间。

import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import('@/views/home/home')
Vue.use(Router)
export default new Router({
    routes: [ {
            path: '/',name: 'home',      
            component: Home 
        } 
    ]
})

此外还有一种require()方法，这里就不做过多介绍了。

三、vue的异步组件+webpack的ensure()方法。（按需加载+js打包分离）

• vue的一种按需加载的方法，webpack的ensure()方法实现js打包分离，每个组件单独打包，加载的时候文件不会太大

import Vue from 'vue'
import Router from 'vue-router'
const Home = r => require.ensure([], () => r(require('@/views/home/home')), 'Home')
Vue.use(Router)export 
export default new Router({
    routes: [ {
            path: '/',name: 'home',      
            component: Home 
        } 
    ]
})

四、最优官方，懒加载和打包分离代码

• 安装包  npm install --save-dev @babel/plugin-syntax-dynamic-import

npm install --save-dev @babel/plugin-syntax-dynamic-import

• 在babel.config.js配置文件中加入插件

module.exports = {  plugins: ["@babel/plugin-syntax-dynamic-import"]}

• 将路由改为按需加载的形式，并加上熟悉的魔法注释

import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import(/* webpackChunkName: 'weight1' */ '@/views/home/Home')
Vue.use(Router)
export default new Router({
    routes: [ {
            path: '/',name: 'home',      
            component: Home 
        } 
    ]
})

然后重新编译就好啦！

希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。

如果喜欢本文的话，欢迎关注我的订阅号，漫漫技术路，期待未来共同学习成长。