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

本文主要是介绍前端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 响应头部信息。