前端vue项目加快热更新——提高部署速度——采用babel-plugin-dynamic-import-node插件

vue热更新编译慢的解决办法

• 安装插件：babel-plugin-dynamic-import-node
• yarn add babel-plugin-dynamic-import-node -D

增加配置文件：babel.config.js

module.exports = {
  env: {
    development: {
      plugins: ['dynamic-import-node']
    }
  }
}

1
2
3
4
5
6
7
8

babel-plugin-dynamic-import-node作用

babel-plugin-dynamic-import-node是一个Babel插件，它的作用是将JavaScript中的动态导入（dynamic import）语句转换为对Node.js的require函数的调用。

动态导入是JavaScript中一种异步加载模块的方式，它允许在运行时加载和执行模块。动态导入语法为：

import('/path/to/module')
  .then(module => {
    // 这里是模块加载成功后执行的代码
  })
  .catch(error => {
    // 这里是模块加载失败后执行的代码
  });
1
2
3
4
5
6
7

但是，动态导入在Node.js中并没有得到原生支持，因此如果要在Node.js环境中使用动态导入，就需要使用babel-plugin-dynamic-import-node这个插件将其转换为Node.js可以识别的require函数调用。这样就可以在Node.js中使用动态导入的语法了。

例如，如果有一个JavaScript文件，其中使用了动态导入语法，但是你想在Node.js中执行这个文件，那么你可以使用Babel将这个文件转换为Node.js可以执行的代码，并在转换时使用babel-plugin-dynamic-import-node插件，从而使得动态导入语法在Node.js中得到支持。
也就是说，安装的插件babel-plugin-dynamic-import-node，与import路由加载方式配套使用才能发挥期作用。

问题原因

在开发vue项目中，一般组件路采取会异步加载，动态导入的方式，就是咋们说的懒加载导致的热更新比较慢
首先 路由懒加载有两种写法
第一种: () => import()
第二种: resolve => [ require(), resolve ]
两种方法都实现了路由的异步加载. 也就导致了热更新慢.
解决办法就是 使用dynamic-import-node插件. 这个插件是将所有import替换成同步的require.
!! 注意: 是同步的require

---

配置vue.config.js

HotModuleReplacement是什么?

• 在开发时，我们修改其中一个模块代码，Webpack默认会将所有模块重新打包编译，速度很慢。
  我们需要做到修改某个模块代码，就只有这个模块代码重新打包编译，其他模块不变，这样速度就会有很大的提升。
  如果我们是webpack5构建的项目，则会有更多的发挥空间！

HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面

//开发服务器
devServer: {
  host: '127.0.0.1', // 域名
  port: '3000', // 端口
  open: true, // 是否自动打开浏览器
  hot: true,// 开启HMR功能(只能用于开发环境，生产环境不需要)
},

1
2
3
4
5
6
7
8

知识点：

vue.config.js 文件中的 devServer 选项是用来配置 Vue.js 应用程序开发服务器的，它支持传递一个对象，该对象具有以下属性：

• host：字符串类型，指定开发服务器监听的主机名，默认值为 ‘localhost’。

• port：数字类型，指定开发服务器监听的端口号，默认值为 8080。

• https：布尔类型，指定是否使用 HTTPS 协议，默认为 false。

• proxy：对象类型，用于配置开发服务器的代理选项，它可以是一个字符串或者一个对象。如果是一个字符串，则表示代理的目标 URL；如果是一个对象，则可以指定以下属性：

  • target：字符串类型，表示要代理的目标 URL。

  • changeOrigin：布尔类型，表示是否改变代理请求头中的 ‘Origin’ 字段，默认为 false。

  • pathRewrite：对象类型，用于指定要重写的路径规则。

• open：布尔类型，表示是否在启动开发服务器时自动打开浏览器，默认为 false。

• overlay：布尔类型，表示是否在浏览器中显示编译器错误和警告，默认为 true。

• hotOnly：布尔类型，表示是否禁用热更新，如果设置为 true，则只使用热替换(HMR)而不进行整个页面重载，默认为 false。

• disableHostCheck：布尔类型，表示是否禁用开发服务器的 host 检查，默认为 false。

• headers：对象类型，表示设置 HTTP 响应头部信息的选项。

• Cache-Control：字符串类型，用于控制 HTTP 缓存的响应头部信息。

• X-Frame-Options：字符串类型，用于设置防止跨域攻击的 X-Frame-Options 响应头部信息。

• X-XSS-Protection：字符串类型，用于设置防止跨站脚本攻击的 X-XSS-Protection 响应头部信息。

以上是 devServer 中可用的一些常用选项，如果您需要了解更多配置选项，可以参考 Vue.js 官方文档：cli.vuejs.org/config/#dev…