前言
vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比较很方便的。
依赖
依赖名称 | 依赖版本 | 依赖说明 |
---|---|---|
vite | ^2.9.9 | vue快速构建工具 |
@vitejs/plugin-vue | ^2.3.3 | vite支持打包vue插件 |
@vitejs/plugin-vue-jsx | ^1.3.10 | vite支持打包vue-jsx语法插件 |
autoprefixer | ^10.4.7 | 自动给css加上各浏览器前缀 |
vite-plugin-dts | ^1.2.0 | 打包类型声明文件 |
postcss-flexbugs-fixes | ^5.0.2 | 修复浏览器flex的一些bug |
详细配置
// vite.config.js
import {
defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import autoprefixer from 'autoprefixer';
import pff from 'postcss-flexbugs-fixes';
import dts from 'vite-plugin-dts';
import path from 'path';
import {
name} from './package.json';
export default defineConfig({
css: {
postcss: {
plugins: [autoprefixer({
overrideBrowserslist: [
"defaults",
"not ie < 8",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
],
grid: true,
}), pff]
}
},
plugins: [vue(), vueJsx(), dts()],
resolve: {
alias: {
'@': '/src'
},
},
build: {
minify: "terser",
brotliSize: true,
sourcemap: false,
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
},
keep_classnames: true,
},
lib: {
entry: path.resolve(__dirname, 'src/index.ts'),
name,
formats: ['es', 'cjs', 'umd'],
fileName: (format) => `${
name}.${
format}.js`
},
// assetsDir: 'assets',
outDir: 'dist',
rollupOptions: {
external: [
'vue',
'vuex',
'vue-router',
'axios',
'moment',
'mitt',
'js-cookie',
'crypto-js/aes',
'crypto-js/enc-utf8',
'crypto-js/pad-pkcs7',
'crypto-js/mode-ecb',
'crypto-js/md5',
'crypto-js/enc-utf8',
'crypto-js/enc-base64',
'ant-design-vue',