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.
I'm new to react-native. I want to implement webpack for my project. Can anyone suggest a sample webpack config file for react-native
Here's one:
global.__PLATFORM__ = process.env.RN_PLATFORM || 'ios';
module.exports = {
context: __dirname,
entry: {
index: [
'react-native-webpack/clients/polyfills.js',
`./index.${__PLATFORM__}.js`,
],
},
output: {
path: assetsPath,
filename: `[name].${__PLATFORM__}.bundle`,
chunkFilename: '[name].chunk.js',
publicPath: '/',
},
devServer: {
port: 8081,
quiet: false,
noInfo: true,
lazy: true,
filename: `[name].${__PLATFORM__}.bundle`,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
},
publicPath: '/',
stats: { colors: true },
},
};
Note that a Webpack config is not the only thing you'll need. This guide goes deeper and gives examples and explanations for the next steps:
Babel config
Module support
Assets require support
I'd like to generate sourcemaps for jsx files that are transpiled with babelify and browserify. It seems that some sourcemaps are being generated as a base64 encoded comment at the bottom of my output file, but stacktraces do not honor them.
My grunt task looks like the following:
browserify: {
options: {
browserifyOptions: {
debug: true
},
debug: true,
transform: ['babelify']
},
app: {
src: 'src/app.jsx',
dest: 'dist/app.js'
}
},
This works for me:
browserify: {
dev: {
options: {
browserifyOptions: {
debug: true
},
transform: [["babelify"]]
},
files: {
"dist/bundle.js": "src/index.js"
}
}
},
Going to need to use grunt-exorcise to extract the map from the bundle.
Browserify recommends it
browserify: {
options: {
browserifyOptions: {
debug: true
},
debug: true,
transform: ['babelify']
},
app: {
src: 'src/app.jsx',
dest: 'dist/app.js'
}
},
exorcise: {
app: {
options: {},
files: {
'dist/app.js.map':['dist/app.js'],
}
}
},
I am trying to automate uploading files to an S3 bucket by using: https://github.com/jpillora/grunt-aws#the-s3-task
My Gruntfile.js "compiles" correctly, but when executed it simply hangs when it gets to the S3 portion -- without errors.
The following is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
aws: grunt.file.readJSON('aws.json'),
concat: {
options: {
separator: '\n',
stripBanners: {
block: true
}
},
scripts: {
src: [
'scripts/bootstrap.js',
'scripts/bootstrap-select.js',
'scripts/bootbox.js',
'scripts/app.js',
'scripts/jquery.validate.js',
'scripts/additional-methods.js',
'scripts/captcha.js',
'scripts/mail.js',
'scripts/render.js'
],
dest: 'scripts/bundle.js'
},
style: {
src: [
'style/jquery-ui.css',
'style/bootstrap.css',
'style/bootstrap-select.css',
'style/en-us.css'
],
dest: 'style/bundle.css'
}
},
uglify: {
options: {
banner: '/*! <%= grunt.template.today("dd-mm-yyyy") %> */\n',
mangle: {
except: ['jQuery']
}
},
scripts: {
files: {
'scripts/bundle.min.js': 'scripts/bundle.js'
}
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'style',
src: ['bundle.css'],
dest: 'style',
ext: '.min.css'
}]
}
},
s3: {
options: {
accessKeyId: '<%= aws.key %>',
secretAccessKey: '<%= aws.secret %>',
bucket: '<%= aws.bucket %>',
region: '<%= aws.region %>',
access: 'public-read'
},
upload: {
headers: {
CacheControl: 604800,
Expires: new Date(Date.now() + 604800000).toUTCString()
},
cwd: "/",
src: "**"
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-aws');
grunt.registerTask('default', ['concat', 'uglify', 'cssmin', 's3']);
};
The associated output of sudo grunt s3 -v --force is as follows:
Loading "cloudfront.js" tasks...OK
+ cloudfront Loading "route53.js" tasks...OK
+ route53 Loading "s3.js" tasks...OK
+ s3 Loading "aws.js" tasks...OK
No tasks were registered or unregistered. Loading "cache-mgr.js" tasks...OK
No tasks were registered or unregistered. Loading "Gruntfile.js" tasks...OK
+ default
Running tasks: s3
Running "s3" task
Running "s3:upload" (s3) task Verifying property s3.upload exists in
config...OK
At that point, it hangs...
Any ideas?
The issue was with this line: cwd: "/"
It should have been cwd: "."
I have a LESS file (test.less) with the following class:
.bad_class {
color: #fff
}
I linting and compiling my files with the grunt-recess plugin.
My Grunt options for recess are:
recess: {
options: {
noUnderscores: true
},
test: {
files: {
'assets/css/test.css': [
'assets/less/test.less'
]
}
}
}
When I run recess, it doesn't fail.
I tried without setting the noUnderscores option at all - didn't work.
I even tried setting noUnderscores: false, but that didn't work.
What's am I doing wrong?
Try this
recess: {
build: {
src: [ 'assets/less/test.less' ],
dest: 'assets/css/test.css',
options: {
compile: true,
compress: true,
noUnderscores: false,
noIDs: false,
zeroUnits: false
}
}
}
If above is not working try the below code
recess: {
build: {
src: [ 'assets/less/test.less' ],
dest: 'assets/css/test.css',
options: {
compress: false,
noUnderscores: false,
noIDs: false,
zeroUnits: false
}
},
compliefile:{
src: [ 'assets/less/test.less' ],
dest: 'assets/css/test.css',
options: {
compile: true
}
}
}