WebPack热更新和打包速度缓慢踩坑

前言✨

要进入标题正文，首先了解一下前置知识。

SPA

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序，比如使用客户端渲染的Vue、React、Angular都是SPA应用。

优点：

• 良好的交互体验

单页应用的内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象，页面显示流畅

• 良好的前后端工作分离模式

后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端

• 减轻服务器压力

单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍

缺点：

• 首屏加载慢

因为是单页面所以在首次进入时要加载所有路由、组件应用等。解决方式：路由懒加载、CDN加速等

• 不利于SEO

由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。解决方式：服务端渲染

路由懒加载

上文说到解决首屏加载速度缓慢使用路由懒加载方案如下(vue-router)：

// import HelloWorld from "@/page/HelloWorld" 
 {
    name: "MobileSign",
    path: "/MobileSign",
    // component:HelloWorld, 
    component: () => import("@/page/HelloWorld"), // 改成这样
    meta: {
      title: "移动端H5注册",
    },
  },

使用路由缓存后会发现原来首屏加载缓慢的App.js被分割成多个小的: 1.xxxxx.js 、2.xxxxx.js 首屏加载速度大幅度提升！但是出现了令人意想不到的问题，那就是热更新变得缓慢，每次保存需要40s以上的时间热更新完毕，各种搜索调查扎到解决办法

解决办法dynamic-import-node

npm install babel-plugin-dynamic-import-node --save-dev

// .babelrc
"env": {
    "development": {
      "plugins": [
        "dynamic-import-node"
      ]
    },
    "testing": {
      "plugins": [
        "dynamic-import-node"
      ]
    },
    "release": {
      "plugins": [
        "dynamic-import-node"
      ]
    }
  }

官方含义：就是将import方法转成require()，且是动态的，运用这个插件能在代码使用了import语法的情况下，大大提高代码的编译速度

在.babelrc文件中加入仅在开发环境、测试环境、预发环境使用后这个插件，就发现热更新速度又回到2-3s了。

喜出望外后又发现了新的问题：打包速度会变得很慢，尤其是在jenkins上甚至需要15min，所有可以优化打包速度的基本都用上了如 sourceMap、多线程打包、更改路径索引、cache-loader等等，效果都是微乎其微。最后无奈去除testing、release环境的.babelrc配置，仅在开发模式使用，jenkins打包速度提升了3倍左右...