构建优化

分包策略

现象

我们先看一个现象：

main.ts
import { forEach } from 'lodash'

let list = [1,2,3]
forEach(list,(ele)=>{
    console.log(ele)
})

然后我们直接打包yarn build，发现里面有密密麻麻的代码，我们可以添加一个vite配置

build.minify设置为false，就不会对代码进行压缩了

我们发现lodash相关的代码有5000多行，也就是当我们更新我们的业务代码以后，就会生成新的hash文件名的资源。

**浏览器缓存策略：**静态资源的名称没有变化，就不会重新去向服务端发送请求去拿内容，只要文件名变了，内部的资源哪怕没有变化，也会重新发送请求去拿内容

我们每次更新代码打包后都会导致文件名变更，如果当文件没有任何变化，生成的hash字符也就不会变

这样的话把第三方包的资源和业务代码放在一起，业务变化以后会生成新的静态资源文件，浏览器就会重新请求，请求了会带有额外的这部分不会变化的第三方资源

所以，分包就是把一些不会常规更新的文件，进行单独打包处理

配置

首先我们看rollupOptions.output.manualChunks的配置，可以看到要打包的所有文件的路径

一般我们认为在node_modules里面的就是不会发生变化的，所以我们可以这样配置

manualChunks:(id)=>{
  if(id.includs("node_modules")){
    return "vendor"
  }
}

假设我们现在再次修改main.ts打包以后，vendor文件的哈希没有变化，index的哈希发生变化

所以vendor这个文件会被浏览器缓存，这样就减轻了客户端和服务端交互在http请求里面的压力

gzip压缩

npm i vite-plugin-compression -D

import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [viteCompression()],
  };
};

两次打包对比

我们开启gzip压缩以后会生成压缩文件，我们把资源给服务端以后，服务端请求静态资源时，如果发现有.gz后缀文件，给返回该文件，并设置响应头content-encoding:gzip，浏览器收到响应结果，发现响应头里有gzip对应字段，就会去解压，得到原原本本的js文件，而浏览器解压时需要一定的时间的，如果体积不是很大，不要用gzip压缩。

CDN加速

CDN的全称是Content Delivery Network，即内容分发网络

我们的项目打包以后会放到服务器上，如果把所有的第三方包都打包到自己的服务器，会耗费资源，不利于用户访问

A free CDN for Open Source：jsdelivr

我们安装从 CDN 加载 modules 的 vite 插件

vite-plugin-cdn-import

vite配置：

import importToCDN from 'vite-plugin-cdn-import'

export default {
    plugins: [
        importToCDN({
            modules: [
                {
                    name: 'lodash',
                    var: '_',
                    path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`,
                }
            ],
        }),
    ],
}

在打包的时候会自动把<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>添加到header中

vite在打包生产的时候用的是Rollup，这个插件改了vite对build.rollupOptions.external和build.rollupOptions.externalGlobal的配置

分包策略​

现象​

配置​

gzip压缩​

CDN加速​

分包策略

现象

配置

gzip压缩

CDN加速