1.拆分开发环境和生产环境配置
很多配置在开发环境和生产环境存在不一致的情况,比如开发环境没有必要设置缓存,生产环境需要设置公共路径等等。
2.公共路径
使用publicPath配置项,可以通过它指定应用程序中所有资源的基础路径。
webpack.config.js中output增加publicPath:
打开app.html发现每个路径前多了一个域名,这个域名可以指定为前端域名或cdn服务器域名都可以:
3.环境变量
环境变量可以帮我们消除webpack.config.js配置文件中的开发环境和生产环境的差异。
调整webpack.config.js为函数形式,并且将mode修改为通过env进行传参;
当需要使用生产环境时:npx webpack --env production
使用terser-webpack-plugin 对script文件进行压缩;
安装:npm install terser-webpack-plugin -D
配置一下:
执行npx webpack --env production后代码会被打包压缩生成LICIENCE文件;
执行npx webpack --env development后没有被压缩;
4.拆分配置文件
如果都用判断的方法来区分生产和开发环境,很麻烦,所以将配置文件拆分为两个,专门应对两个环境。
创建一个config文件夹,分别存放两个js文件对应两个环境:
在开发环境将mode设置为‘development’,去除不需要的一些插件例如压缩、公共域名等;
在生产环境将mode设置为‘production’,去除不需要的一些插件例如dev-server等;
运行时指定配置文件 npx webpack -c ./config/webpack.config.prod.js或 npx webpack -c ./config/webpack.config.dev.js即可。
5.npm脚本
每次打包或者启动服务时,要在命令行输入很长的命令,如何优化?
在package.json中配置script:
这样就可以直接执行npm run start和npm run build.
如果想要隐藏一些性能提示信息,可以在performance中配置:
6.提取公共配置
生产环境和开发环境分开配置后发现,会有大量重复的代码,可否抽离到一个配置文件,作为公共配置?
创建一个config文件夹下分别放三个js文件:公共、开发、生产
在webpack.config.common.js中存放二者共有的代码;其余两个环境js文件保留自己特有的代码。
简化后的webpack-config-dev.js:
简化后的webpack-config-prod.js:
然后在config文件夹下的webpack.config.js中合并环境配置,使用webpack-merge:
通过env携带参数指定环境配置,所以package.json脚本中也要修改:
tips:
开发环境:
- 目标是快速开发和调试,配置注重灵活性和调试能力。
- 使用未优化的代码和资源,支持本地开发工具和代理。
构建工具配置
- 使用
webpack-dev-server
或类似工具,提供实时重新加载和热更新。 - 使用 Source Maps 来帮助调试(如
devtool: 'eval-source-map'
)。 - 不进行代码压缩和优化,保留原始代码结构以便调试。
静态资源处理
- 直接提供未优化的静态资源(如图片、字体),不进行压缩或其他处理。
- 使用
publicPath: '/'
或自定义路径来提供静态文件。
API 请求
- 使用代理(如
webpack-dev-server
的proxy
配置)将请求转发到本地或远程开发服务器。 - 可能使用 Mock API 来模拟数据。
日志与调试
- 启用详细的日志输出(如
console.log
和调试信息)。 - 使用开发工具(如 Chrome DevTools)来调试代码。
依赖管理
- 安装所有依赖(包括开发依赖和生产依赖)。
- 可能使用未发布的库或本地构建的工具。
生产环境:
- 目标是高性能、稳定性和安全性,配置注重优化和保护。
- 使用压缩、混淆、缓存和 CDN 等技术提升用户体验。
构建工具配置
- 使用 Webpack 或其他构建工具进行代码压缩(如
TerserPlugin
)、混淆和优化。 - 禁用 Source Maps(或生成生产环境专用的 Minified Source Maps)。
- 使用 Tree Shaking 和 Code Splitting 来减少代码体积和加载时间。
- 对静态资源进行优化(如图片压缩、字体转 WebP)并上传到 CDN。
静态资源处理
- 使用缓存控制(如
Cache-Control
头部)来提升资源加载速度。 - 配置
publicPath: '/static/'
或 CDN 路径。
API 请求
- 直接请求真实的 API 服务器,可能需要配置 HTTPS 和 CORS。
- 优化 API 请求(如使用 GraphQL 或合并请求)以减少延迟。
日志与调试
- 移除或禁用所有调试代码(如删除
console.log
)。 - 使用错误日志记录工具(如 Sentry、ELK)来监控和分析生产环境的问题。
依赖管理
- 只安装生产依赖(如
npm install --production
)。 - 使用经过测试和稳定的依赖库。