Webpack 5-高级优化-减少代码体积

2023年05月06日 11:04 · 阅读(401) ·

依赖环境

名称 版本
操作系统 Windows 10 X64
Node.js Nodejs 16+
Webpack 8.5.0
Webpack 5-基础 -

来源

名称 版本
视频地址 尚硅谷Webpack5入门到原理（面试开发一条龙）
视频+资料下载 百度云资料
课件下载 Webpack5-课件.zip
Webpack 文档 https://webpack.docschina.org/concepts/

减少代码体积

Tree Shaking

为什么

开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。

如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。

这样将整个库都打包进来，体积就太大了。

是什么

Tree Shaking 是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。

注意：它依赖 ES Module。

怎么用

Webpack 已经默认开启了这个功能，无需其他配置。

Babel

为什么

Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！

Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。

你可以将这些辅助代码作为一个独立模块，来避免重复引入。

是什么

@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。

怎么用

  1. 下载包
  1. npm i @babel/plugin-transform-runtime -D
  1. 配置
  1. const os = require("os");
  2. const path = require("path");
  3. const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  4. const HtmlWebpackPlugin = require("html-webpack-plugin");
  5. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  6. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
  7. const TerserPlugin = require("terser-webpack-plugin");
  9. // cpu核数
  10. const threads = os.cpus().length;
  12. // 获取处理样式的Loaders
  13. const getStyleLoaders = (preProcessor) => {
  14.   return [
  15.     MiniCssExtractPlugin.loader,
  16.     "css-loader",
  17.     {
  18.       loader: "postcss-loader",
  19.       options: {
  20.         postcssOptions: {
  21.           plugins: [
  22.             "postcss-preset-env", // 能解决大多数样式兼容性问题
  23.           ],
  24.         },
  25.       },
  26.     },
  27.     preProcessor,
  28.   ].filter(Boolean);
  29. };
  31. module.exports = {
  32.   entry: "./src/main.js",
  33.   output: {
  34.     path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
  35.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  36.     clean: true,
  37.   },
  38.   module: {
  39.     rules: [
  40.       {
  41.         oneOf: [
  42.           {
  43.             // 用来匹配 .css 结尾的文件
  44.             test: /\.css$/,
  45.             // use 数组里面 Loader 执行顺序是从右到左
  46.             use: getStyleLoaders(),
  47.           },
  48.           {
  49.             test: /\.less$/,
  50.             use: getStyleLoaders("less-loader"),
  51.           },
  52.           {
  53.             test: /\.s[ac]ss$/,
  54.             use: getStyleLoaders("sass-loader"),
  55.           },
  56.           {
  57.             test: /\.styl$/,
  58.             use: getStyleLoaders("stylus-loader"),
  59.           },
  60.           {
  61.             test: /\.(png|jpe?g|gif|webp)$/,
  62.             type: "asset",
  63.             parser: {
  64.               dataUrlCondition: {
  65.                 maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
  66.               },
  67.             },
  68.             generator: {
  69.               // 将图片文件输出到 static/imgs 目录中
  70.               // 将图片文件命名 [hash:8][ext][query]
  71.               // [hash:8]: hash值取8位
  72.               // [ext]: 使用之前的文件扩展名
  73.               // [query]: 添加之前的query参数
  74.               filename: "static/imgs/[hash:8][ext][query]",
  75.             },
  76.           },
  77.           {
  78.             test: /\.(ttf|woff2?)$/,
  79.             type: "asset/resource",
  80.             generator: {
  81.               filename: "static/media/[hash:8][ext][query]",
  82.             },
  83.           },
  84.           {
  85.             test: /\.js$/,
  86.             // exclude: /node_modules/, // 排除node_modules代码不编译
  87.             include: path.resolve(__dirname, "../src"), // 也可以用包含
  88.             use: [
  89.               {
  90.                 loader: "thread-loader", // 开启多进程
  91.                 options: {
  92.                   workers: threads, // 数量
  93.                 },
  94.               },
  95.               {
  96.                 loader: "babel-loader",
  97.                 options: {
  98.                   cacheDirectory: true, // 开启babel编译缓存
  99.                   cacheCompression: false, // 缓存文件不要压缩
  100.                   plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
  101.                 },
  102.               },
  103.             ],
  104.           },
  105.         ],
  106.       },
  107.     ],
  108.   },
  109.   plugins: [
  110.     new ESLintWebpackPlugin({
  111.       // 指定检查文件的根目录
  112.       context: path.resolve(__dirname, "../src"),
  113.       exclude: "node_modules", // 默认值
  114.       cache: true, // 开启缓存
  115.       // 缓存目录
  116.       cacheLocation: path.resolve(
  117.         __dirname,
  118.         "../node_modules/.cache/.eslintcache"
  119.       ),
  120.       threads, // 开启多进程
  121.     }),
  122.     new HtmlWebpackPlugin({
  123.       // 以 public/index.html 为模板创建文件
  124.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
  125.       template: path.resolve(__dirname, "../public/index.html"),
  126.     }),
  127.     // 提取css成单独文件
  128.     new MiniCssExtractPlugin({
  129.       // 定义输出文件名和目录
  130.       filename: "static/css/main.css",
  131.     }),
  132.     // css压缩
  133.     // new CssMinimizerPlugin(),
  134.   ],
  135.   optimization: {
  136.     minimize: true,
  137.     minimizer: [
  138.       // css压缩也可以写到optimization.minimizer里面，效果一样的
  139.       new CssMinimizerPlugin(),
  140.       // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
  141.       new TerserPlugin({
  142.         parallel: threads // 开启多进程
  143.       })
  144.     ],
  145.   },
  146.   // devServer: {
  147.   //   host: "localhost", // 启动服务器域名
  148.   //   port: "3000", // 启动服务器端口号
  149.   //   open: true, // 是否自动打开浏览器
  150.   // },
  151.   mode: "production",
  152.   devtool: "source-map",
  153. };

Image Minimizer

为什么

开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。

我们可以对图片进行压缩，减少图片体积。

注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。

是什么

image-minimizer-webpack-plugin: 用来压缩图片的插件

怎么用

  1. 下载包
  1. npm i image-minimizer-webpack-plugin imagemin -D

还有剩下包需要下载，有两种模式：

  • 无损压缩
  1. npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
  • 有损压缩
  1. npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

有损/无损压缩的区别

  1. 配置

我们以无损压缩配置为例：

  1. const os = require("os");
  2. const path = require("path");
  3. const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  4. const HtmlWebpackPlugin = require("html-webpack-plugin");
  5. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  6. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
  7. const TerserPlugin = require("terser-webpack-plugin");
  8. const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
  10. // cpu核数
  11. const threads = os.cpus().length;
  13. // 获取处理样式的Loaders
  14. const getStyleLoaders = (preProcessor) => {
  15.   return [
  16.     MiniCssExtractPlugin.loader,
  17.     "css-loader",
  18.     {
  19.       loader: "postcss-loader",
  20.       options: {
  21.         postcssOptions: {
  22.           plugins: [
  23.             "postcss-preset-env", // 能解决大多数样式兼容性问题
  24.           ],
  25.         },
  26.       },
  27.     },
  28.     preProcessor,
  29.   ].filter(Boolean);
  30. };
  32. module.exports = {
  33.   entry: "./src/main.js",
  34.   output: {
  35.     path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
  36.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  37.     clean: true,
  38.   },
  39.   module: {
  40.     rules: [
  41.       {
  42.         oneOf: [
  43.           {
  44.             // 用来匹配 .css 结尾的文件
  45.             test: /\.css$/,
  46.             // use 数组里面 Loader 执行顺序是从右到左
  47.             use: getStyleLoaders(),
  48.           },
  49.           {
  50.             test: /\.less$/,
  51.             use: getStyleLoaders("less-loader"),
  52.           },
  53.           {
  54.             test: /\.s[ac]ss$/,
  55.             use: getStyleLoaders("sass-loader"),
  56.           },
  57.           {
  58.             test: /\.styl$/,
  59.             use: getStyleLoaders("stylus-loader"),
  60.           },
  61.           {
  62.             test: /\.(png|jpe?g|gif|svg)$/,
  63.             type: "asset",
  64.             parser: {
  65.               dataUrlCondition: {
  66.                 maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
  67.               },
  68.             },
  69.             generator: {
  70.               // 将图片文件输出到 static/imgs 目录中
  71.               // 将图片文件命名 [hash:8][ext][query]
  72.               // [hash:8]: hash值取8位
  73.               // [ext]: 使用之前的文件扩展名
  74.               // [query]: 添加之前的query参数
  75.               filename: "static/imgs/[hash:8][ext][query]",
  76.             },
  77.           },
  78.           {
  79.             test: /\.(ttf|woff2?)$/,
  80.             type: "asset/resource",
  81.             generator: {
  82.               filename: "static/media/[hash:8][ext][query]",
  83.             },
  84.           },
  85.           {
  86.             test: /\.js$/,
  87.             // exclude: /node_modules/, // 排除node_modules代码不编译
  88.             include: path.resolve(__dirname, "../src"), // 也可以用包含
  89.             use: [
  90.               {
  91.                 loader: "thread-loader", // 开启多进程
  92.                 options: {
  93.                   workers: threads, // 数量
  94.                 },
  95.               },
  96.               {
  97.                 loader: "babel-loader",
  98.                 options: {
  99.                   cacheDirectory: true, // 开启babel编译缓存
  100.                   cacheCompression: false, // 缓存文件不要压缩
  101.                   plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
  102.                 },
  103.               },
  104.             ],
  105.           },
  106.         ],
  107.       },
  108.     ],
  109.   },
  110.   plugins: [
  111.     new ESLintWebpackPlugin({
  112.       // 指定检查文件的根目录
  113.       context: path.resolve(__dirname, "../src"),
  114.       exclude: "node_modules", // 默认值
  115.       cache: true, // 开启缓存
  116.       // 缓存目录
  117.       cacheLocation: path.resolve(
  118.         __dirname,
  119.         "../node_modules/.cache/.eslintcache"
  120.       ),
  121.       threads, // 开启多进程
  122.     }),
  123.     new HtmlWebpackPlugin({
  124.       // 以 public/index.html 为模板创建文件
  125.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
  126.       template: path.resolve(__dirname, "../public/index.html"),
  127.     }),
  128.     // 提取css成单独文件
  129.     new MiniCssExtractPlugin({
  130.       // 定义输出文件名和目录
  131.       filename: "static/css/main.css",
  132.     }),
  133.     // css压缩
  134.     // new CssMinimizerPlugin(),
  135.   ],
  136.   optimization: {
  137.     minimizer: [
  138.       // css压缩也可以写到optimization.minimizer里面，效果一样的
  139.       new CssMinimizerPlugin(),
  140.       // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
  141.       new TerserPlugin({
  142.         parallel: threads, // 开启多进程
  143.       }),
  144.       // 压缩图片
  145.       new ImageMinimizerPlugin({
  146.         minimizer: {
  147.           implementation: ImageMinimizerPlugin.imageminGenerate,
  148.           options: {
  149.             plugins: [
  150.               ["gifsicle", { interlaced: true }],
  151.               ["jpegtran", { progressive: true }],
  152.               ["optipng", { optimizationLevel: 5 }],
  153.               [
  154.                 "svgo",
  155.                 {
  156.                   plugins: [
  157.                     "preset-default",
  158.                     "prefixIds",
  159.                     {
  160.                       name: "sortAttrs",
  161.                       params: {
  162.                         xmlnsOrder: "alphabetical",
  163.                       },
  164.                     },
  165.                   ],
  166.                 },
  167.               ],
  168.             ],
  169.           },
  170.         },
  171.       }),
  172.     ],
  173.   },
  174.   // devServer: {
  175.   //   host: "localhost", // 启动服务器域名
  176.   //   port: "3000", // 启动服务器端口号
  177.   //   open: true, // 是否自动打开浏览器
  178.   // },
  179.   mode: "production",
  180.   devtool: "source-map",
  181. };
  1. 打包时会出现报错：
  1. Error: Error with 'src\images\1.jpeg': '"C:\Users\86176\Desktop\webpack\webpack_code\node_modules\jpegtran-bin\vendor\jpegtran.exe"'
  2. Error with 'src\images\3.gif': spawn C:\Users\86176\Desktop\webpack\webpack_code\node_modules\optipng-bin\vendor\optipng.exe ENOENT

我们需要安装两个文件到 node_modules 中才能解决, 文件可以从课件中找到：

  • jpegtran.exe

需要复制到 node_modules\jpegtran-bin\vendor 下面

jpegtran 官网地址

  • optipng.exe

需要复制到 node_modules\optipng-bin\vendor 下面

OptiPNG 官网地址