webpack项目中使用vite加速的兼容模式详解

目录
  • 前言
  • 目的
  • 要处理的问题
  • 动手
    • 共用 index.html
    • 共用配置
    • 兼容环境变量
    • 自动导入
    • 资源引入
    • svg-sprite-loader 替代方案
  • 其他
  • 效果

前言

随着公司前端工程越来越大,启动是无尽的等待,修改是焦急的等待。

vite 到现在生态也起来了,就有了把项目改造成 vite 的想法,但是项目后面可能要依赖 qiankun 改造成微前端项目,现在 qiankun 对 vite 还没有好的解决方法,我就想采取一个折中的办法,保留 webpack,再兼容 vite,两条路都留着。

目的

  • 可以用 vite 跑开发环境。
  • 可以用 webpack 跑开发环境。
  • 暂时用 webpack 打包,等后面有解决方案再全面转 vite。

要处理的问题

要走的是兼容模式,原来项目的代码能不动的尽量不动。

  • 共用 index.html(使用一个 index.html)。
  • 共用配置(让 webpack 和 vite 共用一些配置,减少每次配置都要两边看的情况)。
  • 兼容环境变量(环境变量 vite 是 import.meta.env,webpack 是 process.env,不修改原来的 process.env 写法还兼容 vite)。
  • 自动导入(自动导入在 webpack 里面用 require.context,vite 里面无法使用)。
  • 资源引入(原来使用 require 方式引入图片资源的需要改动,"~xxx/dist/xxx.css" 以 ~ 开头引入资源的方式兼容处理)。
  • svg-sprite-loader 替代方案。

动手

共用 index.html

vite 中 index.html 是在根目录放的,webpack 在 public 下面放的,我们把 index.html 放到外面。

下面是咱们 webpack 的开发模式和生产模式。

"dev": "vue-cli-service serve",
"build": "vue-cli-service build",

我们可以利用 npm hook 做一点事情,这样每次在 dev,build 这两个命令运行之前我们都可以先执行自己的脚本。

"predev": "node ./command/html.js",
"prebuild": "node ./command/html.js",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
// ./command/html.js
const path = require('path')
const fs = require('fs')
// 把 index.html 拷贝到 public 下
fs.copyFileSync(path.resolve('./index.html'), path.resolve('./public/index.html'))

vite 中的 index.html 需要一个这样的标签来指定入口文件,但是我们在 webpack 中不需要,我们可以借助插件来处理。

<script type="module" src="...">
// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig(({ mode }) => {
    // 加载环境变量,因为 vite 中不会加载以 VUE 开头的,我们得自己指定下
    const envPrefix = ['VUE']
    const env = loadEnv(mode, process.cwd(), envPrefix)
    return {
        plugins: [
            createHtmlPlugin({
                minify: true,
                template: './index.html',
                entry: '/src/main.js', // 这个会帮我们注入入口 js 文件
                inject: {
                  data: {
                    // 这是我们 index.html 用到的环境变量
                    ...env
                  }
                }
          })
        ]
    }
})

共用配置

例如我 webpack 中 devServer 和 vite 中的 server 配置就可以公用,但是 vite 使用的是 es module 引入,webpack 用的是 commonjs 规范,我们也可以用命令来处理。

// config/index.js
// server 配置文件
export default {
    host: '0.0.0.0',
    port: 12003,
    https: false,
    hotOnly: true,
    disableHostCheck: true,
    proxy: {
        '/v1': {
            target: 'xxx',
            changeOrigin: true
        }
    }
}
// vite.config.js
import server from './config/index.js'
import { defineConfig } from 'vite'
export default defineConfig(({ mode }) => {
    return {
        server,
    }
})
// vue.config.js
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
// babel 编译过的 js包了一层
const devServer = require(resolve('config_cm')).default
module.exports = {
    devServer
}

可以看到 vite 和 webpack 使用的 server 配置引入方式不一样,因为模块化规则不一样,我们下面利用下 npm hook,每次打包前也会把我们 config 文件夹转为 commonjs 规范,输出到 config_cm 下。

"transformJs": "babel --plugins @babel/plugin-transform-modules-commonjs --presets=@vue/cli-plugin-babel/preset ./config -d ./config_cm",
    "predev": "node ./command/html.js && npm run transformJs",
    "prebuild": "node ./command/html.js && npm run transformJs",

兼容环境变量

我们项目中有很多 procsss.env.xxx 这种写法,我们要想这种写法在 vite 里面也生效,就得利用 vite 里面 define 这个配置,如下:

// vite.config.js
import server from './config/index.js'
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
    const envPrefix = ['VUE']
    const env = loadEnv(mode, process.cwd(), envPrefix)
    const define = {
        'process.env.NODE_ENV': '"development"',
        'process.env.BASE_URL': '"/"',
        'process.env.VITE': true
    }
    for (const [key, value] of Object.entries(env)) {
        define[`process.env.${key}`] = `"${value}"`
    }
    return {
        define,
    }
})

自动导入

// vue.config.js
// 需要安装 webpack-strip-block,作用是为了删除某段代码
module.exports = {
    configureWebpack() {
        return {
            module: {
                rules: [
                    {
                        test: /\.(js|scss)$/,
                        enforce: 'pre',
                        exclude: /node_modules/,
                        use: [
                          {
                            loader: 'webpack-strip-block'
                          }
                        ]
                    }
                ]
            }
        }
    }
}
// VITE 变量是在 vite.config.js 配置的,webpack 中是不存在的
// develblock 开头的注释是因为 webpack 中不存在 import.meta.globEager,编译会失败,所以我们
// 需要对这种做特殊处理
if (process.env.VITE) {
  /* develblock:start */
  componentsContext = import.meta.globEager('./**/index.vue')
  /* develblock:end */
} else {
  componentsContext = require.context('./', true, /index\.vue$/)
}
// autoImport 是我们自己写的共用方法,主要根据 process.env.VITE 判断就可以实现两种环境中的导入方式
const components = autoImport(componentsContext, 'component')
for (const c of components) {
  Vue.component(c.name, c)
}

资源引入

require('./xx.png')
// 这样 vite 和 webpack 中都可以使用
import xx from './xx.png'

在 webpack 打包中,我们样式中可能会出现下面这种引入方式,引入某个包下面的文件,或者引入 @(src 的别名)下的资源文件。

@import "~@[包名称]/dist/xx.css";
.xx {
    background-image: url("~@/views/integration/assets/images/btn_icon/stop_hover.png");
}

修改一下

// 下面得写两行引入,因为为了兼容 webpack 和 vite。
/* develblock:start */
@import "@[包名称]/dist/xx.css";
/* develblock:end */
@import "~@[包名称]/dist/xx.css";
// 这个不用动
.xx {
    background-image: url("~@/views/integration/assets/images/btn_icon/stop_hover.png");
}

我们这个时候得去 vite 配置下别名,可以根据自己需求灵活配置。

// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig(({ mode }) => {
    resolve: {
      alias: [
        // 针对以 ~@/[包名称]开头的,替换为 node_modules/@[包名称]
        { find: /^(~@)(?!\/)(.+)/, replacement: path.join('node_modules/@$2') },
        // 针对以 ~@/ 开头,替换为 src/
        { find: /^~@\//, replacement: path.join(__dirname, 'src/') },
        // 针对以 @/ 开头的,替换为 src/
        { find: /^@\//, replacement: path.join(__dirname, './src', '/') }
      ]
    },
})

svg-sprite-loader 替代方案

在 webpack 中使用了 svg-sprite-loader,vite 中需要使用 vite-plugin-svg-icons

// 原来 webpack 下引入 svg 文件的 js
// 假设 svg 文件夹下存放了我所有的 svg 文件,这样两种环境下都可以使用
if (!process.env.VITE) {
  const context = require.context('./svg', false, /\.svg$/)
  context.keys().forEach(context)
}
// vite.config.js
import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig(({ mode }) => {
    createSvgIconsPlugin({
        // 存放 svg 文件的文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/common/icons/svg')],
        // 和 webpack 保持一致就行
        symbolId: 'icon-[name]'
      }),
})

其他

  • 我项目中使用的是 Vue2,所以用的是 vite-plugin-vue2 这个插件,Vue3 也同理。
  • 我之前调试的时候,根目录和 public 下同时存在 index.html 的时候出现过一些缓存问题,所以利用 npm hook 在用 vite 启动的时候把 public 下的 index.html 删掉了,原理和上面使用的方法一样。
  • 我项目中使用的是 antd 1.x 的包,会因为 moment 导致错误,有一个 vite-plugin-antdv1-momentjs-resolver 可以解决,不用重复造轮子。
  • 不升级为 Vue3 是觉得没必要,项目中也使用了 @vue/composition-api 这个包,可以使用 Vue3 的 composition-api 写法。

效果

左边是 vite,右边是 webpack,vite 命令启动前我做了一些操作,所以 vite 启动几乎是秒开,而 webpack,是分钟级别的。这还是在我的电脑上,公司机子更慢了去了。

在热更新方面,webpack 大概几秒钟,vite 几乎无感知。

vite 第一次启动因为没有缓存,进页面稍微慢点,后面就感觉不到了。

以上就是webpack项目中使用vite加速的兼容模式详解的详细内容,更多关于webpack vite加速兼容模式的资料请关注我们其它相关文章!

(0)

相关推荐

  • 深入剖析vite到底是快还是慢原理详解

    目录 前言 Vite 的快 快速的冷启动 快速的热更新 Vite 的慢 首屏性能 懒加载性能 结束语 前言 谈到 Vite,给人的第一印象就是 dev server 启动速度快.同样规模的项目,相比 Webpack 动辄十几秒甚至几十秒的的启动速度,Vite 简直是快到没朋友,往往数秒之内即可完成启动(PS: 都没有时间去喝一杯 ️ 啦). 正好小编最近在做一些关于开发体验的性能优化,就想着把手上一些项目的开发模式更新为 Vite.经过一番操作,终于改造成功,而效果也不负众望,项目启动速度由原来

  • vue3 Vite 进阶rollup命令行使用详解

    目录 rollup介绍 以命令行方式打包 Tree Shaking Rollup 的命令行使用 命令行 format 格式 rollup.config.js 设置/获取环境变量 插件 plugins rollup介绍 开源类库优先选择 以 ESM 标准为目标的构建工具 Tree Shaking 以命令行方式打包 安装 rollup npm install -g rollup 创建 index.js 文件 import path from "path"; console.log(&quo

  • 详解vite如何支持cjs方案示例

    目录 一.问题 二.解决方案 三.如何处理commonJS 一.问题 vite运行时使用esbuild,基于esm 大部分三方包为UMD规范,输出的是CommonJS的包(比如react.lodash) // react 入口文件 // 只有 CommonJS 格式 if (process.env.NODE_ENV === "production") { module.exports = require("./cjs/react.production.min.js"

  • Vite配置优雅的code spliiting代码分割详解

    目录 Vite如何配置分割代码 1.什么是代码分割/code spliiting 2.Vite 中 rollup code spliiting分割默认方法原理 (1)按照动态导入语句分割打包测试. (2)按照资源导入入口点分割打包测试. (3)manualChunks函数 手动自定义分割.(下面的案例) 3.如何在Vite中配置(vite.config.ts)代码分割/code spliiting (核心关键) Vite代码分割方法1 Vite代码分割方法2 Vite如何配置分割代码 1.什么是

  • Vite使用Esbuild提升性能详解

    目录 前言 初探 Esbuild 关键 API - transfrom & build plugin Esbuild 在 Vite 中的巧妙使用 预构建 middlewares 中内容转换 结束语 前言 在上一篇 为什么有人说 vite 快,有人却说 vite 慢? 中,我们提到过开发模式下使用 Vite 会有首屏性能下降的负面效果.之所以会造成首屏性能下降,一方面是 dev server 需要完成预构建才可以响应首屏请求:另一方面是需要对请求文件做实时转换. 也许有的同学会问,是不是针对这两个

  • webpack项目中使用vite加速的兼容模式详解

    目录 前言 目的 要处理的问题 动手 共用 index.html 共用配置 兼容环境变量 自动导入 资源引入 svg-sprite-loader 替代方案 其他 效果 前言 随着公司前端工程越来越大,启动是无尽的等待,修改是焦急的等待. vite 到现在生态也起来了,就有了把项目改造成 vite 的想法,但是项目后面可能要依赖 qiankun 改造成微前端项目,现在 qiankun 对 vite 还没有好的解决方法,我就想采取一个折中的办法,保留 webpack,再兼容 vite,两条路都留着.

  • Flutter在项目中使用动画不使用包实现详解

    目录 前言 正文 1 按下按钮柔软的感觉 2 想要一个像 Instagram 一样的喜欢按钮吗? 3 动画页面过渡 4 动画文字 5 更改/闪动文本样式 前言 动画对于 web 和移动应用程序都非常重要.但是在移动应用程序中不应该使用夸张的动画.简单但是很多动画使你的应用程序更好用.以至于当你点击一个按钮时,一种平滑的感觉或者页面过渡都会影响到你. 正文 1 按下按钮柔软的感觉 class _CustomButtonState extends State<CustomButton> with

  • Java实现读取项目中文件(.json或.properties)的方法详解

    目录 1. 读取json file 1.1 Json dependency 1.2 字节流 1.3 buffer reader 2. 读取properties file 3. 好看的css样式 1. 读取json file 1.1 Json dependency <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>

  • Vue+webpack项目配置便于维护的目录结构教程详解

    新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js 配置目录入口文件 import api from './website' // 当前平台 export const HOS

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

  • vue项目中v-model父子组件通信的实现详解

    前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

  • .Net项目中NLog的配置和使用实例详解

    引言: 因为之前在项目开发中一直都是使用的Log4Net作为项目的日志记录框架,最近忽然感觉对它已经有点腻了,所以尝试着使用了NLog作为新项目的日志记录框架(当然作为一名有志向的攻城狮永远都不能只局限于眼前的技术,要不断的使用和学习新的技术).当然serilog也是一个不错的日志记录框架哟,不过今天主要还是要讲述的是NLog在项目中的配置和使用. NLog框架源码:https://github.com/NLog/NLog 一.导入NLog NuGet PackAge: 二.配置NLog 配置文

  • Vue2项目中对百度地图的封装使用详解

    目录 需求 知识点 实现 打点控件封装 代码总览 代码 总结 百度地图的使用: vue项目,有个 vue-baidu-map 可以用,但是好久不更新了. React项目,百度官方出了个React版的,可以直接用,React-BMapGL. 除此以外,百度官方的都是 JavaScript API,这里以此来用vue封装下,方便使用. 需求 组件按需引入.个人喜欢代码干干净净,只要项目需要的功能就行了 简单的封装下,方便直接按官方文档使用需要的功能,方便复用 基于Vue2 .JavaScript A

  • TS 项目中高效处理接口返回数据方法详解

    目录 写在前面 问题 解答 区别 总结 必备高效神器 写在前面 在 TypeScript 项目中,TypeScript 对接口返回数据的处理,是日常项目开发中一个比较棘手的问题. 那我们该如何 高效 的解决这个问题呢? 问题 项目中使用 ts 都会碰到如下场景:从接口请求过来的数据该如何进行处理? const fetchInfo = async (url: string, id: string) => { return $http.get(url, params); } const res =

  • Android中Activity生命周期和启动模式详解

    Activity生命周期经典图解: 按键对生命周期的影响: BACK键: 当我们按BACK键时,我们这个应用程序将结束,这时候我们将先后调用onPause()->onStop()->onDestory()三个方法. 再次启动App时,会执行onCreate()->onStart()->onResume() HOME键: 当我们打开应用程序时,比如浏览器,我正在浏览NBA新闻,看到一半时,我突然想听歌,这时候我们会选择按HOME键,然后去打开音乐应用程序,而当我们按HOME的时候,A

随机推荐