打包优化

1 安装插件

pnpm add source-map-explorer -D

2 配置 css,js 分开打包

配置css,js分开打包

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve('', './src'),
    },
  },
  build: {
    target: 'esnext',
    outDir: 'build',
    assetsDir: 'assets',
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        entryFileNames: 'js/[name]-[hash].js',
        chunkFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'css/[name]-[hash].[ext]',
        sourcemap: true, // 输出js map文件
      },
    },
  },
})

3 配置 analyze 分析

在package.json文件的scripts中添加

"analyze": "source-map-explorer 'build/js/*.js'"