Objectives and environment
The project adopts vue2 + ANTDV1 + VUE-CLI B-side project. The goal is to transform the dev environment to support both Vite and Webpack, and the production environment to support Webpack. Here, we need to modify the code and configuration to be able to use both Webpack and Vite. And minimize code changes to the SRC directory to ensure that the production environment does not have problems.
Comparison before and after reconstruction:
Build tools | Dev Startup Time | Hot update HMR |
---|---|---|
webpack | 51s | 5s |
vite | 17s(no prebuild) 600ms(pre-built) |
500ms |
Vite’s efficiency gains are significant in dev environments, but not in production environments.
Reform steps
Install vite related modules in the project root directory, including the plug-ins that will be used later, as follows:
Vite: "^1.0.6", "vite-plugin-externals": ^2.8.4", "vite-plugin-externals": "^ 0.4.0 vite", "- the plugin - filter - replace" : "^ 0.1.9", "vite - plugin - importer" : "^ 0.2.5", "vite - plugin - replace" : ^ "" while," "vite plugin - restart" : "^ while", "vite - plugin - vue2" : "^ 1.9.3", "@ originjs/vite - plugin - commonjs" : "^ 1.0.3", "@ vue/Babel - helper - vue - JSX - merge - props" : "^ 1.2.1", "@ vue/Babel - preset - JSX" : "^ 1",Copy the code
Create the vite. Config. js file and index.html file required by vite and add the corresponding configuration.
Specific configuration and step pit point
require is not defined
In Vite development mode, ESM is completely installed for construction, and the require syntax originally used in Webpack cannot be recognized. To solve this problem, there are the following solutions:
- Replace with import
: < img SRC = "the require ('/Amy polumbo ng ')" / > / / replace for const a = import ('/Amy polumbo ng ') < img SRC = "a" / >Copy the code
- using
@originjs/vite-plugin-commonjs
The plug-in
import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs'; . Plugins: [viteCommonjs({transformMixedEsModules: true, // if the project uses require and import, configure true}),]...Copy the code
Note that vite in production uses commonjsOptions to convert require by default. This plugin will only work in dev. We recommend importing XXX instead, which is compatible with vue CLI webpack.
Unknown theme type: undefined, name: undefined(and-design-vue)
The following figure shows the error:
Because the version of AND-design-vue is too low, part of the code does not support native ESM. There are the following solutions.
- Upgrade to ant-Design-VUE-1.7.8 Stable.
- Configuration alias
Resolve: {// configure path alias alias: [{find: /ant-design-vue$/,replacement: 'ant-design-vue/dist/antd.min'},],},Copy the code
It is recommended to adopt the first option and fully introduce and-design-vue, which is also compatible with the Webpack of the Vue CLI.
A. Vue file and a. Vue file with JSX syntax could not be recognized
The following figure shows the error:
Add the following configuration to solve the problem:
import { createVuePlugin } from 'vite-plugin-vue2'
...
plugins: [
createVuePlugin({
jsx: true
}),
]
...
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
Copy the code
In the corresponding Vue file using JSX syntax, modify:
<script> // replace with <script lang=" JSX ">Copy the code
Note that @vue/ babel-PRESET – JSX and @vue/ babel-helper-vuE-jsx-merge-props need to be installed for compatibility in the Vue CLI webpack as well
‘isMoment’ is not exported by ‘node_modules..
This problem is reported on components that use ant-design-vue because the underlying ANTD reference moment reads:
import * as moment from "moment";
Copy the code
The solution is to use vite plugin vite-plugin-antDV1-Momentjs-resolver, configuration is as follows:
import AntdMomentResolver from "vite-plugin-antdv1-momentjs-resolver";
plugins: [
AntdMomentresolver()
],
Copy the code
Note that if you are using CNPM installed ant-design-vue, you need to pass in the reg argument: /[email protected]@ant-design-vue\\[\w-\\ /]*\.js$/
process is not defined
In the Vue CLI, we use process.env to get environment variables, but they are not recognized in Vite. We can replace the plugin with Vite and replace it at build time as follows:
import { replaceCodePlugin } from "vite-plugin-replace"; . replaceCodePlugin({ replacements: [ { from: /process.env/g, to: "import.meta.env", }, ], }),Copy the code
This solution is also compatible with vue CLI webpack.
The env variable
In the Vue CLI webpack, some variables are used, such as:
VUE_APP_BUILD_ENV='test'
VUE_APP_BASE_GRAIN_API='/dg-grain-api'
VUE_APP_BASE_GANG_API='/dg-steel-api'
VUE_APP_BASE_USER_API='/dg-user-api'
Copy the code
In Vite, only variables starting with vite can be used. In order to be compatible with both solutions, envPrefix can be configured as follows:
defineConfig({
envPrefix: 'VUE_APP_',
})
Copy the code
/deep/ Expected selector using [plugin:vite: CSS]
The following figure shows the error:
- will
<style lang="scss">
Replace with<style lang="less">
. - will
/deep/
Replace with::v-deep
.
If less is not used in the project, it is safer to use the latter. If :: V-deep warnings are replaced, use:
:deep(.child) {
color: red;
}
Copy the code
Note that vite does not have a sass parser by default, you need to install NPM install sass -d
Stylus and less global variables
Inline JavaScript is not enabled. Is it set in your options?
The following figure shows the error:
The problem is that the stylus or less global variable is used in the project. There are the following solutions:
PreprocessorOptions: {less: {modifyVars: {// Set ant-design-vue theme color here etc. 'primary-color': '#0053db', 'success-color': '# 52C41A ',}, // Support inline JavaScript JavaScript: true,}, stylus: {imports: [path.resolve(__dirname, 'SRC /assets/styl/fun.styl')],// For the suffix name. Stylus infuses global variables}, styl: {imports: [path.resolve(__dirname, 'SRC /assets/styl/fun.styl')],Copy the code
ESM third-party libraries are not supported
In the project, some third-party dependency packages are more or less used. Because the dependency packages are not written in accordance with ESM, the startup or packaging error is the most common problem. In the development environment, you can use @Originjs/vite-plugin-commonJS conversion, but for some abnormal writing method, Contrib-hls. Js: contrib-contrib-hls. Js: contrib-contrib-hls. Js: contrib-contrib-hls.
To solve this problem, you can use Externals and configure the following parameters:
import { viteExternalsPlugin } from 'vite-plugin-externals'
...
plugins: [
viteExternalsPlugin({
'video.js': 'videojs',
}),
]
Copy the code
In index.html, as follows:
< script SRC = "https://cdnjs.cloudflare.com/ajax/libs/video.js/6.0.0/video.min.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.js" > < / script >Copy the code
conclusion
Vite has significant performance improvement in dev, experience is rapid, but the request page in the browser, will be loaded at the same time a large number of js file, which leads to have some sacrifice in speed and webpack does much slower in the building, and file the slower the more of the project, but once built, the browser side is faster than vite experience. In addition, even if Vite uses rollup to package files in production environment, it still does not support IE well, and the production packaging speed is basically the same as WebPack. In short, if the project is stable and large, it is not recommended to change to Vite.
Related configuration source: github.com/lvming68160…