Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

preface

The author recently worked on a project that used the Vite build tool, and when I was building the project I saw this was my god! How big the bag is! So, I performed a minor operation on him.

Here are a few tips on how to optimize a Vite project

Configure lazy route loading

JavaScript packages can become very large when packaged to build applications, affecting page loads. At this point, we can split these components into chunks and load the corresponding files when the user first enters the page. Avoid requesting all components down at once.

It is important to note that the components of the page can also be split, if the split is not enabled http2 will occur blocking problems!!

export default[{path: '/'.component: import('.. /views/Register/index.vue')}, {path: '/Login'.component: import('.. /views/Login/index.vue')}, {path: '/Register'.component: import('.. /views/Register/index.vue')}, {path: '/Questions'.component: import('.. /views/Questions/index.vue')}, {path: '/Report'.component: import('.. /views/Report/index.vue')}, {path: '/UserInfo'.component: import('.. /views/UserInfo/index.vue')}, {path: '/Record'.component: import('.. /views/Record/index.vue')}]as Array<RouteRecordRaw>;
Copy the code

Analysis of building

Install the rollup-plugin-Visualizer plug-in, which is used to analyze the dependency size ratio.

npm install  rollup-plugin-visualizer @types/rollup-plugin-visualizer -D
Copy the code

Introduce and use it in viet.config.ts.

import { visualizer } from 'rollup-plugin-visualizer';
Copy the code
export default defineConfig({
  // ...
  plugins: [
    // Put the Visualizer plug-in in the last place
    visualizer()
  ]
});
Copy the code

When you are configured, at your next NPM build project, you will create a stats.html directory that contains the analysis results for your project. In analysis, you can optimize files that take up more space.

Code compression

Install the Viet-plugin-compress plug-in to gzip or brotli compress the code in the project

npm install vite-plugin-compress -s
Copy the code

Introduce and use it in viet.config.ts.

import compress from 'vite-plugin-compress'
Copy the code
export default defineConfig({
  // ...
  plugins: [
    compress(),
  ]
});
Copy the code

Image compression

Install the viet-plugin-Imagemin plug-in to compress the images in the project.

npm i vite-plugin-imagemin -D
Copy the code

Introduce and use it in viet.config.ts.

import viteImagemin from 'vite-plugin-imagemin'
Copy the code
export default defineConfig({
  // ...
  plugins: [
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7.interlaced: false
      },
      optipng: {
        optimizationLevel: 7
      },
      mozjpeg: {
        quality: 20
      },
      pngquant: {
        quality: [0.8.0.9].speed: 4
      },
      svgo: {
        plugins: [{name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs'.active: false}]}}),]});Copy the code

Optimized package volume

In Vue3, many oF the apis can be optimized by tree-shake, which means that your project uses certain apis to package only those apis that are used, reducing the size of the package. When choosing third-party libraries, try to use ES versions such as LoDash-ES and LoDash. The former is ES6 code that can be tree-shake, while LoDash is all imported and large.

Compatible with

Currently, most browsers support ESM, but some older browsers do not support ESM. In this case, you need to use @Vitejs/plugin-Legacy to support these older browsers. Please click here for details

Install @ vitejs/plugin – legacy

npm install @vitejs/plugin-legacy -s
Copy the code

Introduce and use it in viet.config.ts.

import legacy from '@vitejs/plugin-legacy'
Copy the code
export default defineConfig({
  // ...
  plugins: [
    legacy({
      targets: ['defaults'.'not IE 11']]}}));Copy the code