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

Time:2022-9-21

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:

//vite.config.ts
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
....
scripts:{
+    "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

//vite.config.ts
build:{
  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 […]