我的 NextJS 项目具有以下 Webpack 配置：
import path from 'path';
import glob from 'glob';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import webpack from 'webpack';
import dotenv from 'dotenv';
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import withSass from '@zeit/next-sass';
dotenv.config();
module.exports = withSass({
distDir: '.build',
webpack: (config, { dev, isServer }) => {
if (isServer) {
return config;
}
config.plugins.push(
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
);
config.optimization.minimizer.push(
new OptimizeCSSAssetsPlugin({}),
);
return config;
},
});
这允许我在任何页面中导入任意数量的 scss 文件，并将它们全部捆绑在一起，缩小为单个文件，然后提供：
<link rel="stylesheet" href="/_next/static/css/styles.84a02761.chunk.css">
但是，<link>我更喜欢将样式定义内联到我的<head>标签中，而不是<style></style>。是否有可能不堆积大量第三方模块？
如果没有，是否有可能至少变化所产生<link>的rel对preload从stylesheet并添加插件as="style" crossorigin呢？
Next.js 现在可以自动内联关键 CSS
该功能是实验性的，并且处于旗帜后面，但我们很乐意听到您的反馈：
experimental: { optimizeCss: true }到 next.config.js就是这样！
参考：https ://twitter.com/hdjirdeh/status/1369709676271726599
我通过稍微调整pages/_document.jsx文件成功地内联了我的 CSS 。我扩展了NextJS 原生<Head>提供的组件，并将其添加到我的自定义文档标记中。这是我修改的部分表示：
import { readFileSync } from 'fs';
import { join } from 'path';
class InlineStylesHead extends Head {
getCssLinks() {
return this.__getInlineStyles();
}
__getInlineStyles() {
const { assetPrefix, files } = this.context._documentProps;
if (!files || files.length === 0) return null;
return files.filter(file => /\.css$/.test(file)).map(file => (
<style
key={file}
data-href={`${assetPrefix}/_next/${file}`}
dangerouslySetInnerHTML={{
__html: readFileSync(join(process.cwd(), '.build', file), 'utf-8'),
}}
/>
));
}
}
class MyDocument extends Document {
render() {
return (
<Html lang="en" dir="ltr">
<InlineStylesHead>
<meta name="theme-color" content="#ffcc66" />
</InlineStylesHead>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
我将此解决方案归功于https://github.com/zeit/next-plugins/issues/238#issuecomment-432211871。
| 归档时间： |
|
| 查看次数： |
9574 次 |
| 最近记录： |