默认情况下，CSS 被打包到 JavaScript 中webpack 引入css文件，这在生产中存在一些问题，例如导致页面闪烁。由于浏览器在加载 JS 之前不会加载样式，因此现有 HTML 只能使用浏览器的默认样式。
我们需要将 CSS 导入到一个单独的文件中。使用 mini-css-extract-plugin 插件，我们可以将 CSS 导入到一个单独的 cssbundle 中。mini-css-extract-plugin 插件还可以将多个 CSS 文件合并为一个 CSS 文件。出于这个原因，mini-css-extract-plugin 实际上有一个加载器来处理导入过程，然后通过插件将导入的内容保存为 CSS 文件。
mini-css-extract-plugin
安装 mini-css-extract-plugin 插件：
npm add mini-css-extract-plugin --develop
mini-css-extract-plugin 包含有一个 loader MiniCssExtractPlugin.loader，这个 loader 负责将最终 css 内容导出，然后插件基于导出的内容处理，最终生成 css 文件。
webpack.parts.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
exports.extractCSS = ({ options = {}, loaders = [] } = {}) => {
return {
module: {
rules: [
{
test: /.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options },
"css-loader",
].concat(loaders),
sideEffects: true, // 如果构建结果作为一个 npm 包使用时建设设置
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
};
};
[name] 占位符使用了导入 css 文件的那个 entry 的名字，如果需要将 css 生成到目录，则可以将路径也放到 filename 配置项里，比如 filename: "styles/[name].css"。
更新 webpack.config.js
const commonConfig = merge([
...
// parts.loadCSS(),
parts.extractCSS(),
]);
执行 npm run build，输出结果如下：
? webpack: Build Finished
? webpack: asset index.html 229 bytes [compared for emit]
asset main.js 136 bytes [compared for emit] [minimized] (name: main)
asset main.css 33 bytes [compared for emit] (name: main)
Entrypoint main 169 bytes = main.css 33 bytes main.js 136 bytes
orphan modules 199 bytes [orphan] 2 modules
code generated modules 298 bytes (javascript) 32 bytes (css/mini-extract) [code generated]
./src/index.js + 2 modules 298 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./src/main.css 32 bytes [code generated]
webpack 5.11.1 compiled successfully in 572 ms
CSS被打包到一个单独的文件中，以防止恐慌问题。
默认情况下，我们需要在应用程序条目中引入 CSS 文件webpack 引入css文件，换句话说，我们需要在 JS 文件中引入 CSS。如果你不想在JS文件中引用CSS，你可以通过webpackentry和glob加载CSS。示例如下：
const glob = require("glob");
const commonConfig = merge([
{
entry: { style: glob.sync("./src/**/*.css") }, // 需要手动保证 css 的顺序
},
]);
总结
通过使用 MiniCssExtractPlugin 插件，可以解决干扰问题，优化浏览器资源加载性能。
如果你不想在 JavaScript 中引入 CSS 文件，你可以通过 webpackentry 加载 CSS，特别注意 CSS 引用顺序。
在后端构建和编译代码时，压缩代码也非常重要。 压缩后的代码体积增大，传输速率快，从而提高网页的加速速度，减少网络传输流量。 另外，它还具有混淆源代码的功能，因为压缩后的代码可读性很差，即使别人下载了网页的代码，也大大降低了代码分析和重构的难度。
压缩JS
目前最成熟的JavaScript代码压缩工具是UglifyJS，它可以分析JavaScript代码句子树并理解代码的含义，因此可以进行诸如去除无效代码、去除日志输出代码、缩短变量名等优化。
在 webpackv4 中，uglifyjs-webpack-plugin 默认以生产模式集成。 因此，默认打包的JS文件是经过压缩的。 如果需要更多自定义，还可以配置 uglifyjs-webpack-plugin。
首先，安装 uglifyjs-webpack-plugin：
npm install uglifyjs-webpack-plugin --save-dev
然后，添加到您的 webpack 配置中：
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
uglifyjs-webpack-plugin的可配置项：
压缩CSS
CSS代码也可以像JS一样被压缩。 目前比较成熟可靠的CSS压缩工具是cssnano。 cssnano可以理解CSS代码的含义webpack压缩插件，而不仅仅是删除空格，例如：
对于webpackv5以上版本，官方推荐使用CssMinimizerWebpackPlugin，它使用cssnano来优化和压缩CSSwebpack压缩插件，并且支持缓存和并发模式运行。
首先，我们需要安装 css-minimizer-webpack-plugin：
npm install css-minimizer-webpack-plugin --save-dev
然后将插件添加到 webpack 配置中：
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
// ...
optimization: {
minimizer: [
// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
`...`,
new CssMinimizerPlugin(),
],
},
};
压缩 HTML
HtmlWebpackPlugin插件不仅可以帮助我们简化HTML文件的创建，还可以压缩HTML文件。
首先，您需要安装 HtmlWebpackPlugin 插件：
npm install --save-dev html-webpack-plugin
在webpack配置文件中添加：
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [new HtmlWebpackPlugin()],
};
如果没有添加配置，将生成默认的index.html文件，并手动注入所有块和压缩。
也可以定制。 以下为常用参数：
如果 minify 为 true，生成的 HTML 将使用 html-minifier-terser 进行缩小，并具有以下选项：
{
collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
}
网页包系列
