performance - 基于语言环境的 Nuxt 构建速度极慢
问题描述
我有一个基于 Nuxt 的应用程序。埃斯林特也包括在内。当我需要重建应用程序时,大约需要 10 分钟。我不明白。有人告诉我我的笔记本电脑很慢。它的参数是i5、8G ram、500G SSD、Win10。我能做些什么来加快构建速度?
PS 是否可以禁用 EsLint 进行开发?
这是 nuxt.config.js
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "lurity",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content: "width=device-width, initial-scale=1",
},
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
},
server: {
port: process.env.PORT, // default: 3000
host: process.env.HOST, // default: localhost
},
modern: true,
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
"@mdi/font/css/materialdesignicons.css",
"@/assets/scss/bulma_styled.scss",
"@/assets/scss/lurity.scss",
],
router: {
middleware: "auth",
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
"~/plugins/helpers.js",
"~/plugins/apiCalls.js",
"~/plugins/vue-lazyload.client.js",
{ src: "~/plugins/vue-intersect.client.js", mode: "client" },
{ src: "~/plugins/gmaps.client.js", mode: "client" },
{ src: "~/plugins/google-auth.client.js", mode: "client" },
{ src: "~/plugins/google-tag-manager.client.js", mode: "client" },
{ src: "~/plugins/debounce.client.js", mode: "client" },
{ src: "~/plugins/braintree.client.js", mode: "client" },
{ src: "~/plugins/charts.client.js", mode: "client" },
{ src: "~/plugins/vuex-persist.client.js", mode: "client" },
{ src: "~plugins/leaflet.client.js", mode: "client" },
{ src: "~plugins/nuxt-client-init.client.js", mode: "client" },
"~/plugins/map-location.js",
"~/plugins/notify.js"
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/eslint
"@nuxtjs/eslint-module",
"@nuxtjs/composition-api/module",
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/buefy
"nuxt-buefy",
// https://go.nuxtjs.dev/axios
"@nuxtjs/axios",
"@nuxtjs/proxy",
[
"nuxt-i18n",
{
locales: [
{
code: "en",
iso: "en-GB",
file: "en_locale.js",
},
{
code: "sk",
iso: "sk-SK",
file: "sk_locale.js",
},
{
code: "cz",
iso: "cs-CZ",
file: "cs_locale.js",
},
],
defaultLocale: "en",
strategy: "no_prefix",
lazy: true,
vueI18n: {
silentTranslationWarn: true,
silentFallbackWarn: true,
},
langDir: "locales/",
// Enable browser language detection to automatically redirect user
// to their preferred language as they visit your app for the first time
// Set to false to disable
detectBrowserLanguage: {
// If enabled, a cookie is set once a user has been redirected to his
// preferred language to prevent subsequent redirections
// Set to false to redirect every time
useCookie: true,
// Cookie name
cookieKey: "i18n_redirected",
// Set to always redirect to value stored in the cookie, not just once
alwaysRedirect: false,
// If no locale for the browsers locale is a match, use this one as a fallback
fallbackLocale: "en",
},
},
],
],
buefy: { css: false, materialDesignIcons: false, defaultLocale: "sk-SK" },
proxy: {
// Simple proxy
"/api": {
target:
process.env.PROXY || (process.env.NODE_ENV === "production"
? "https://portal-api.lurity.com"
: "https://portaldev-api.lurity.com"),
},
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
proxy: true,
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: ["vuex-stores"],
loaders: {
scss: {
sourceMap: true,
implementation: require("sass"),
additionalData: `@import "~@/assets/scss/_bulma_variables.scss"; @import "~@/assets/scss/variables.scss";`,
},
},
},
};
解决方案
nuxt.config.js
就配置( )而言,这里并没有什么真正令人震惊的地方。
所以我想这取决于你构建时机器上运行的内容。另外,我不确定在 Windows 中构建是否较慢,但这也可能是一个原因。
您可能可以询问朋友或将 github 链接分享给具有更强大硬件配置的人来诊断构建速度。
我确实在我的装备中运行以下内容:
- 最新的 LTS ubuntu (
20.04
) - 2x 32GB DDR4 4000MHz 三叉戟 Z 皇家 CAS 18
- 锐龙 R9 5950x @stock
- 2TB 三星 Pro NVME
根据我的经验,主要帮助的是大量 RAM(数量)+ 速度以适应您的 CPU。然后,这一切都归结为 Webpack 设置或其他与 IMO 相关的构建工具设置。
最后,没有准确的数字,这个问题有点难以回答。
另一件事,可能是查看实际构建并尝试用自己的眼睛找出慢的地方,它会缩小你的问题 IMO。
推荐阅读
- javascript - 如何使用函数 reverseArray 反转数组
- python - 值错误:对已关闭文件的 I/O 操作
- javascript - 升级 .then .catch 到 async await 并尝试 catch
- swift - 资产目录中的图像名称未显示在自动完成中 - xcode 12
- sql - Redshift,十进制值的转换不四舍五入
- python - 在数据科学中,使用 x X 有什么区别?
- laravel - Laravel+VUE:如何在同一个刀片中显示 2 个不同的 div 和 2 个不同的按钮
- android - 当我尝试将数据作为按钮传递时,没有出现任何按钮?
- macos - 为什么 brew cleanup 或 brew cleanup -n 不显示任何输出?
- javascript - 如何在Typescript中遍历具有数组和对象的大型数组列表