• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

vite项目构建优化

武飞扬头像
juejin
帮助102

前言

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

 

image-20220330160809121

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

download

配置路由懒加载

当打包构建应用时,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,里面即是你项目中的分析结果。分析中你可以将空间占比比较大的文件进行适当的优化。

image-20220330165653454

代码压缩

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

image-20220330171007111

图片压缩

安装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-eslodash,前者是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']
    })
  ]
});

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanekgf
系列文章
更多 icon
同类精品
更多 icon
继续加载