美文网首页IT柠檬
由修改路由懒加载引起的

由修改路由懒加载引起的

作者: Dannn_Y | 来源:发表于2020-06-01 23:25 被阅读0次

    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升级实践

    相关文章

      网友评论

        本文标题:由修改路由懒加载引起的

        本文链接:https://www.haomeiwen.com/subject/ifaezhtx.html