webpack 是什么让Yarn安可开发需要这么长时间来构建？Symfony 4.4

hc8w905p  于 2022-12-23  发布在  Webpack
关注(0)|答案(1)|浏览(137)

以下所有详细信息的摘要（包括编辑）

Encore编译需要很长时间，网页加载也需要很长时间。它们按预期工作的可能性非常小，非常随机。主要问题是.addEntry()，app.js和css工作正常，但所有其他JS都不行。确切的问题是什么或如何修复还不清楚。目前假设是版本更新的问题。但我不知道可能是什么包。

详细信息

从上周开始，我的Encore需要很长的时间来构建。每当我使用yarn encore dev或yarn encore dev --watch时，它90%的时间运行得很慢。另外10%的时间它构建得很快。当查看我的页面时，另外90%的时间它加载所有文件，除了一个（有时两个）JS文件。加载需要1到2.5分钟。

  • 我正在使用Yarnv1.22.5。
  • 交响乐4.4
  • windows 10
  • Visual Studio代码v1.70.2
  • 从VSC未聚焦时自动保存文件
  • VSC在其命令提示符（终端）下运行命令

composer 。锁定安可版本：

"name": "symfony/webpack-encore-bundle",
"version": "v1.11.1",

yarn.lock:

"@symfony/webpack-encore@^1.0.0":
version "1.1.2"

看起来webpack-encore是一个旧版本（最新的是3.1.0）。不确定我是否可以升级，但我看不出有必要。我不确定，但这应该意味着有没有更新安可对我来说很长一段时间，对不对？因为1.1.2是最新的版本，在那之后是2.0.0，它不需要，因为^在^1.0.0。
package.json:

{
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.3",
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/webpack-encore": "^1.0.0",
        "core-js": "^3.0.0",
        "file-loader": "6.0.0",
        "regenerator-runtime": "^0.13.2",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {}
}

Webpack.config.js:

const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    .copyFiles({
        from: './assets/images',

        // optional target path, relative to the output dir
        //to: 'images/[path][name].[ext]',

        // if versioning is enabled, add the file hash too
        to: 'images/[path][name].[hash:8].[ext]',

        // only copy files matching this pattern
        //pattern: /\.(png|jpg|jpeg)$/
    })

    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    .addEntry('navbar_js', './assets/js/navbar.js')
    .addEntry('translate_months_js', './assets/js/translate_months.js')
    .addEntry('account_management_js', './assets/js/account_management.js')
    .addEntry('account_management_cu_js', './assets/js/account_management_cu.js')
    .addEntry('closed_days_js', './assets/js/closed_days.js')
    .addEntry('check_weeks_js', './assets/js/check_weeks.js')
    .addEntry('time_registration_js', './assets/js/time_registration.js')
    .addEntry('time_registration_day_js', './assets/js/time_registration_day.js')
    .addEntry('time_registration_add_hours_js', './assets/js/time_registration_add_hours.js')
    .addEntry('time_registration_clock_in_js', './assets/js/time_registration_clock_in.js')
    .addEntry('annual_review_js', './assets/js/annual_review.js')
    .addEntry('users_overview_hours_js', './assets/js/users_overview_hours.js')
    .addEntry('add_absent_js', './assets/js/add_absent.js')
    .addEntry('user_profile_basis_js', './assets/js/user_profile_basis.js')
    .addEntry('automatic_clocking_js', './assets/js/automatic_clocking.js')
    .addEntry('previous_holiday_hours_js', './assets/js/previous_holiday_hours.js')
    .addEntry('corrections_js', './assets/js/corrections.js')
    .addEntry('system_absent_js', './assets/js/system_absent.js')
    .addEntry('system_absent_cu_js', './assets/js/system_absent_cu.js')
    .addEntry('access_to_settings_js', './assets/js/access_to_settings.js')
    .addStyleEntry('table', './assets/styles/table.css')
    .addStyleEntry('navbar', './assets/styles/navbar.css')
    .addStyleEntry('modal', './assets/styles/modal.css')
    .addStyleEntry('create', './assets/styles/create.css')
    .addStyleEntry('register_css', './assets/styles/register.css')
    .addStyleEntry('user_profile_basis_css', './assets/styles/user_profile_basis.css')
    .addStyleEntry('annual_review_css', './assets/styles/annual_review.css')
    .addStyleEntry('users_overview_hours_css', './assets/styles/users_overview_hours.css')
    .addStyleEntry('time_registration_css', './assets/styles/time_registration.css')
    .addStyleEntry('time_registration_add_hours_css', './assets/styles/time_registration_add_hours.css')
    .addStyleEntry('previous_holiday_hours_css', './assets/styles/previous_holiday_hours.css')
    .addStyleEntry('corrections_css', './assets/styles/corrections.css')
    .addStyleEntry('system_management_css', './assets/styles/system_management.css')

    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you use React
    //.enableReactPreset()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

运行yarn encore dev --watch时的消息：

MY_PROJECT>yarn encore dev --watch
yarn run v1.22.5
$ MY_PROJECT\node_modules\.bin\encore dev --watch
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Running webpack ...

 DONE  Compiled successfully in 106373ms                                                                                                                                                          15:14:50
 I  74 files written to public\build
webpack compiled successfully
Notifications are disabled
Reason: DisabledForApplication Please make sure that the app id is set correctly.
Command Line: MY_PROJECT\node_modules\node-notifier\vendor\snoreToast\snoretoast-x64.exe -pipeName \\.\pipe\notifierPipe-a79e1c68-6b11-4441-9c50-cff84d27e9c0 -p MY_PROJECT\node_modules\webpack-notifier\logo.png -m "Build successful" -t "Webpack Encore"
 DONE  Compiled successfully in 168ms                                                                                                                                                             15:14:51
 I  74 files written to public\build
webpack compiled successfully

我试过运行npx browserslist@latest --update-db，但它在执行后一直问同样的问题。我还试过删除我的构建文件。**这至少花了5分钟删除，**而它只有5MB它必须删除。我试过删除一个10MB的文件，它被永久删除，所以它不应该是我的电脑。我删除文件后，Yarn安可以正常的速度运行。但是第二次我运行安可又花了很长时间。
我也尝试过清除php bin/console cache:clear的缓存（包括dev和prod），但没有成功。我也尝试过清除本地浏览器缓存，并梳理它的缓存。每次我这样做，第一次运行安可，它构建正常。但第二次它就坏了。
这让我想到安可在运行时覆盖/删除文件有一些问题。
当使用encore dev --watch时，加载任何网页都需要很长时间。基本文件可以加载，但一些名为vendor-node-...-custom_js_file_linked_in_webpack的JS文件（可能是随机的）需要1到2.5分钟才能加载。只需使用encore dev就可以正常加载页面。
我也试过在symfony服务器不活动的情况下运行encore，但没有什么区别。
我该怎么补救呢？

    • 编辑1，我尝试过的一些额外的事情：**
  • 运行symfony服务器和Yarn安可在一个单独的命令控制台。测试都在vsc和只是普通的windows命令。没有成功或任何差异。
  • 在最新版本的开发分支的单独文件夹中克隆了我的repo。出现了完全相同的问题。
  • 已尝试不使用symfony server:start，而是使用php -S localhost:8000。相同问题仍然存在。
  • 尝试运行旧分支（2个月），但出现了相同的问题。

我已经到了yarn encore dev和--watch在大多数时候都运行得很快的地步，但是当加载实际页面时，它会加载除了1个（有时是2个）JS文件之外的所有文件：vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_internals_str-95febb.js。此外，该页面正在加载此JS文件的加载圆圈（在 chrome 标签左上方）是蓝色的，而不是灰色。这表明它是我的电脑运行的最后一位，而不是服务器发送的东西给我。当这个圆圈是蓝色的，基本上我在这台笔记本电脑上做的一切都是非常缓慢的。其他网站不会加载，有一次我甚至不能打开任务管理器...
它感觉真的很随机，当安可工程。它的大约90/100倍不工作。要么建设过程需要数年或加载我的页面。

    • 编辑2：**

到目前为止，我发现是.addEntry()造成了伤害。除了app.js，它是可加载的。我的任何自定义JS在大多数情况下都不会加载，而没有17 - 190s的延迟。我可以加载所有的css文件（addStyleEntry）。在app.js中，Fontawesome加载也很好。
没有. addEntry（）的平均加载时间是3秒。网页本身的加载速度也很快。

webpack

1条答案

按热度按时间
0lvr5msh

0lvr5msh1#

更新我的软件包并转移到Symfony 5. 4（而不是4. 4）解决了这个问题。我不确定到底是什么软件包或东西破坏了我的webpack。

赞(0）分享  回复(0）举报  2022-12-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com