打包体积的分析和优化

这里使用 Vite 作为主要打包方案

1、安装分析插件

Vite 项目可以使用 rollup-plugin-visualizer 去检测

npm i rollup-plugin-visualizer

根据官网，Vite.config.ts 配置如下：

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

// ...
  plugins: [
    visualizer(
      {
        // emitFile: true,
        // filename: "stats.html",
        open: true,		// 打包后自动打开页面
        gzipSize: true,		// 查看 gzip 压缩大小
        brotliSize: true	// 查看 brotli 压缩大小
      }
    )
  ],

2、打包后分析

这里采用我之前的项目 personal-web 进行打包分析，可以看到有部分包是很大的，而且都是一些框架依赖或者相关的插件：

3、优化方案

3.1 CDN引入

需要使用 build.rollupOption 将包的体积进一步优化，采用 CDN 的方式将依赖的框架库使用 script 直接引入，并且加上异步属性：

1. 将依赖的包通过配置，移出打包

   // vite.config.ts
   export default defineConfig({
     // ...
     build: {
       rollupOptions: {
         external: ['axios'],
         output: {
           format: 'iife',		// umd
           globals: {
             axios: 'axios'
           }
         }
       }
     }
   })
   
   

   需要注意添加 format 转换，除非打包的是库的形式，不加的话库还是 import 进去，添加 iife 和 umd 打包产物有些许不同：

   iife：

   

   umd：

   

2. 在 index.html 中添加 script 引入：

   <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
   

3. 重新打包，可以看到包的体积减小了一百多兆，因此此时 react-dom 已经没有被打包进来了

3.2 针对高版本打包

在 vite 打包的时候，官方已经默认预设了打包兼容的浏览器是支持 esm 模式的浏览器，如果需要针对更高或者更低的浏览器，需要使用 build.target 去设置最终构建的浏览器兼容目标

4、webpack 分析优化

• 打包分析插件：webpack-bundle-analyzer

  plugins: ["webpack-bundle-analyzer"]
  

• CDN引入配置：

  {
  	externals: {
  		"vue": "Vue"
  	}
  }
  

• 针对高版本打包

  vue-cli-service build --modern
  

  本质上是利用，添加 nomodule 和 ``type='module’来对高版本和低版本做兼容处理，高版本识别到nomodule就不会引入脚本，而低版本不会识别这个就引入了，反而type='module` 在低版本无法被解释执行

编辑 | sishen
来源 | 前端兔
公众号 | 前端兔

关注公众号查看更多前端知识分享~~