一、本次介绍的项目优化分为两类：
- 第一类：是对JS、CSS做兼容处理。
- 第二类：是对JS、CSS、HTML做文件压缩处理。
二、JS文件优化
1、JS文件压缩处理
默认生产模式已经开启了：html 压缩和 js 压缩
2、JS文件兼容处理
webpack本身可以对JS模块化进行处理，而其他的JS高阶语法，需要借助Babel进行转化为浏览器通用识别的语法。
详情可以去查看我之前的文章：
webpack入门（六）-- 处理js资源（Eslint、Babel）
三、HTML文件优化
1、HTML文件压缩处理
默认生产模式已经开启了：html 压缩和 js 压缩
四、CSS文件优化
1、CSS 提取成单独文件
之前 Css 文件被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式。
这样对于网站来说，会出现闪屏现象（因为JS文件加载比较晚，导致最开始的页面没有任何样式），用户体验不好。
我们应该是单独的 Css 文件，通过 link 标签加载性能才好。
那该如何处理呢？需要通过 mini-css-extract-plugin 插件。
①下载依赖包
npm i mini-css-extract-plugin -D
②配置文件
- webpack.prod.js生产环境配置文件
注意：- 首先，要引入插件。
- 其次，new插件，并配置插件。
- 最后，要在样式处理的loader最开始加上MiniCssExtractPlugin.loader
// node.js的语法，导入path模块
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")//引入CSS压缩和提取插件
module.exports = {
// entry入口，指定webpack打包入口文件。可以是一个或者多个。
// 这里的路径，可以用相对路径，也可以使用绝对路径。
entry: "./src/main.js",
// output是出口，指定打包出口的位置目录。
// 这里的路径必须是绝对路径。
// __dirname是当前文件的文件夹的绝对路径
// path.resolve()方法返回一个绝对路径
output: {
path: path.resolve(__dirname, "../dist"),
// 输出文件名
filename: "main.js",
clean: true
},
// 加载器
module: {
rules: [
{
//这里test后面是正则表达式，用来匹配.css文件结尾
test: /\.css$/,
// use里面是一个loader数组，这个数组的执行顺序是从右到左，从下到上。
//Css 文件被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式
// MiniCssExtractPlugin.loader,替换style-loader,单独提取文件,然后由html-webpack-plugin一起引入index.html
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
{
//这里test后面是正则表达式，用来匹配.css文件结尾
test: /\.less$/,
// 注意：顺序是不能颠倒的，因为要从右到左执行，先是less-loader将less文件处理为普通css文件，然后css-loader将css
// 处理为webpack可以识别的js模块，最后style-loader将样式以style引入html文件中
//Css 文件被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式
// MiniCssExtractPlugin.loader,替换style-loader，单独提取文件
use: [MiniCssExtractPlugin.loader,"css-loader", "less-loader"]
},
]
},
// 插件
plugins: [
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
],
// 生产模式
mode: "production"
}
③运行指令
这里配置简化指令不清楚的去看我之前的文章。
webpack入门（十一）-- 配置双环境（开发环境和生产环境配置）
npm run build
2、CSS 文件兼容处理
CSS文件兼容处理，需要借助几个依赖包：
- postcss-loader
- postcss
- postcss-preset-env // 能解决大多数样式兼容性问题
①下载依赖包
npm i postcss-loader postcss postcss-preset-env -D
②配置文件
主要是在css-loader后加上兼容处理配置
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
webpack.prod.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
clean: true,
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: [
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
],
},
{
test: /\.less$/,
use: [
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
"less-loader",
],
},
{
test: /\.s[ac]ss$/,
use: [
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
"sass-loader",
],
},
{
test: /\.styl$/,
use: [
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
"stylus-loader",
],
}
],
},
plugins: [
],
mode: "production",
};
③控制兼容性（兼容版本）
我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。
{
// 其他省略
//兼容性所以设置兼容浏览器 ie8 以上。
"browserslist": ["ie >= 8"]
}
更多的 browserslist配置，请看 browserslist 配置文档
实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：
{
// 其他省略
"browserslist": ["last 2 version", "> 1%", "not dead"]
}
④合并配置（提取公共样式函数）
- webpack.prod.js
// node.js的语法，导入path模块
const path = require("path");
const EslintWebpackPlugin = require("eslint-webpack-plugin")//eslint插件引入
const HtmlWebpackPlugin = require("html-webpack-plugin")//html资源处理插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin") //引入CSS压缩和提取插件
// 获取处理样式的Loader函数
const getStyleLoaders = (preProcessor) => {
return [
// MiniCssExtractPlugin.loader,替换style-loader,单独提取css文件（然后由html-webpack-plugin一起引入index.html）
MiniCssExtractPlugin.loader,
"css-loader",
// "css-loader"后样式兼容处理loader
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor,
].filter(Boolean);//filter可以过滤掉当preProcessor为undefined的项
};
module.exports = {
// entry入口，指定webpack打包入口文件。可以是一个或者多个。
// 这里的路径，可以用相对路径，也可以使用绝对路径。
entry: "./src/main.js",
// output是出口，指定打包出口的位置目录。
// 这里的路径必须是绝对路径。
// __dirname是当前文件的文件夹的绝对路径
// path.resolve()方法返回一个绝对路径
output: {
path: path.resolve(__dirname, "../dist"),
// 输出文件名
filename: "main.js",
clean: true
},
// 加载器
module: {
rules: [
{
test: /\.js$/,//js文件
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
{
//这里test后面是正则表达式，用来匹配.css文件结尾
test: /\.css$/,
// use里面是一个loader数组，这个数组的执行顺序是从右到左，从下到上。
// MiniCssExtractPlugin.loader,替换style-loader,单独提取css文件（然后由html-webpack-plugin一起引入index.html）
use: getStyleLoaders(),
},
{
//这里test后面是正则表达式，用来匹配.css文件结尾
test: /\.less$/,
// 注意：顺序是不能颠倒的，因为要从右到左执行，先是less-loader将less文件处理为普通css文件，然后css-loader将css
// 处理为webpack可以识别的js模块，最后style-loader将样式以style引入html文件中
use: getStyleLoaders("less-loader"),
},
]
},
// 插件
plugins: [
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
],
// 开发模式
mode: "production"
}
⑤运行指令
npm run build
3、CSS 文件压缩处理
CSS文件压缩需要 css-minimizer-webpack-plugin 插件
①下载依赖包
npm i css-minimizer-webpack-plugin -D
②配置依赖
③运行指令
npm run build
五、总结
- 压缩文件（去除空格换行等），减少文件体积。
- 默认生产模式已经开启了：html 压缩和 js 压缩。
- css压缩需要借助一个依赖插件 css-minimizer-webpack-plugin 。
- 兼容处理，就是要兼容大多浏览器，使得同一套代码在不同的浏览器中运行效果一样。
- JS兼容处理要使用 Babel 。
- Css兼容处理使用 postcss-loader 。
719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
