由修改路由懒加载引起的


layout: post
title: 由修改路由懒加载引起的
tags:
- Vue
- 笔记


项目背景

项目环境:

  • vue cli2
  • vue2.x
  • babel6
  • webpack3

项目是很早之前搭建的了,页面和体积越来越多,影响页面加载速度,这次准备做个全面的路由懒加载优化。

路由懒加载可以将项目中路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,提高页面的访问速度。主要用到了Vue异步组件,和webpack的代码分割功能实现。

改写和实现方式,可以参考Vue router官方给出的示例

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

// 或者组块的方式
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

遇到问题

按照官网给出的懒加载方式替换之后并不能顺利生效,报什么错误不太记得了,也忘了截图,如果你没遇到什么问题,那就忽略吧。

又仔细看了一遍官网介绍,如果项目使用的是Babel需要添加syntax-dynamic-import插件,才能使babel可以正确地解析语法。

那开始安装插件

yarn add @babel/plugin-syntax-dynamic-import -D

在.babelrc添加如下

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

添加完成,运行项目,又报错了,这次不是报项目路由的问题,而是babel,大概是引入了新的插件,需要依赖高版本的Babel才行,报错如下,需要安装@babel/core

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version.

当前项目babel是6,看来需要升级到babel7了,看了一下babel6到babel7的改动,变动算是比较大的,项目安装名称都改为@babel/替换之前的babel-,那意味着所有依赖babel的都需要看看是否需要更新。

Babel6升级到Babel7

项目依赖中的babel,还是比较多的。更新之前,如下是项目中用到的babel及插件:


4b291b7b5ff5794fc9228996d9e895bc.png

1、首先卸载babel-core,安装新的@babel/core

yarn remove babel-core
yarn add @babel/core -D

2、更新babel-preset-env

yarn remove babel-preset-env
yarn add @babel/preset-env

同步配置.babelrc,更新之前的配置

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": 10
        }
      }
    ]
  ]
}

现在运行还是报错的,任重而道远

3、preset-stage-x在babel7也弃用了,需要删掉项目中用到的babel-preset-stage-2。看项目中完全没有用到jsx,引入jsx的插件完全没有什么用,所以也一并移除

4、升级babel-loader,babel7依赖babel-loader 8.x

遇到问题解决问题,直到运行正确没问题为止。调整完之后如下:

d4804e167f666442cd3c28855fb652ee.png

小结

项目优化,任何小的改动都可能会引起项目的问题,所以在实施某个方案之前要做充足的评估,改动影响的范围,之后需要做相应的测试验证。

看似一个简单的修改路由懒加载,然后引起升级babel,升级babel会不会对项目的其他地方有影响,影响范围是哪些,这些都是在决定升不升级需要考虑的。这是整个项目的事情,并不是一个简单的个人项目想怎么改就怎么改。在决定升级babel之前我也对这两个版本做了调研,虽然文件名称和配置变动比较大,但基于现有项目用的功能,babel7也都有相应的解决方法,而且更优,只要基于现有项目的功能配置,升级之后也做相应的配置,就不会产生大的影响,so那就升级吧,新版本会带来新的不一样的体验。


相关链接:
vue router路由懒加载
Npm babel-plugin-syntax-dynamic-import
babel-plugin-syntax-dynamic-import链接
babel官网升级7的变动
升级到Babel7不完全指南
Polyfill 方案的过去、现在和未来
babel7升级实践

你可能感兴趣的:(由修改路由懒加载引起的)