项目优化-路由懒加载

打包构建项目时,javascript包会变得非常大,影响页面加载.如果能把不同路由对应的组件分割成不同的代码块,然后路由被访问时才加载对应的组件,这样效率就会的到提高,这就是路由懒加载:

1,安装@babel/plugin-syntax-dynamic-import依赖包
2,在babel.config.js配置文件中声明该插件

3.在router.js中对路由进行分组导出(小的项目可以每个路由组件一个分组,使用的时候单独加载,也可以通过注释的方式将不同的路由组件进行分组):

// import Login from './components/Login.vue'
const Login = () =>
  import(
    /* webpackChunkName: "login_home_welcome" */ "../components/Login.vue"
  );
// import Home from './components/Home.vue'
const Home = () =>
  import(/* webpackChunkName: "login_home_welcome" */ "../components/Home.vue");
// import Welcome from './components/Welcome.vue'
const Welcome = () =>
  import(
    /* webpackChunkName: "login_home_welcome" */ "../components/Welcome.vue"
  );

以上代码将Login,Home,Welcome三个组件分到一组中,命名为’login_home_welcome’,点击三者中任意组件就会加载且仅加载这三个组件;

使用懒加载之前:

js/app.js 154.7kb

路由懒加载优化之后:

懒加载优化之后仅有7.9kb