Recently in vite development, integration of the common plug-in. Vite comes with the configuration to remove console.log and comments

export default defineConfig({
    build: {terserOptions: {
            // Remove the console and comments after packaging
            compress: {
                drop_console: true.drop_debugger: true,},},},})Copy the code

1. Viet-plugin-style-import Import styles as required

import styleImport from 'vite-plugin-style-import'

export default defineConfig({
    plugins: [
        styleImport({
            libs: [{libraryName: 'element-plus'.esModule: true.resolveStyle: name= > {
                        return `element-plus/lib/theme-chalk/${name}.css` // Import styles as needed},},],})Copy the code

2. Viet-plugin-components Import components as required

import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'

export default defineConfig({
    plugins: [
        ViteComponents({ 
            customComponentResolvers: [
                ElementPlusResolver()
            ], 
        }),
    ],
})
Copy the code

3. Viet-plugin-compression enables Gzip compression

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
    plugins: [
        viteCompression({
            // Generate compressed package gz
            verbose: true.disable: false.threshold: 10240.algorithm: 'gzip'.ext: '.gz',})]})Copy the code

4. Viet-plugin-cdn-import Imports CDN resources

import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'

export default defineConfig({
    plugins: [
        vue(),
        importToCDN({
            modules: [
                autoComplete('vue'),
                {
                    name: 'element-plus'.var: 'ElementPlus'.path: 'https://unpkg.com/element-plus/lib/index.full.js'.css: 'https://unpkg.com/element-plus/lib/theme-chalk/index.css'}, {name: 'vant'.var: 'vant'.path: 'https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js'.css: 'https://cdn.jsdelivr.net/npm/vant@next/lib/index.css',},],}),],})Copy the code

5. Rollup-plugin-external-globals (another imported CDN resource)

import externalGlobals from 'rollup-plugin-external-globals'

export default defineConfig({
    build: {rollupOptions: {external: ['vue'.'element-plus'].plugins: [
                externalGlobals({
                    vue: 'Vue'.'element-plus': 'ElementPlus',}),],}}})Copy the code