how to make a compressed js files with all pages in nuxt js - vue.js

I am running a nuxt js application built with adonuxt. The app works just fine. But I see all pages are loading one by one and make the site a bit slow for the initial load. The site's interactivity doesn't work until all js chunk is not loaded.
So how can I make a one js file with all the pages.
Also I don't want to load the admin pages in the website. How can I separate this.
My nuxt config is like this..
'use strict'
const resolve = require('path').resolve
module.exports = {
/*
** Headers of the page
*/
env: {
baseUrl: 'https://savingfamilybazar.com/'
},
build: {
vendor:[ 'vue-product-zoomer']
},
modules: [
'#nuxtjs/axios',
],
axios: {
},
plugins: [
'~plugins/vuetify',
'~plugins/element',
{src: '~plugins/zoom', ssr: false}
],
head: {
title: 'my site',
meta: [
{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1.0'
},
{
hid: 'description',
name: 'description',
content: 'site.....'
},
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico',
},
],
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js' },
{ src: 'https://unpkg.com/#adonisjs/websocket-client' },
],
},
/*
** Global CSS
*/
css: [
//'~assets/css/main.css',
],
/*
** Customize the progress-bar color
*/
loading: { color: '#ffd451',height:'3px' },
/*
** Point to resources
*/
srcDir: resolve(__dirname, '..', 'resources')
}
Currently it loads like this

Well, code splitting the pages should make your page faster. Because each route loads only the files it needs.
So if you have all the pages in one bundle it will be even slower. Because you need to load everything on the initial load.
You should check if your hoster supports HTTP2. This should boost the speed.
However, if you want to disable the automatic code-splitting in routes you have to edit the config.
build: {
optimization: {
splitChunks: {
chunks: 'async',
}
},
splitChunks: {
pages: false,
vendor: false,
commons: false,
runtime: false,
layouts: false
},
}
https://nuxtjs.org/api/configuration-build#splitchunks
https://github.com/nuxt/nuxt.js/pull/3060

Related

Docusaurus: Getting Error: Cannot mix different versions of joi schemas

When I do a npm run start I get the following:
npm run start
> my-website#0.0.0 start
> docusaurus start
[INFO] Starting the development server...
[ERROR] Error: Cannot mix different versions of joi schemas
at new module.exports (/Users/russurquhart_boomi/node_modules/#hapi/hoek/lib/error.js:23:19)
at module.exports (/Users/russurquhart_boomi/node_modules/#hapi/hoek/lib/assert.js:21:11)
at Object.exports.isSchema (/Users/russurquhart_boomi/node_modules/joi/lib/common.js:132:5)
at Object.internals.schema (/Users/russurquhart_boomi/node_modules/joi/lib/compile.js:66:16)
at Object.exports.schema (/Users/russurquhart_boomi/node_modules/joi/lib/compile.js:17:26)
at internals.Base.$_compile (/Users/russurquhart_boomi/node_modules/joi/lib/base.js:646:24)
at /Users/russurquhart_boomi/node_modules/joi/lib/types/keys.js:260:92
at Object.exports.tryWithPath (/Users/russurquhart_boomi/node_modules/joi/lib/common.js:176:16)
at internals.Base.method [as keys] (/Users/russurquhart_boomi/node_modules/joi/lib/types/keys.js:260:32)
at internals.Base.method [as append] (/Users/russurquhart_boomi/node_modules/joi/lib/types/keys.js:189:29)
[INFO] Docusaurus version: 2.1.0
Node version: v16.17.0
Here is my docusaurus.config.js file:
// #ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** #type {import('#docusaurus/types').Config} */
const config = {
title: 'Boomi Docusaurus POC',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: 'facebook', // Usually your GitHub org/user name.
projectName: 'docusaurus', // Usually your repo name.
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: 'en',
locales: ['en'],
},
presets: [
[
'classic',
/** #type {import('#docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
],
themeConfig:
/** #type {import('#docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
title: 'Boomi Atmosphere',
logo: {
alt: 'Boomi Doc Site',
src: 'img/logo.svg',
},
items: [
{
type: 'doc',
docId: 'intro',
position: 'left',
label: 'Tutorial',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Atmosphere Documentation',
to: '/docs/intro',
},
],
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
},
{
label: 'Twitter',
href: 'https://twitter.com/docusaurus',
},
],
},
{
title: 'More',
items: [
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Docusaurus POC - Built with Docusaurus.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
themes: [
[
"#easyops-cn/docusaurus-search-local",
/** #type {import("#easyops-cn/docusaurus-search-local").PluginOptions} */
({
hashed: true,
language: ["en", "zh"],
highlightSearchTermsOnTargetPage: true,
explicitSearchResultPath: true,
}),
],
],
};
module.exports = config;
I got the errors after I added the docusearch-search-local plugin.
Any help is greatly appreciated!
Thanks,
Russ
I solved the issue, I had NOT installed the docusaurus-search-local item in the directory with my docusaurus files, instead I had installed it in ~/. Once I deleted it from this location, and then put it into the correct location, no problems!

why nuxt app is to slow in phon, vuetify ,how can I increment performance on phone

hi I have nuxt app it work good and fast in pc but in phone is to slow I use vuetify in my app And I'm suspicious of this :) (The reason for the slowness of app is vuetify)
It seems to involve RAM and CPU, and because the phone is weaker, it slows down drastically.
how can I increment performance on phone .
for example it load 1s in pc but in phone it load 4s
and if it load 5s in pc in phone load 14s
is is my nuxt.config
export default {
ssr: false,
loadingIndicator: '~/static/html/loading.html',
head: {
titleTemplate: '%s | ****',
title: '****',
htmlAttrs: {
lang: 'fa',
},
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' }],
},
css: [
'#/static/fonts/Ter/css/style.css',
'#/static/css/main.css',
'#/static/fonts/fontawesome/css/all.css',
],
plugins: [
{
src: '#/plugins/drag.js',
ssr: false,
},
{
src: '#/plugins/ft.js',
ssr: false,
},
{
src: '#/plugins/particles',
ssr: false,
},
{
src: '#/plugins/axios.js',
ssr: false,
},
{
src: '#/plugins/lang.js',
},
{
src: '#/plugins/vuetify.js',
},
{
src: '#/plugins/Analytics.js',
ssr: true,
},
{
src: '#/plugins/Carousel3d.js',
ssr: true,
},
{
src: '#/plugins/EventBus.js',
},
],
components: true,
modules: [
'#nuxtjs/axios',
'#nuxtjs/auth',
'#nuxtjs/sitemap',
'#nuxtjs/robots',
'nuxt-i18n',
],
i18n: {
defaultLocale: 'fa',
lazy: true,
langDir: '~/langs',
locales: [
{ code: 'en', name: 'english', iso: 'en-US', file: 'en.js', dir: 'ltr' },
{ code: 'fa', name: 'پارسی', iso: 'fa-IR', file: 'fa.js', dir: 'rtl' },
{ code: 'ar', name: 'العربی', iso: 'ar-QA', file: 'ar.js', dir: 'rtl' },
],
},
robots: {
UserAgent: '*',
Disallow: '/dashboard',
},
sitemap: {
hostname: 'https://****/',
exclude: ['/forget-password'],
},
axios: {
// baseURL: 'https://****/api/',
// baseURL: 'https://****/api/',
baseURL: 'http://****/api/',
headers: {
common: {
customer: 'true',
},
},
},
env: {
baseURL: 'http://****/',
selfURL: 'https://****/',
cookieURL: 'localhost',
},
build: {
html: {
minify: {
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true,
minifyURLs: true,
removeComments: true,
removeEmptyElements: true,
},
},
},
auth: {
strategies: {
local: {
endpoints: {
login: {
url: 'link/verification',
method: 'post',
propertyName: 'access_token',
},
user: false,
},
token: {
maxAge: 60 * 60,
},
autoFetchUser: false,
},
},
},
}
This kind of question cannot be answered easily with just that. Improving performance can take a lot of analysis, can come from various places and is a broad topic.
Here is two of my answers on this subject (still relevant in your case):
How to increase speed performance in Nuxt with SSR
How to improve the LCP score of my Nuxt site?
Few things we can note on your nuxt.config.js:
using ssr: false is basically fallback'ing to a pure SPA behavior, so the initial loading time may be quite slow (as always, it depends also on how you measure it)
loading global CSS (css key) can be a penalty too
all of the plugins you're loading are adding to the bundle-size (and hence, increase the loading time), maybe think to load some of them locally
ssr: false is legacy, please use mode: 'client'
also, checking for some smaller alternatives may be interesting too (are tho 37kB of JS worth it?)
Other than this, there is also your overall code, some middleware, some 3rd party like Google analytics, the list goes on and on.
But I think you have a decent starting point with this.

Nuxt.js internal server error when navigating from direct link

enter code here
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'myApp',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['~/assets/css/transition.css'],
pageTransition: "fade",
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{src:'~/plugins/axios'},
{ src: '~/plugins/vue-fbauth.js', ssr: false },
{ src: '~/plugins/vue-google', ssr: false },
{ src: "~/plugins/vue2-editor", ssr: false },
{ src: "~/plugins/slider", ssr: false },
{ src: "~/plugins/star-rating", ssr: false },
{ src: "~/plugins/mask", ssr: false },
{ src: "~/plugins/imageUpload", ssr: false },
{ src: "~/plugins/fileUpload", ssr: false },
{ src: "~/plugins/rangeSlider", ssr: false }
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
['#nuxtjs/google-analytics', {
id: 'UA-198003695-1'
}]
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
'#nuxtjs/axios',
'#nuxtjs/auth-next', ['nuxt-lazy-load', {
defaultImage: '/spin2.gif'
}],
'nuxt-moment',
'#nuxt/http'
],
axios: {
baseURL: 'https://example.com/api/book.', // Used as fallback if no runtime config is provided
},
loading: {
color: '#F48245',
height: '4px'
},
target: 'server',
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
router: { middleware: ['checkUserAuth'] },
}
//htaccess
RewriteEngine on
RewriteCond %{HTTP_HOST} ^my-domain.com.br$
RewriteRule "(.*.(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.*) "http://127.0.0.1:3000/$2" [P,L]
I have some problems when I use nuxt.js with SSR, my web application works perfect in development mode, but in production mode, I have some unexpected errors, Errors occur when pages are linked directly, for SSR I am using Nuxt with asyncData and I get the following kind of error.
My application runs to domain https://www.example.com/ and Backend API is https://www.api.example.com/api/book. What is happening, where is the problem.
I have two questions
Could the reason be the difference between the domains?
How can I avoid page crashes on Internal server error if I am using nuxt Axios module?

404 errors in Nuxt Production environment

My app works perfectly in dev mode, however I'm facing issues in the production environment.
My Folder Structure is like this pages > widget > _id.vue
For testing I just put a h1 tag in _id.vue file, when I run enter the url - https://app.mydomain.com/widget/xyz I get 404 errors on all files.
https://app.mydomain.com/widget/hhhhh 404
https://app.mydomain.com/_nuxt/dist/bf9e34c.js net::ERR_ABORTED 404
https://app.mydomain.com/_nuxt/dist/eb32a87.js net::ERR_ABORTED 404
https://app.mydomain.com/_nuxt/dist/cc2d21b.js net::ERR_ABORTED 404
Here is my apps nuxt.config.js file code, unable to figure out what's the issue here:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
server: {
port: 8000 // default: 3000
},
target: 'server',
head: {
title: 'Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'my website description'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ href: '../assets/styles/style.css' }, { href: '../assets/styles/videoform.css' }, { href: '../assets/styles/tailwind-responsive.css' }, { href: '../assets/styles/tailwind-components.css' }
],
script: [
{ src: 'https://js.stripe.com/v2/' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
// <style>
// #import '../../assets/styles/style.css';
// #import '../../assets/styles/videoform.css';
// #import '../../assets/styles/tailwind-responsive.css';
// #import '../../assets/styles/tailwind-components.css';
// </style>
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// 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/tailwindcss
'#nuxtjs/tailwindcss',
'#nuxtjs/composition-api'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'#nuxtjs/axios',
],
axios: {
// proxy: true
},
// Build Configuration: https://go.nuxtjs.dev/config-build
buildDir: '_nuxt',
build: {
publicPath: '_nuxt/dist/'
}
}
When requesting those script files, nuxt uses the build.publicPath to find them. Your buildDir path tells nuxt to save the build files in _nuxt, while your build.publicPath tells nuxt that those files are located in _nuxt/dist. That's why you get a 404.
You can change the build.publicPath to match the buildDir to fix this. Or change the buildDir instead.
Nuxt Docs
Finally I figured out the problem, it was due to nginx configuration.
There was a trailing slash for the reverse proxy http://localhost:8000/
I had to remove that to fix the issue - http://localhost:8000

How to add external js file in Nuxt?

I have js file called script.js in assets/js. Tried to include in nuxt.config.js like below:
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{ src: '/assets/js/script.js', ssr: false }
]
}
But getting 'GET http://127.0.0.1:3000/assets/js/script.js 404 (OK)'.
Simply keep your script.js file into static folder, because static folder treat as root folder.
and add the path into nuxt.config.js configuration file like below
script: [
{ src: '/script.js'}
]
here is the best way that worked for me
put your script.js file in plugins folder and then go and include it in nuxt.config.js
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
'#/plugins/script.js'
],
remember that # in nuxt.js or vue.js means root folder
In this method, your js files must be in the path static folder
and add this code to you *.vue files you want to use
export default {
head() {
return {
link: [
{
rel: "stylesheet",
href:
"/assets/css/bootstrap.css"
},
],
script: [
{
src: "assets/js/bootstrap.js",
body: true
},
],
}
}