解锁webpack:处理跨域devserver、摇树treeshaking、图片压缩sharp

发布于:2025-05-28 ⋅ 阅读:(172) ⋅ 点赞:(0)

devserver

1、问题前置

平时开发过程中对于跨域问题怎么处理?

服务端CORS的支持,浏览器插件,配置devserver

DevServer | webpack 中文文档

// 原始请求:报跨域问题
const sendCorsHttp = async () => {
  const res = await axios({
    methods: 'GET',
    url: 'https://wis.qq.com/weather/common?source=pc&weather_type=observe&province=河北&city=衡水&county=桃城区'
  })
  console.log('res::', res)
}
sendCorsHttp()

2、配置修改

  // webpack.config.js
  // 开发服务器配置
  devServer: {
    // 启用热更新
    hot: true,
    // 自动打开浏览器
    open: true,
    // 端口号
    port: 9258,
    // 代理配置
    proxy: {
      // 请求路径
      '/qqwis': {
        // 转发请求前修改请求头中的Origin字段
        changeOrigin: true,
        // 目标服务器地址
        target: 'https://wis.qq.com',
        // 路径重写/替换
        pathRewrite: { '^/qqwis': '' }
      }
    }
  }
// 原始请求:报跨域问题
const sendCorsHttp = async () => {
  const res = await axios({
    methods: 'GET',
    url: '/qqwis/weather/common?source=pc&weather_type=observe&province=河北&city=衡水&county=桃城区'
  })
  console.log('res::', res)
}
sendCorsHttp()

Tree Shaking 

摇树,把应用程序想象成一棵树,枯萎死去的树叶,这棵树已经对这片树叶断开了养分供给,在摇树的时候就会将这些枯萎死去的树叶摇落掉,只剩下还在用的树叶。

映射到打包中,这项操作就是在去除程序不需要的代码,避免有些代码虽有导入但没使用最后却被打包进去,造成不必要的字符占用。

Tree Shaking | webpack 中文文档

1、问题前置

一工具代码文件中对外导出三个工具函数,但实际只用到其中某一个或几个,最后打包的时候却会把其他没有导入的函数也打包进去,如果这样的定义但没有使用的代码较多,将会占据大量的字符空间。

// util.js
export const square = (x, y) => {
  return x * y
}

export const add = (x, y) => {
  return x + y
}

export const getRandom = (min, max) => {
  const minCeiled = Math.ceil(min)
  const maxFloored = Math.floor(max)
  return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled)
}
// index.js
import { getRandom } from '../utils/math.js'
const myRandom = getRandom(10, 20)
console.log('得到的随机数是:', myRandom)

 

2、配置修改

  • webpack默认在生产环境下启用TreeShaking;
    • webpack.config.js ——> mode设置为production
    • package.json ——> build配置production
  • useExports
    • 开发模式下打开usedExpoert可以查看目标模块是否被标注为未使用
    • optimization: {
         usedExports: true, // 把未被使用的export被标记出来
      },

// package.json
{
    "sideEffects":false,
}

  • sideEffects 
  • 在一个纯粹的 ES 模块世界中,很容易识别出哪些文件有副作用,有副作用的代码不会被删除掉。然而,我们的项目无法达到这种纯度,所以,此时有必要提示 webpack 编译器哪些代码是纯粹的。
  • 如果所有代码都不包含副作用,我们就可以简单地将该属性标记为 false 以告知 webpack 可以安全地删除未使用的导出内容。
  • 副作用代码莫得了???
    • 我的CSS也给抹掉了?
      • 因为认为没用到;
    • 我的xxx.js里的代码怎么没执行?甚至我都找不到它?
      • 因为认为没用到;
    • sideEffects来处理
      • package.json中添加配置项sideEffects
{
    "sideEffects":[ "**/*.css"]
}

 

  • 注意:
    • 模块必须采用ES6 Module语法,因为TreeShaking依赖ES6的静态语法:import,export;
    • 而CommonJS支持动态加载模块,在加载前是无法确定模块是否有被调用,所以不支持TreeShaking。

图片压缩

1、问题前置

项目中除了代码文件可以压缩之外,部分图片文件也可以压缩。静态图片资源压缩后,整个项目大小会减少很多。在进行图片下载时,下载完成时间也会缩短,继而让页面可以尽快的呈现出来。

对于图片的压缩可以采用下面这个插件image-minimizer-webpack-plugin 

image-minimizer-webpack-plugin - npm

通过文档说明可以看出,该插件可以配合4种工具来实现图片的压缩

  • imagemin:默认优化图片,稳定且适用于所有类型的图像;
  • squoosh:(已废弃)在实验模式下处理jpg\png\webp等图片;
  • sharp:高性能的Node.js图片处理,调整和压缩jpeg\png\webp\avif\tiff;
  • svgo:用于优化svg矢量图形文件的工具,仅支持svg文件。

2、配置修改

npm示例:

安装及配置:

  • 注意:sharp最新版本问题
    • 查看npm中的versions,找一下其他的版本(使用量比较高的,并且是旧一点的版本)
    • 还可能出现对于系统运行平台的要求:Could not load the "sharp" module using the darwin-arm64 runtime
    • 调整node版本(nvm)
    • 可能会出现对于node版本的要求:Requires ^18.17.0 || ^20.3.0 || >=21.0.0
npm i image-minimizer-webpack-plugin sharp -D 
// webpack.config.js
const ImageMinimizer = require('image-minimizer-webpack-plugin')
module.exports={
  // ...
  
  // 先能够支持对图片的处理
  module:{
      rules:[
          {
          test: /\.(png|jpeg|jpg|gif)$/i,
          // 关键配置:仅匹配背景图路径(示例:src/css/imgs/ 目录)
          include: path.resolve(__dirname, 'src/css/imgs'),
          type: 'asset/resource',
          generator: {
            filename: 'bg-images/[name].[contenthash][ext]'
          }
        },
        {
          test: /\.(png|jpeg|jpg|gif)$/i,
          // 关键配置:排除背景图路径,匹配其他图片(示例:src/assets/images/ 目录)
          exclude: path.resolve(__dirname, 'src/css/imgs'),
          type: 'asset/resource',
          generator: {
            // 为什么这里没有用哈希编码命名?因为资源名称涉及网络动态设定。
            filename: 'images/[name][ext]'
          }
        }
     ]
  },
  optimization: {
    minimize: true,
    minimizer: [
      new ImageMinimizer({
        minimizer: {
          implementation: ImageMinimizer.sharpMinify,
          options: {
            encodeOptions: {
              png: {
                quality: 80
              }
            }
          }
        }
      })
    ]
  },
}


网站公告

今日签到

点亮在社区的每一天
去签到