当前位置：首页 > news >正文

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

news 来源：原创 2025/6/18 12:13:37

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}}}}})]},
}