阅读数:296 评论数:0

一、build视图分析依赖文件

分析项目中的文件大小及引用情用情况，是优化前的重要一步，从而采取文件分包、cdn引入等相关技术。

Rollup Plugin Visualizer是一个依赖分析插件，它提供了多种模式的依赖分析。

1、安装

npm install --save-dev rollup-plugin-visualizer

2、配置

安装完成后，即可在vite下的插件属性中进行配置

import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
  plugins: [vue(), visualizer({
    emitFile: false,
    file: "stats.html", //分析图生成的文件名
    open:true //如果存在本地服务端口，将在打包后自动展示
  })],
})

然后执行npm  run build就可以查看依赖图了。

3、配置参数

二、第三方CDN引入

cdn管理插件我们使用vite-plugin-cdn-import

1、安装

npm install vite-plugin-cdn-import --save-dev

2、配置

// vite.config.js 基本用法
import reactRefresh from '@vitejs/plugin-react-refresh'
import importToCDN from 'vite-plugin-cdn-import'

export default {
    plugins: [
        importToCDN({
            modules: [
                {
                    name: 'react',
                    var: 'React',
                    path: `umd/react.production.min.js`,
                },
                {
                    name: 'react-dom',
                    var: 'ReactDOM',
                    path: `umd/react-dom.production.min.js`,
                },
            ],
        }),
    ],
}

三、依赖文件分包

在我们没有配置构建工具的分包功能时，构建出来的build将无比巨大且是独立的js和css文件，这样就会存在本地加载文件的压力。主要使用的rollup配置：

1、静态文件按类型分包

build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      }
    }
  }

2、超大静态资源拆分

build里的output设置内,添加以下代码

manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }

// 另一种写法
manualChuncks: {
  自定义包名: ['loadash','vue'],
}

四、gzip压缩文件

1、安装vite-plugin-compression

npm i vite-plugin-compression -D

vite-plugin-compression使用gzip或者brotli来压缩资源。

2、配置

import viteCompression from 'vite-plugin-compression';
export default defineConfig({
  plugins: [vue(), viteCompression({
    verbose: true, //是否在控制台输出压缩结果
    disable: false, //是否禁用,相当于开关在这里
    threshold: 10240, //体积大于 threshold 才会被压缩,单位 b，1b=8B, 1B=1024KB  那我们这里相当于 9kb多吧，就会压缩
    algorithm: 'gzip', //压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
    ext: '.gz', //文件后缀
    )}
 ]
)}

3、nginx开启静态资源压缩

gzip_static on;

五、vite build下去除console、debug等无效

vite.config.ts种build下必须配置minify（压缩方式）

build:{
    minify: "terser",
	terserOptions: {
   		compress: {
      		drop_console: true,
     	 	drop_debugger: true
   		}
	}
}

而如果使用esbuild来构建如果去掉console和debugger呢.

 esbuild:{
    drop: command==='build'? ["console","debugger"]:[],
},