vite打包优化

说到前端性能优化，通过我个人的感觉总体的来说优化的本质就是优化文件的体积，体积小了加载就快了，当然前端性能不光是在体积方面，在代码层面需要去优化，本篇文章主要讲述的是Vite打包优化。

分包策略

因为浏览器的缓存策略，当请求的文件名不变时，会直接从缓存中获取文件，所以只要每次 main.js 中内容发生了变化，打包后的文件名中的 hash 值都会不一样。也就是说，当项目业务代码发生变化，例如 main.ts 中循环体内的内容发生了变化时，打包后的文件名就发生了变化，浏览器就会重新请求文件。但是这里的问题是，每次打包后的内容大部分都是 lodash 库的内容，它的内容是不会变化的（node_modules 中的代码都是不会变化的），我们只是更改了业务代码而已，会导致每次浏览器请求的文件都很大，很大的网络传输损耗。

分包策略就是为了解决这个问题，它会将一些不常规更新变化的文件进行单独打包处理。

在vite.config.js中配置

import {defineConfig} from 'vite'
module.exports= defineConfig({
	build: {
	sourcemap: false,
    minify: 'terser',
    chunkSizeWarningLimit: 1500,
    terserOptions: {
      // 去掉console和debugger
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: { // vite打包是通过rollup来打包的
      output: {
        manualChunks: (id) => {
          // 可以在这里打印看一下id的值，这里做个简单处理将node_modules中的包打包为vendor文件
          if(id.indexOf('node_modules') > -1) {
            return 'vendor'
          }
        }
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: 'js/[name].[hash].js',
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: 'js/[name].[hash].js',
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: '[ext]/[name].[hash].[ext]',
      }
    }
  },
});

2. gzip压缩

安装 vite-plugin-compression

npm i vite-plugin-compression -D

在vite.config.js中配置

import { defineConfig } from 'vite'
import VitePluginCompression from 'vite-plugin-compression'

export default defineConfig({
  build: {
  	...
  },
  plugins: [
    ...
    VitePluginCompression()
  ]
})

3. CDN加速

分发策略里我们将依赖单独打成一个稳定的包。现在是另外一个场景：比如国内访问一些未被封的国外网站（例如 github、newsela 等）网站时，因为服务器在国外，所以浏览器打开这些网站时请求时间一般都会比较久。即使你分包了，但是如果这个包体积很大，访问时间还是会很长，因为是从国内访问国外了。

如果我们将其中一些依赖包经过 cdn 的方式访问，例如 Vue vue-router 这些包通过 cnd 的方式访问，那么这些包就会直接通过 cdn 地址的方式加载，而不是在我们的服务器上去请求，这样我们的项目包就会更小，页面响应就会更快。

安装 vite-plugin-cdn-import

npm install vite-plugin-cdn-import -D

在vite.config.js中配置

import { defineConfig } from 'vite'
import ViteCDNPlugin from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    ViteCDNPlugin({
      modules: [{
        name: 'lodash', // 包名
        var: '_', // 对应cdn包导出的变量，如jQuery导出的是$
        path: 'https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js'
      }]
    })
  ]
})

4. 图片压缩

安装vite-plugin-imagemin

npm install vite-plugin-imagemin -D

在vite.config.js中配置

import viteImagemin from "vite-plugin-imagemin"
import {defineConfig}from 'vite'
module.exports = defineConfig{
	plugins:[
		viteImagemin()
	]
})