vite项目构建优化

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

前言

作者最近在开发的项目有一个使用到了vite构建工具，在构建项目时，当时看到这个就是我的天！这个包怎么这么大！于是，我对他做了一场小手术。

下面我将给大家带来如何优化一个vite项目的几个小方法

配置路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。这时，我们可以将这些组件拆分出来，变成多个chunk，当用户首次进入页面时才会加载对应的文件。避免一次性将所有组件请求下来。

这里需要注意的是，页面中的组件也是可以被拆分出来的，如果过分的拆分在未开启http2时会发生请求阻塞问题！！

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>;

分析构建

安装rollup-plugin-visualizer插件，该插件用于分析依赖大小占比。

npm install  rollup-plugin-visualizer @types/rollup-plugin-visualizer -D

在vite.config.ts中引入并使用它。

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  // ...
  plugins: [
    // 将这个visualizer插件放到最后的位置中
    visualizer()
  ]
});

当你配置完毕之后，在你下一次npm build项目时，会在目录下创建一个stats.html，里面即是你项目中的分析结果。分析中你可以将空间占比比较大的文件进行适当的优化。

代码压缩

安装vite-plugin-compress插件，对项目中的代码进行gzip压缩或brotli压缩

npm install vite-plugin-compress -s

在vite.config.ts中引入并使用它。

import compress from 'vite-plugin-compress'

export default defineConfig({
  // ...
  plugins: [
    compress(),
  ]
});

图片压缩

安装vite-plugin-imagemin插件，对项目中的图片进行压缩处理。

npm i vite-plugin-imagemin -D

在vite.config.ts中引入并使用它。

import viteImagemin from 'vite-plugin-imagemin'

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
          }
        ]
      }
    }),
  ]
});

优化包体积

在vue3中，许多的Api都是可以被tree-shake优化，也即是你的项目中使用到了某些API只打包这些被使用到的API，减少包的体积。在选择第三方库时，尽量使用ES版本就比如lodash-es和lodash，前者是ES6格式的代码可以被tree-shake，而lodash则是全部引入，体积较大。

兼容

目前，大部分的浏览器支持了ESM，但部分旧版浏览器不支持ESM，此时就需要使用@vitejs/plugin-legacy来兼容这些旧版的浏览器。详细请戳这里

安装@vitejs/plugin-legacy

npm install @vitejs/plugin-legacy -s

在vite.config.ts中引入并使用它。

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  // ...
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
});