Минимизировать/оптимизировать сайт NextJS
У меня есть сайт nextjs.
Мой common.js и мой custom.scss не минифицируются следующим.
Я попробовал следующий в next.config.js:
const withSass = require('@zeit/next-sass')
const withOptimizedImages = require('next-optimized-images');
const withTypescript = require('@zeit/next-typescript')
module.exports = withSass({minified:true},withOptimizedImages(withTypescript()))
Мой .babelrc
{
"presets": [
"next/babel",
"@zeit/next-typescript/babel",
"minify"
]
}
Мой tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"jsx": "preserve",
"lib": [
"dom",
"es2017"
],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true,
"removeComments": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"target": "esnext"
}
}
Это должно работать или мне нужно реализовать что-то еще?
Ответы 2
Минифицированная версия создается только в режиме production, так как на минимизацию кода требуется время.
Чтобы минимизировать производственный режим, вы должны установить NODE_ENV на производство при запуске next build.
Вы можете сделать это, изменив скрипт сборки npm на: NODE_ENV=production next build.
В выводе npm run build нет минифицированных файлов js?
"build": "NODE_ENV=production next build", "start": "NODE_ENV=production node server.js", и немного уменьшите, но, например, не удаляйте комментарии, как я сказал
И sass не минифицирован
что такое плагин minify babel? вам это не нужно, nextjs работает с Treser, github.com/webpack-contrib/terser-webpack-плагин
ставлю на пробу
Например, sass, почему бы не оптимизировать¿
Я только что проверил это в своем новом проекте, и вы правы, sass не минифицируется, я проверяю причину этого, похоже на неправильную конфигурацию или что-то в этом роде.
Похоже, nextjs добавил эту возможность в плагин withCss (который использует withSass), но он еще не опубликован (с ноября 2018 года). github.com/zeit/next-plugins/commit/…
Ветчина? они должны выпустить новую версию withCss, и вы получите ее бесплатно. Вы можете подписаться здесь: спектр.чат/?t=8d5458ee-39e3-4706-a666-6c471e9fc7f8
Я не уверен, что ты сейчас спрашиваешь :]
мой следующий.config.js:
const withCSS = require("@zeit/next-css");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports =
withCSS({
webpack(config, options) {
config.optimization.minimizer = [];
config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
return config;
}
});
Первая загрузка JS, общая для всех, была 317 КБ, но после того, как я попробовал этот подход, первая загрузка JS, общая для всех, подскочила до 617 КБ, может ли кто-нибудь помочь понять, почему произошел внезапный всплеск первой загрузки JS, общий для всех?
Мой сценарий таков.