我的项目背景

是一个三年前基于 element-admin 搞进去的我的项目，一开始都还挺好的，尽管启动我的项目慢了点，然而编译速度不慢，起初通过某一次需要之后，就开始编译速度很慢了，

我的项目存在的问题

  • 启动速度慢

  • 编译速度慢

    原我的项目依赖和文件目录

    文件目录

    package.json

    dependencies

    devDependencies

迁徙到cli3 之后，感觉还是不错的

  • 启动我的项目
  • 编译速度

开始迁徙

  • 思路1： 构建一个vue cli新的我的项目，而后把依赖拷贝过来（后果做到一半搞不上来了，坑太多了，哈哈）

  • 思路2

    1. 因为当初这个我的项目是三年前我基于vue-admin-template这个我的项目来做的，
    2. 我去官网看了下， 他当初降级到了vue cli3 的版本，我把他拷贝下来，而后做一下替换，应该比我的思路1，踩的坑少一点，
    3. 感觉思路1也是能够做的，奈何懒得折腾，就走了捷径把

    迁徙步骤

    1. static 目录和index.html文件要拷贝到public文件夹下，static动态文件门路更改


    2. 批改package.json依赖

    dependencies依赖比照

    devDependencies依赖比照
    vue-template-compiler 要和vue 的版本一样，免得呈现什么诡异的问题，

    babel-eslint 要进行降级解决，不然会报错： TypeError: Cannot read property 'range' of null
    问题起因：https://segmentfault.com/a/11...

    3. 替换eslint成原来我的项目的

    4. 批改上下文和代理文件，启动我的项目

    有一个正告，我的项目没有报错，开心

    报错critical deependency: the request of a dependency is an expression


    问题起因：webpack import 动静加载组件的坑
    解决方案

  • 改成require 的形式就好了

  • 改成require 的形式就好了

    const   load = view => () => import(@/views/callManage/${view})  变成 const   load = (view) => (resolve) => require([@/views/callManage${view}], resolve)
    批改publicPath，如果部署的环境是多我的项目的话，就须要

因为当初的架构是把node-saas 迁徙成dart-saas,所以要解决一些语法不兼容的问题，其实就是一个语法不兼容，还是很容易解决的，全局替换一下咯

官网阐明

Module parse failed: Unexpected token
问题形容，报错，说element ui 的包有问题，一脸懵逼，github走一波
报错信息

  • 报错起因：咱们应用饿了么内置的工具类！！！！，因为之前某个产品始终强制要求做一个很恶心的性能，所以有个共事就基于饿了么的日期再用他的工具类再封装了一个组件！！！！

    解决办法
  • 饿了么官网issue1
  • 饿了么官网issue2

引申问题

  • 为啥通过某一次需要就回这么慢，那一次需要增加的文件也不多哈？
  • 还是webpack不熟，哈哈

结束语

  • 本文如有谬误，欢送斧正，非常感谢
  • 感觉有用的老铁，点个双击，小红心走一波
  • 欢送灌水，来呀，相互挫伤哈 o(∩_∩)o 哈哈

参考资料

  • 【vue-cli3降级】老我的项目提速50%（一）
  • TypeError: Cannot read property 'range' of null