Reactjs 缩小/优化NextJS站点
我有一个nextjs网站 我的common.js和custom.scs不会被next缩小 我在next.config.js中尝试了下一个:Reactjs 缩小/优化NextJS站点,reactjs,webpack,babeljs,next.js,Reactjs,Webpack,Babeljs,Next.js,我有一个nextjs网站 我的common.js和custom.scs不会被next缩小 我在next.config.js中尝试了下一个: const withSass = require('@zeit/next-sass') const withOptimizedImages = require('next-optimized-images'); const withTypescript = require('@zeit/next-typescript') module.exports = w
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()))
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;
}
});
我的宝贝
{
"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"
}
}
它应该可以工作,或者我必须实现更多的功能?缩小版仅在
生产模式下创建,因为缩小代码需要时间
为了缩小生产模式,在运行下一次构建时,应将节点环境设置为生产
您可以通过将npm构建脚本更改为:NODE\u ENV=production next build
my 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()))
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;
}
});
我的脚本就是这样。npm run build
的输出没有缩小的js文件?“build”:“NODE_ENV=production next build”,“start”:“NODE_ENV=production NODE server.js”,并缩小一点,但例如,不要像我说的那样删除注释,sass不是缩小的什么是minify
babel插件?你不需要它,nextjs和Treser一起工作,