Laravel+vue3+vite移除console與分柝檔案大小

在開發環境時,常會使用 console.log 來查詢資料,但在正式環境時,這些應該都要被移除,若要手工一個個的移除難免會有疏落之處,這時可以使用 terser 來自動移除。

Vite 有提供設定參數可以移除console,只要搭配 terser,就可以達成,以下來看如何設置。

安裝 terser

 npm install terser -D

修改 vite.config.js

在 vite.config.js 增加下列程式碼,讓在佈署時( npm run build ),可以移除 console

build: {
    minify: 'terser',
    terserOptions: {
        compress: {
            // 正式環境時移除 console
            drop_console: true,
            drop_debugger: true
        }
    }
},

分柝佈署檔案大小

若在佈署時發生下列警示時,是告知檔案大於500 kB,不利於網路上流覽網頁的順暢,建議將檔案分拆。

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

可以加入下列程式碼

build: {
    rollupOptions: {
        output: {
            chunkFileNames: 'static/js/[name]-[hash].js',
            entryFileNames: 'static/js/[name]-[hash].js',
            assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
            manualChunks(id) {
                if (id.includes('node_modules')) {
                    return id
                        .toString()
                        .split('node_modules/')[1]
                        .split('/')[0]
                        .toString();
                }
            }
        }
    },
    chunkSizeWarningLimit: 1600,
},

完整的 vite.config.js 可以參考如下

import {
    defineConfig
} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
    build: {
        minify: 'terser',
        terserOptions: {
            compress: {
                // 正式環境時移除 console
                drop_console: true,
                drop_debugger: true
            }
        },
        rollupOptions: {
            output: {
                chunkFileNames: 'static/js/[name]-[hash].js',
                entryFileNames: 'static/js/[name]-[hash].js',
                assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
                manualChunks(id) {
                    if (id.includes('node_modules')) {
                        return id
                            .toString()
                            .split('node_modules/')[1]
                            .split('/')[0]
                            .toString();
                    }
                }
            }
        },
        chunkSizeWarningLimit: 1600,
    },
});

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *