Laravel中Vite构建JS文件为空及禁用指定文件压缩的方法

问题详情 #

我正在构建Laravel应用，使用Vite打包4个.js文件，当前vite.config.js配置如下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/sass/style.scss',
                
                'resources/js/app.js',
                'resources/js/clipboard.js',
                'resources/js/list.js',
                'resources/js/filter.js',
            ],
            refresh: true,
        }),
    ],
});

运行npm run build后，app.js和clipboard.js能正常构建压缩，但list.js和filter.js虽存在于/public/build/assets目录中，文件内容却为空。将list.js内容替换为clipboard.js的内容后能正常构建，说明问题出在list.js原代码，但该代码运行正常无报错。list.js原代码如下：

function articlesList(favourites, route)
{
    return {
        favourites: favourites,
        favourite: function (id) {
            const data = {
                item_id: id
            };

            axios
                .post(route, data)
                .then((r) => {
                    const id = r.data.id;
                    const action = r.data.action;

                    if (action === 'remove') {
                        let favourites = [];
                        for (const key in this.favourites) {
                            if (this.favourites[key] !== id) {
                                favourites.push(this.favourites[key]);
                            }
                        }

                        this.favourites = favourites;
                    } else if (action === 'add') {
                        this.favourites.push(id);
                    }
                }).catch((e) => {
                    console.log(e);
                });
        }
    };
}

核心需求：不让list.js和filter.js被压缩，只需将它们加入manifest.json，确保用户设备能正确更新，同时解决构建为空的问题。

解决方案 #

1. 解决构建为空的问题 #

构建后文件为空是因为Vite的tree-shaking机制剔除了未被引用的代码——你的articlesList函数仅被定义但未在任何地方被调用或导出。要避免这个情况，只需将函数挂载到全局对象或导出：
在list.js和filter.js的末尾添加：

// 将函数挂载到window，阻止tree-shaking
window.articlesList = articlesList;

或者使用ES模块导出：

export default articlesList;

2. 禁用指定文件的压缩 #

在Vite配置中通过build.rollupOptions精准控制指定文件不被压缩：
首先安装依赖：

npm install rollup-plugin-terser --save-dev

然后修改vite.config.js：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import terser from 'rollup-plugin-terser';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/sass/style.scss',
                'resources/js/app.js',
                'resources/js/clipboard.js',
                'resources/js/list.js',
                'resources/js/filter.js',
            ],
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            output: {
                plugins: [
                    terser({
                        // 排除list.js和filter.js不压缩
                        exclude: ['**/list.js', '**/filter.js']
                    })
                ]
            }
        }
    }
});

3. 确保文件加入manifest.json #

只要vite.config.js的input数组中包含list.js和filter.js，Laravel Vite插件就会自动将它们加入manifest.json。解决tree-shake问题后，构建完成就能在manifest.json中看到对应的条目。

内容的提问来源于stack exchange，提问作者Andrey Zagoruyko