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

  2. 配置 ```javascript const os = require(“os”); const path = require(“path”); const ESLintWebpackPlugin = require(“eslint-webpack-plugin”); const HtmlWebpackPlugin = require(“html-webpack-plugin”); const MiniCssExtractPlugin = require(“mini-css-extract-plugin”); const CssMinimizerPlugin = require(“css-minimizer-webpack-plugin”); const TerserPlugin = require(“terser-webpack-plugin”);

// cpu核数 const threads = os.cpus().length;

// 获取处理样式的Loaders const getStyleLoaders = (preProcessor) => { return [ MiniCssExtractPlugin.loader, “css-loader”, { loader: “postcss-loader”, options: { postcssOptions: { plugins: [ “postcss-preset-env”, // 能解决大多数样式兼容性问题 ], }, }, }, preProcessor, ].filter(Boolean); };

module.exports = { entry: “./src/main.js”, output: { path: path.resolve(dirname, “../dist”), // 生产模式需要输出 filename: “static/js/main.js”, // 将 js 文件输出到 static/js 目录中 clean: true, }, module: { rules: [ { oneOf: [ { // 用来匹配 .css 结尾的文件 test: /.css$/, // use 数组里面 Loader 执行顺序是从右到左 use: getStyleLoaders(), }, { test: /.less$/, use: getStyleLoaders(“less-loader”), }, { test: /.s[ac]ss$/, use: getStyleLoaders(“sass-loader”), }, { test: /.styl$/, use: getStyleLoaders(“stylus-loader”), }, { test: /.(png|jpe?g|gif|webp)$/, type: “asset”, parser: { dataUrlCondition: { maxSize: 10 * 1024, // 小于10kb的图片会被base64处理 }, }, generator: { // 将图片文件输出到 static/imgs 目录中 // 将图片文件命名 [hash:8][ext][query] // [hash:8]: hash值取8位 // [ext]: 使用之前的文件扩展名 // [query]: 添加之前的query参数 filename: “static/imgs/[hash:8][ext][query]”, }, }, { test: /.(ttf|woff2?)$/, type: “asset/resource”, generator: { filename: “static/media/[hash:8][ext][query]”, }, }, { test: /.js$/, // exclude: /node_modules/, // 排除node_modules代码不编译 include: path.resolve(dirname, “../src”), // 也可以用包含 use: [ { loader: “thread-loader”, // 开启多进程 options: { workers: threads, // 数量 }, }, { loader: “babel-loader”, options: { cacheDirectory: true, // 开启babel编译缓存 cacheCompression: false, // 缓存文件不要压缩 plugins: [“@babel/plugin-transform-runtime”], // 减少代码体积 }, }, ], }, ], }, ], }, plugins: [ new ESLintWebpackPlugin({ // 指定检查文件的根目录 context: path.resolve(dirname, “../src”), exclude: “node_modules”, // 默认值 cache: true, // 开启缓存 // 缓存目录 cacheLocation: path.resolve( dirname, “../node_modules/.cache/.eslintcache” ), threads, // 开启多进程 }), new HtmlWebpackPlugin({ // 以 public/index.html 为模板创建文件 // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源 template: path.resolve(__dirname, “../public/index.html”), }), // 提取css成单独文件 new MiniCssExtractPlugin({ // 定义输出文件名和目录 filename: “static/css/main.css”, }), // css压缩 // new CssMinimizerPlugin(), ], optimization: { minimizer: [ // css压缩也可以写到optimization.minimizer里面，效果一样的 new CssMinimizerPlugin(), // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了 new TerserPlugin({ parallel: threads, // 开启多进程 }), ] ], // devServer: { // host: “localhost”, // 启动服务器域名 // port: “3000”, // 启动服务器端口号 // open: true, // 是否自动打开浏览器 // }, mode: “production”, devtool: “source-map”, };

  2. <a name="9c45b29c"></a>
  3. ## Image Minimizer
  5. <a name="cf9e9911-2"></a>
  6. ### 为什么
  8. 开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。
  10. 我们可以对图片进行压缩，减少图片体积。
  12. **注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。**
  14. <a name="5138459f-2"></a>
  15. ### 是什么
  17. `image-minimizer-webpack-plugin`: 用来压缩图片的插件
  19. <a name="6e5fae5e-2"></a>
  20. ### 怎么用
  22. 1. 下载包

npm i image-minimizer-webpack-plugin imagemin -D

  2. 还有剩下包需要下载，有两种模式：
  4. - 无损压缩

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

  2. - 有损压缩

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

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