时间戳

首页 > 解决方案 > laravel 混合编译资产巨大

laravel-mix - laravel 混合编译资产巨大

问题描述

尝试通过运行编译 laravel-mix 时

纱线运行产品

我得到这样的输出：

  Asset          Size         Chunks                    Chunk Names
   /css/app.css  21.1 KiB       0  [emitted]             /js/app
   /js/app.js    606 KiB        0  [emitted]  [big]      /js/app
   Done in 97.93s.

我的 laravel 混合配置如下：

mix.js('resources/assets/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
         require('tailwindcss')(),
]).purgeCss();

Css 编译后的大小很棒，但是 js 实在是太大了。似乎所有的 devDependencies 也都被编译了。此外，当使用 bundlephobia 之类的工具时，看起来我的编译 js 文件应该更小： 在此处输入图像描述

我的开发依赖项是：

"devDependencies": {
    "@linusborg/vue-simple-portal": "^0.1.4",
    "axios": "^0.19.0",
    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^5.1",
    "laravel-mix": "^4.0.7",
    "laravel-mix-purgecss": "^6.0.0",
    "postcss": "^8.2.14",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.22.12",
    "sass-loader": "^7.3.1",
    "vue-reactive-provide": "^0.3.0",
    "vue-template-compiler": "^2.6.10"
},

所以在 bundlephobia 上预期编译的 js 文件是 392kb，而我的构建是 606KiB？为什么会出现这种差异？可以做些什么来减少我的编译文件大小？

标签： laravel-mix

解决方案

推荐阅读