打包控制

打包结构控制

由于 Vite 在生产环境下的底层是基于 Rollup 进行打包，因此可以通过 Rollup 的配置项来控制打包输出的结构。

具体 rollupOptions 配置可参考 Rollup 文档。

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 入口文件
        // string | ((chunkInfo: PreRenderedChunk) => string)
        entryFileNames: '[name].js',

        // 代码分割后的文件
        // string | ((chunkInfo: PreRenderedChunk) => string)
        chunkFileNames: '[name]-[hash].js',

        // 静态资源
        // string | ((assetInfo: PreRenderedAsset) => string)
        assetFileNames: (assetInfo) => {
          let extType = assetInfo.names?.[0]?.split('.').at(-1) || ''
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType || '')) {
            extType = 'img'
          } else if (/css/i.test(extType || '')) {
            extType = 'css'
          } else {
            extType = 'assets'
          }
          return `${extType}/[name]-[hash][extname]`
        },

        // 按需加载的文件
        // { [chunkAlias: string]: string[] } | ((id: string, {getModuleInfo, getModuleIds}) => string | void)
        manualChunks(id) {
          const packageMap = {
            '@vue': 'vendor-vue',
            'element-plus': 'vendor-element-plus',
            'echarts': 'vendor-echarts',
          }
          for (const [pkg, chunkName] of Object.entries(packageMap)) {
            if (id.includes(`/node_modules/${pkg}/`)) {
              return chunkName
            }
          }
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        },
      },
    },
  },
})

如何清理源码中没有被应用的代码？主要是 JS、TS、CSS 代码

1. ESLint、Terser：文件 -> 分析 -> 裁剪

   针对单文件

2. Tree Shaking：树摇优化。

   针对多文件（仅支持 js，且是 ESM 模块化标准）

3. PurgeCSS：CSS 原子化

   针对 CSS