devserver
1、问题前置
平时开发过程中对于跨域问题怎么处理?
服务端CORS的支持,浏览器插件,配置devserver
// 原始请求:报跨域问题
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
摇树,把应用程序想象成一棵树,枯萎死去的树叶,这棵树已经对这片树叶断开了养分供给,在摇树的时候就会将这些枯萎死去的树叶摇落掉,只剩下还在用的树叶。
映射到打包中,这项操作就是在去除程序不需要的代码,避免有些代码虽有导入但没使用最后却被打包进去,造成不必要的字符占用。
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
- 我的CSS也给抹掉了?
{
"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
}
}
}
}
})
]
},
}