background
In our daily work, we will definitely encounter problems such as project packaging optimization, and in the face of this problem, we usually optimize from the following aspects, and we will record it here.
Packaging report analysis
If we want to see when each file or dependency size is packaged, we need to use the rollup-plugin-visualizer plug-in for analysis, so that we can optimize in a targeted manner. Of course, there must be other third-party plug-ins. If you have better ones, you can also use other ones.
Install dependency package
npm install rollup-plugin-visualizer -D yarn add rollup-plugin-visualizer -D pnpm install rollup-plugin-visualizer -D
After we have installed the dependencies, we can configure the following code in it. After we configure it, we will find that a file has been generated in the project root directory. When we develop this file, we can view the size of the packaged file.
plugins: [
visualizer({
open: false, // Note that it should be set to true here, otherwise it will be invalid filename: '', // File name generated by analysis diagram gzipSize: true, // Collect gzip size and display it brotliSize: true, // Collect brotli size and display it }),
]CDN acceleration
When we package many third-party plug-ins, they will be packaged in. At this time, the package will be roughly larger. At this time, we need to use third-party plug-ins. Remember that if you need ordinary updates to third-party plug-ins, don't use this method. Take lodash as an example, an open source third-party cdn website bootcdn
// Install plug-innpm install vite-plugin-cdn-import
// Introduceimport importToCDN from 'vite-plugin-cdn-import';
// useimportToCDN({
modules: [
{
name: 'lodash',
var: '_',
path: '/npm/[email protected]/',
},
],
}),Image resource compression
There will definitely be more or less many static resource images in our projects. If our pictures are larger, the resources downloaded when the user first pulls the website. At this time, we need to compress the static images, so we need to use third-party plug-ins to modify them.
Installation dependencies:
npm install vite-plugin-cdn-import -D yarn add vite-plugin-cdn-import -D pnpm install vite-plugin-cdn-import -D
use:
For specific configurations, please check the official website
import viteImagemin from 'vite-plugin-imagemin';
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,
},
],
},
}),Packaging compression
I don’t need to say much about this, basically everyone will configure it.
// Installnpm install vite-plugin-compression -D
yarn add vite-plugin-compression -D
// Quoteimport viteCompression from 'vite-plugin-compression';
// useviteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),Summarize
The above methods are the basic methods of packaging optimization. You can configure them according to your needs and add other packaging optimization issues. For more related vite packaging optimization CDN compression content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!