Webpack---优化（一）

最新推荐文章于 2024-02-27 16:05:22 发布
最新推荐文章于 2024-02-27 16:05:22 发布
阅读量300 收藏
点赞数
分类专栏： webpack 文章标签： webpack 前端 javascript
原文链接：https://yk2012.github.io/sgg_webpack5/senior/liftingSpeed.html#%E6%80%8E%E4%B9%88%E7%94%A8-4
版权

前言

webpack打包工具的使用，对于前端项目的构建可谓是一个很大的帮助了，不仅可以帮助我们结局浏览器的兼容问题，而且还可以帮助我们检查一些语法等等。但是在开发一个项目的时候，由于代码的体积过大，那么在打包构建过程中肯定就会存在许多的问题，如：打包构建时间太久、代码的目录结构不直观很杂乱、代码的冗余度较高等。那么这就使得我们需要使用一些优化手段，对webpack打包进行优化。

Webpack优化

在对webpack进行优化的时候，我们可以从一下几个方面谈起：

  1. 提升开发体验
  2. 提升打包构建速度
  3. 减少代码体积
  4. 优化代码运行性能

提升开发体验

开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子：
在这里插入图片描述所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。如下我们可以看到：

在开发打包之后，可能由于我们的失误，导致一些代码写错，控制台就会给我们提示报错信息：
在这里插入图片描述
当我们点击报错指引之后，我们就可以跳转到报错的地方去查看代码，但是当我们点击进入之后会看到：在这里插入图片描述
会看到代码都压缩在一起了，对于极少的代码还好，找一找就可以找到，但是对于大量代码的话，我们寻找起来就非常的困难了。
所以这个时候我们需要更加准确的错误提示，来帮助我们更好的开发代码。

那么该如何实现呢？
SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。
webpack提供了一个devtool配置，可以此选项控制是否生成，以及如何生成 source map。

SourceMap（源代码映射）

SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。
webpack提供了一个devtool配置，可以此选项控制是否生成，以及如何生成 source map。
它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

使用

我们可以查看Webpack DevTool文档可知，sourmap的值有很多情况。
但是实际开发中我们只需要关注两种情况即可：

  • 开发模式：cheap-module-source-map
    优点：打包编译速度快，只包含行映射
    缺点：没有列映射（因为在开发中我们的代码是没有经过压缩的，所以我们不需要列映射也可以很轻松的找到错误信息所处的位置）
module.exports = {
  // 其他省略
  mode: "development",
  devtool: "cheap-module-source-map",
};
  • 生产模式：source-map
    优点：包含行/列映射
    缺点：打包编译速度更慢
module.exports = {
  // 其他省略
  mode: "production",
  devtool: "source-map",
};

在经过这样简单的配置之后，会在项目中生成以map为后缀的文件名，这样我们就可以很直观的看到我们代码中所出现的错误。

提升打包构建速度

1. HotModuleReplacement
2. OneOf
3. Include/Exclude
4. Cache
5. Thread

HotModuleReplacement

开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。如果在打包的时候只去打包发生修改的文件，便可以解决这问题。

所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。我们可以利用HotModuleReplacement（HMR/热模块替换）来实现：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。

基本配置

webpack.config.js

module.exports = {
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
  },
};

js

// import count from './js/count';
// 全部引入core-js
import 'core-js'
import sum from './js/sum';
import './css/box.css'
import './less/css.less'
import './sass/css.scss'


console.log(sum(1, 3, 6));
console.log(module.hot);
document.getElementById('btn').onclick = function () {
    import( /* webpackChunkName: "math" */ './js/count.js')
        .then(({
            count
        }) => {
            console.log(count);
            console.log(count(1, 2));
        }).catch((err) => {
            console.log(err);
        })
}
// 判断是否支持HMR功能
if(module.hot){
    // 判断是否支持热模块替换功能
    module.hot.accept("./js/count");
    module.hot.accept("./js/sum");
}

但是如果我们的代码非常的多的话，那么手写起来就很麻烦，所以实际开发中我们会使用其他的loader来解决。如：vue-loader、react-hot-loader等

OneOf

打包时每个文件都会经过所有 loader 处理，虽然因为 test 正则原因实际没有处理上，但是都要过一遍。比较慢。那么我们可以使用OneOf配置项来使我们在打包的时候，一个文件只会匹配上一个loader，剩下的就不匹配了。

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: undefined, // 开发模式没有输出，不需要指定输出目录
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  },
  module: {
    rules: [
      {
      // 使用oneOf
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          },
          {
            test: /\.s[ac]ss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
          {
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "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代码不编译
            loader: "babel-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能
  },
  mode: "development",
  devtool: "cheap-module-source-map",
};

开发者模式也是如此配置。

Include/Exclude

在我们开发的时候需要使用到许多的第三方库或者插件，所有文件都被保存在noe_modules中了。这些文件也都是不需要编译就可以直接使用的。但是在使用webpack打包的时候，webpack并不知道这些，eslint和babel都会对其进行检查或者编译，同样的也会去对这些文件进行打包，会增加打包的耗时，所以我们需要排除node_modules下的文件。
这个时候我们就需要使用到indculde或者exclude对文件进行排除。

  • inculde：包含，只处理xxx文件
  • exclude：排除，出了xxx文件以外其他文件都处理

配置如下：

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: undefined, // 开发模式没有输出，不需要指定输出目录
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          },
          {
            test: /\.s[ac]ss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
          {
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "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"), // 也可以用包含
            loader: "babel-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能
  },
  mode: "development",
  devtool: "cheap-module-source-map",
};

生产模式也可以这样配置。

Cache

每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。

我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了。
具体配置：

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: undefined, // 开发模式没有输出，不需要指定输出目录
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    // clean: true, // 开发模式没有输出，不需要清空输出结果
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          },
          {
            test: /\.s[ac]ss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
          {
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "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"), // 也可以用包含
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能
  },
  mode: "development",
  devtool: "cheap-module-source-map",
};

Thread

当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。这个速度是比较慢的。

我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。

而对 js 文件处理主要就是 eslint 、babel、Terser 三个工具，所以我们要提升它们的运行速度。

我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了。
相关配置
我们所能启动的进程的数量就是我们的CPU的核数。
1、使用node的os模块获取cpu的核数

// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;

2、下载进程加载器

npm i thread-loader -D

3、使用

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编译缓存
                },
              },
            ],
          },
        ],
      },
    ],
  },
  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: {
    minimize: true,
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      new TerserPlugin({
        parallel: threads // 开启多进程
      })
    ],
  },
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
  devtool: "source-map",
};

注意：我们一般都是在项目比较庞大的时候去开启多核加载的，对于一些较小的项目，反倒是开启了多核加载之后，会对降低打包速度，因为开启了多个内核的运行，也是比较耗费时间的。
所以如果在开启之后，会明显的发现运行速度提高了，那就有必要开启，如果不快反而降低了，那么最好就不要开启多核打包了。
（持续更新中）

Richieqiqi
关注
专栏目录
purgecss-webpack-plugin：用于Webpack的Purgecss插件
02-04
综上所述，`purgecss-webpack-plugin`是Webpack构建流程中不可或缺的优化工具，它使得开发者能够更加高效地管理和优化CSS资源，提高项目的性能表现。正确配置和使用这个插件，可以帮助你的项目实现轻量级、高性能的...
webpack-develop.zip
11-01
在"webpack-develop.zip"这个压缩包中，我们很可能是找到了一个使用Vue CLI 3搭建的开发环境的基础结构。Webpack是现代JavaScript应用程序的模块打包器，它能够将各种资源，如JavaScript、CSS、图片等，打包成一个或...
如何在VUE项目中使用SCSS
weixin_33853794的博客
01-07 371
首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS(SASS) 和LESS、POSTCSS 那么SCSS和SASS 有什么区别呢 · 文件扩...
使用Webpack打包、配置和加载 VUE组件
十二的博客
03-06 1032
webpack4 确保使用Node版本 >= 8.9.4 Webpck是一个前端资源加载/打包工具。它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 官网: https://webpack.js.org/ 使用webpack4不再强制需要webpack.congig.js作为打包入口配置文件。 默认入口为’./src’的index和默认出口’./dist’，...
前端webpack项目如何删除文件中的无用文件
最新发布
qq_52181663的博客
02-27 738
四、在和插件同目录下自动生成了一个.txt文件。文件中有全部文件、依赖文件。可参考检查后手动删除，也可以在chainWebpack文件中修改配置isDelete:ture。这样，在项目成功跑起来的同时，就会自动删除无用文件，并且在命令行页面有删除记录。在开发过程中，总是会有一些无用的代码文件，这会影响开发小伙伴的开发效率，那么如何优化，删除这些无影=用代码呢。二、在webpack的配置文件中引入这个插件。若是umi的项目，就是在config/chainWebpack.ts文件中进行配置。
优化Webpack打包流程：打包完成后再删除旧文件，确保网站访问稳定
ymzhao
07-03 2890
假设webpack打包耗时三分钟，在这三分钟内，网站都是无法访问的。生产环境下，影响太大。 在生产环境下，为了确保网站的稳定性和一致性，通常建议在打包完成后再部署新的打包文件，以确保网站始终可访问。因此，想到一个手动操作文件系统的方案: 将项目打包到临时文件夹下，完毕后，删除原dist文件夹，再将临时文件夹重命名为dist。
webpack4——消除未使用的css
不想休假的小美美
04-05 964
安装 npm -d install purifycss-webpack purify 配置 const glob = require('glob'); const PurifyCssPlugin = require('purifycss-webpack'); new PurifyCssPlugin({ paths: glob.sync(path.join(__dirnam...
image-minimizer-webpack-plugin：Webpack加载器和插件，用于使用imagemin压缩图像
02-06
Imagemin Webpack 插件和加载器以优化（压缩）使用的所有图像 。 不用担心图像的大小，现在它们总是经过优化/压缩的。 image-minimizer-webpack-plugin 该插件使用优化图像。 入门 首先，您需要安装image-...
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
10-14
在Vue项目中，当使用`uglifyjs-webpack-plugin`进行代码压缩和优化时，可能会遇到打包失败的错误，如"Unexpected token: keyword (const)"。这个错误通常表明代码中存在ES6语法，例如`const`关键字，而`uglifyjs-...
moment-locales-webpack-plugin：使用webpack轻松删除未使用的Moment.js语言环境
02-06
使用此插件剥离这些KB并优化应用程序！ ¹–通过Moment.js 2.18.1测试 安装 npm install --save-dev moment-locales-webpack-plugin 用法 // webpack.config.js const MomentLocalesPlugin = r
网站子目录部署VUE webpack 打包资源文件路径的正确引用方式1
08-03
似乎所有问题都解决了，但有个问题没有解决，就是如果我在css引了了图资源，webpack并不能很好的处理这的资源路径“m”件夹是站下的个录，如果我在开发的时候，
前端优化，webpack打包删除无用文件，并附上批量删除文件脚本！非常好用
weixin_45137175的博客
03-09 2117
大家可能在webpack打包项目过程中，常遇见一些无用的图片，js文件，怎样能够自动检测哪些是无用的文件呢？本文中介绍使用插件useless-files-webpack-plugin查找无用文件，在terminal中删除，附加bat批量删除文件。
[Vue]---webpack的配置与使用
IT_qslong的博客
11-07 561
文章目录webpack概述webpack的基本使用配置打包文件的入口与出口配置webpack的自动打包功能配置html-webpack-plugin生成预览页面配置自动打包相关的参数webpack中的加载器通过loader打包非js模块loader的调用过程打包处理css文件打包处理less文件打包处理scss文件配置postCSS自动添加css的兼容前缀打包样式表中的图片和字体文件打包处理js文件中的高级语法 webpack概述 webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开
vue项目性能优化：去除没有引用的文件
每天都要努力学习哦~~
09-06 1385
随着项目开发的进行会经历一个混乱到整齐划一的过程，这个过程中会产生一系列冗余代码，这时候通过useless-files-webpack-plugin这个插件，可以帮助我们删除项目中无用的文件；
vue项目性能优化：去除无用的文件
浩星
11-03 7845
前言： 这里来分享一些vue项目性能优化的一些实用的方法，这里使用 useless-files-webpack-plugin 来查找无用文件。 实现步骤： 1、安装插件 npm i useless-files-webpack-plugin -S 2、vue.config.js中配置 const UselessFile = require('useless-files-webpack-plugin') chainWebpack: config => { ...
scss提取 vue_webpack,vue.js_如何用webpack提取出vue文件中的scss内容（引入了mixin文件编译报错）？，webpack,vue.js,sass - phpStudy...
weixin_39541693的博客
12-22 225
如何用webpack提取出vue文件中的scss内容(引入了mixin文件编译报错)？本意是想一个组件对应一个样式，当然sass的@mixin非常好用，在vue下引入了编写好的mixin文件，预期是应该webpack编译好了sass再生成单独css文件，实际是webpack直接把@include样式当成了字符串写入css文件。然后就会报错为mixin文件内unknown world。配置如下：we...
细说前端打包发布后，浏览器缓存如何清理？其实只需要简单的webpack配置就行
wz9608的博客
03-07 7730
由此可见，没配置过的webpack输出文件名，每次打包产生的文件是一样的，所以浏览器缓存以为还是之前的js文件，就直接从缓存获取，在项目中配置webpack打包输出文件名还是很有必要的，是杜绝发布后存在的缓存问题的最有效方式，vite的配置。
webpack-externals过滤文件
u013992330的博客
12-29 8836
{ "babel-core" :"commonjs babel-core", "babel-loader" :"commonjs babel-loader", "body-parser" :"commonjs body-parser", "cookie-parser" :"commonjs cookie-parser", "debug" :"commonjs debug"
webpack4 资源缓存
weixin_43294560的博客
01-15 1040
1、babel缓存 在babel-loader中,在options内添加属性 cacheDirectory:true 2、文件资源缓存 在打包输出文件的文件名中添加hash值 hash值缓存,根据每次打包后webpack生成的hash值不同来加载资源 会因为使用的都是webpack每次打包后的hash值,导致改动一处,其他资源都改动,都重新加载了 chunkhash值缓存,打包来源同一个chunk,生成的hash值就一样 如果css在js中引入,则因为属于同一个chunk,导致
terser-webpack-plugin与uglifyjs-webpack-plugin
05-02
uglifyjs-webpack-plugin是一个旧的插件，它使用UglifyJS进行压缩。它已经被广泛使用了很长一段时间，并且在许多项目中仍然被使用。但是，它已经不再维护，而是由terser-webpack-plugin取代。 terser-webpack-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值