阅读 1802

关于 webpack 的一些优化方案

这是我参与8月更文挑战的第24天,活动详情查看:8月更文挑战

前言

webpack是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

一些优化配置

热更新

热更新功能,即是页面在运行过程中替换、添加或删除模块,而无需重新加载整个页面,所以预览反应更快,等待时间更少。原理是向每个chunk中注入代理客户端来连接devServer和网页。

devServer: {
  // ... 忽略一些代码
  hot: true,
},
复制代码

或者是在命令中添加 --hot参数即可,开启后如果修改页面中的局部代码就可以实现热刷新了。

cache

这是webpack5新增的属性cache,用于缓存生成的 webpack 模块和 chunk,来改善构建速度。

会默认开启磁盘缓存,默认将编译结果缓存在项目node_modules/.cache/webpack目录下。

module.exports = {
  //...
  cache: {
     type: 'filesystem',
     allowCollectingMemory: true,
    },
};
复制代码
指定搜寻范围

loader 指定 include,减少 loader 应用范围,仅应用于最少数量的必要模块。在配置loader时,通过testexcludeinclude缩小搜索范围

module: {
  rules: [
    {
      test: /.(png|svg|jpg|jpeg|gif)$/i,
      include: path.resolve(__dirname, 'src'),
      type: 'asset/resource',
    },
  ],
},
复制代码
source-map

通过webpack打包之后的代码变得非常复杂,这使得我们DEBUG变得非常困难,通常解释器会告诉你,在第几行第几列中的代码出错,但这对打包后的代码毫无用处。而source map提供了源代码构建后代码映射的技术,但项目报错的时候可以通过source map定位岛源代码。

module.exports = {
  //...
  devtool: 'source-map',
};
复制代码
  • 推荐配置

    • 开发环境:source-map (生成source map 方便调试)
    • 生产环境:none (不生成source map
缓存优化

浏览器在加载页面的时候,通常会在本地查找是否存在缓存,如果有则直接加载缓存中的数据。当我们在使用webpack打包的时候,可以在文件的后缀加载hash值,使浏览器不会加载缓存中的文件。

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'js/[name]/[name].[contenthash].js',
  clean: true,
},
复制代码
压缩代码

在终端执行以下命令,安装terser-webpack-plugin

yarn add -D terser-webpack-plugin 
复制代码

webpack配置文件中配置terser-webpack-plugin

import TerserPlugin from 'terser-webpack-plugin';
复制代码
optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      test: /.js(?.*)?$/i,
      parallel: true,
      terserOptions: {
        toplevel: true, // 删除无用代码
      },
    }),
  ],
},
复制代码

在终端执行以下命令,安装mini-css-extract-plugin css-minimizer-webpack-plugin

yarn add -D mini-css-extract-plugin css-minimizer-webpack-plugin 
复制代码

webpack配置文件中配置mini-css-extract-plugin css-minimizer-webpack-plugin

import MiniCssExtractPlugin from "mini-css-extract-plugin"
import CssMinimizerPlugin from "css-minimizer-webpack-plugin"
复制代码
{
  test: /.css$/i,
  use: [MiniCssExtractPlugin.loader, 'style-loader', 'css-loader', 'postcss-loader'],
},
复制代码
optimization: {
  minimize: true,
  minimizer: [
    new CssMinimizerPlugin(),
  ],
},
复制代码
多进程

使用thread-loader开启多进程打包,将后续的loader进行多线程的打包。

需要注意的是每个进程开启需要600ms的时间,通常在中大型项目中使用。

module: {
    rules: [
      {
        test: /.js$/,
        use: [
          "thread-loader",
          "babel-loader"
        ],
      },
    ],
},
复制代码
文章分类
前端
文章标签