前端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']
    }
  }
}

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 => {
    // 这里是模块加载失败后执行的代码
  });

但是，动态导入在

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功能(只能用于开发环境，生产环境不需要)
},

知识点：

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…