1. 安装
cnpm i react react-dom -S
cnpm install webpack webpack-cli webpack-dev-server image-webpack-loader mini-css-extract-plugin purgecss-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react terser-webpack-plugin html-webpack-plugin optimize-css-assets-webpack-plugin mini-css-extract-plugin qiniu webpack-bundle-analyzer -D
2.压缩JS
optimization: {
minimize: true,
minimizer: [
+ new TerserPlugin({
})
]
},
3. 压缩CSS
optimization: {
minimize: true,
minimizer: [
+ new OptimizeCSSAssetsPlugin({
}),
]
},
4. 压缩图片
{
test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
use: [
"file-loader",
{
+ loader: "image-webpack-loader",
+ options: {
+ mozjpeg: {
+ progressive: true,
+ quality: 65,
+ },
+ optipng: {
+ enabled: false,
+ },
+ pngquant: {
+ quality: "65-90",
+ speed: 4,
+ },
+ gifsicle: {
+ interlaced: false,
+ },
+ webp: {
+ quality: 75,
+ }
+ }
+ }
]
}
5. 清除无用的CSS
const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const PurgecssPlugin = require("purgecss-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
include: path.resolve(__dirname, "src"),
exclude: /node_modules/,
use: [
{
+ loader: MiniCssExtractPlugin.loader,
},
"css-loader",
],
}
]
},
plugins: [
+ new MiniCssExtractPlugin({
+ filename: "[name].css",
+ }),
+ new PurgecssPlugin({
+ paths: glob.sync(`${
PATHS.src}/**/*`, {
nodir: true }),
+ })
]
devServer: {
},
};
6. Tree Shaking
- 一个模块可以有多个方法,只要其中某个方法使用到了,则整个文件都会被打到bundle里面去,tree shaking就是只把用到的方法打入bundle,没用到的方法会uglify阶段擦除掉
- 原理是利用es6模块的特点,只能作为模块顶层语句出现,import的模块名只能是字符串常量
- webpack默认支持,在.babelrc里设置module:false即可在production mode下默认开启
module.exports = {
+ mode:'production',
+ devtool:false,
module: {
rules: [
{
test: /\.js/,
include: path.resolve(__dirname, "src"),
use: [