vue3+ts+vite problem summary – vite packaging analysis (5)


1. Packaging optimization process

1. Currently vite2.x is packaged based on rollup, not esbuild,see here
2. Use rollup-plugin-visualizer (a plugin similar to webpack: webpack-bundle-analyzer) for packaging analysis. After packaging, a report.html file will be generated by default in the root directory
Configure rollup-plugin-visualizer:
The first step to install:npm i rollup-plugin-visualizer -D
The second step configuration:

import { visualizer } from 'rollup-plugin-visualizer';
+ export default defineConfig(({ mode }: UserConfig): UserConfig => {
+ const lifecycle = process.env.npm_lifecycle_event;
 plugins: [
      // package analysis
 +     lifecycle === 'report'
        ? visualizer({ open: true, brotliSize: true, filename: 'report.html' })
        : null

third step:Modify the package.json file

// package.json
+    "report": "rimraf dist && cross-env vite build",

the fourth step: Execute the command to produce a report.html file, click the browser to open it and you can see the effect
vue3+ts+vite problem summary - vite packaging analysis (5)

Plugin: vite-plugin-compression uses gzip or brotli to compress resources.
Install: yarn add vite-plugin-compression -D or npm i vite-plugin-compression -D

Configure vite: build.terserOptions production environment remove console.log he debugger

  terserOptions: {
        // remove console in production environment
        compress: {
          drop_console: true,
          drop_debugger: true

Recommended Today

How much do you know about the world's largest semiconductor IP industry chain?

History of GPU Development GPU (graphics processing unit): Graphics processor, also known as display core, visual processor, display chip, is a kind of graphics processing unit on personal computers, workstations, game consoles and some mobile devices (such as tablet computers, smartphones, etc.) A microprocessor that works with graphics-related operations. In 1999, NVIDIA first proposed the […]