本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
前面章节讲解的全部都是
Plugins插件配置相关内容，本章讲解Build配置优美的打包方法。
推荐阅读
vite.config.ts 之 Build 篇 (八)
在
config目录中创建build\index.ts文件
// https://vitejs.cn/config/#build-target
export function createViteBuild(isBuild: boolean) {
return {
/**
* 类型： string | string[]
* 默认: modules
* 设置最终构建的浏览器兼容目标
*/
target: 'es2015',
/**
* 类型： string
* 默认: dist
* 指定输出路径（相对于 项目根目录）
*/
outDir: 'dist',
/**
* 类型： string
* 默认: assets
* 指定生成静态资源（js、css、img、fonts）的存放路径（相对于 build.outDir）。
*/
assetsDir: 'static/assets',
/**
* 类型： number
* 默认： 4096 (4kb)
* 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。
*/
assetsInlineLimit: 4096,
/**
* 类型： boolean
* 默认: true
* 启用/禁用 CSS 代码拆分。如果禁用，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
*/
cssCodeSplit: true,
/**
* 类型： boolean | 'inline' | 'hidden'
* 默认： false
* 构建后是否生成 source map 文件。如果为 true，将会创建一个独立的 source map 文件。
* 如果为 'inline' source map 将作为一个 data URI 附加在输出文件中。
* 如果为 'hidden' 的工作原理与 'true' 相似，只是 bundle 文件中相应的注释将不被保留。
*/
sourcemap: false,
/**
* 类型： RollupOptions
* 自定义底层的 Rollup 打包配置。这与从 Rollup 配置文件导出的选项相同，并将与 Vite 的内部 Rollup 选项合并。
*/
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: [],
// 指定文件输出的配置
output: {
chunkFileNames: `static/js/[name]-[hash].js`,
entryFileNames: `static/js/[name]-[hash].js`,
assetFileNames: `static/[ext]/[name]-[hash].[ext]`,
manualChunks(id: any) {
if (id.includes('node_modules')) {
return 'vendor' //代码分割为第三方包
}
},
},
},
terserOptions: {
// 打包后移除console和注释
compress: {
keep_infinity: true,
drop_console: isBuild,
drop_debugger: isBuild,
pure_funcs: ['console.log', 'console.info'],
},
},
/**
* 类型： boolean
* 默认： true
* 启用/禁用 brotli 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
*/
brotliSize: false,
/**
* 类型： number
* 默认: 500
* chunk 大小警告的限制（以 kbs 为单位）。
*/
chunkSizeWarningLimit: 2000,
}
}
import { createVitePlugins } from './plugins'
import { createViteBuild } from './build'
export { createVitePlugins, createViteBuild }
- 配置
引入
createViteBuild方法添加到vite.config中
// vite.config.ts
import { UserConfig, ConfigEnv } from 'vite'
import { createVitePlugins, createViteBuild } from './config'
// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
const isBuild = command === 'build'
return {
plugins: createVitePlugins(isBuild),
build: createViteBuild(isBuild),
}
}
当前项目将
Eslint、Prettier、Stylelint、Commitlint、Husky全部加入到项目中。代码已经提交到Gitee
生成目录
npm install --global treer
treer -e ./result.md -i "/node_modules|git|dist/"
本章最终目录如下：
├─.eslintignore
├─.eslintrc-auto-import.json
├─.eslintrc.js
├─.stylelintignore
├─commitlint.config.js
├─index.html
├─LICENSE
├─package.json
├─pnpm-lock.yaml
├─prettier.config.js
├─README.en.md
├─README.md
├─stylelint.config.js
├─tsconfig.json
├─vite.config.ts
├─src
| ├─App.vue
| ├─env.d.ts
| ├─main.ts
| ├─components
| | └HelloWorld.vue
| ├─assets
| | ├─logo.png
| | ├─icons
| | | └vuejs-fill.svg
├─public
| └favicon.ico
├─config
| ├─index.ts
| ├─unplugin
| | ├─auto-imports.d.ts
| | └components.d.ts
| ├─plugins
| | ├─compress.ts
| | ├─imagemin.ts
| | ├─index.ts
| | ├─mock.ts
| | ├─style.ts
| | └unplugin.ts
| ├─build
| | └index.ts
├─.vscode
| ├─extensions.json
| └settings.json
├─.husky
| ├─commit-msg
| ├─pre-commit
| ├─_
| | └husky.sh
继续学习
废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇🙇🙇。
