1：webpack5 - 之 生产环境 dist压缩包

package.json

  "devDependencies": {"zip-webpack-plugin": "^4.0.1"},

webpack.pro.js

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const ZipPlugin = require('zip-webpack-plugin') // 打包后 压缩distconst proConfig = {mode: 'production',devtool: 'hidden-source-map',plugins: [// 压缩 zip文件new ZipPlugin({// path: './', //路径名path: 'zip',filename: 'dist.zip' //打包名})]
}module.exports = merge(baseConfig, proConfig)

npm run build效果

2：webpack5 - 之 生产环境 copy静态资源

package.json

  "devDependencies": {"copy-webpack-plugin": "^11.0.0"},

webpack.pro.js

const path = require('path')
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const CopyWebpackPlugin = require('copy-webpack-plugin') // 复制静态资源的插件const proConfig = {mode: 'production',devtool: 'hidden-source-map',plugins: [new CopyWebpackPlugin({patterns: [{from: path.join(__dirname,'../public'),to: 'public',globOptions: {ignore: ['**/.*']}}]})]}module.exports = merge(baseConfig, proConfig)

npm run build效果

3：webpack5 - 之 测试环境 缓存

webpack.dev.js

• cache 缓存

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base');
const devConfig = {mode: 'development',// dev缓存cache: {type: 'memory'},
}
module.exports = merge(baseConfig, devConfig)

npm run dev效果

• 没加缓存前 2550ms
  

• 加缓存前 2402ms
  

4：webpack5 - 之 生产环境 缓存

webpack.pro.js

• cache 缓存

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');const proConfig = {mode: 'production',devtool: 'hidden-source-map',cache: {type: 'filesystem',buildDependencies: {config: [__filename]}},
}module.exports = merge(baseConfig, proConfig)

npm run build效果

• 没有缓存前 2706ms
  

• 有缓存 2693ms
  

5：webpack5 - 之 生产环境 代码切片

webpack.pro.js

const path = require('path')
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');const proConfig = {mode: 'production',devtool: 'hidden-source-map',optimization: {// 代码切片splitChunks: {chunks: 'all',}},plugins: []
}module.exports = merge(baseConfig, proConfig)

npm run build效果

• 没有切片前 4525ms
  

• 切片 4260ms
  

6：webpack5 - 之 多线程打包

package.json

  "devDependencies": {"thread-loader": "^3.0.4"},

webpack.base.js

• 加了 thread-loader 这个处理之

const path = require('path')
const MiniCssExtract = require('mini-css-extract-plugin') // css提取module.exports = {entry: {main: './src/main.js'},output: {publicPath: '',path: path.resolve(__dirname, '../dist'),filename: 'js/[name]_[contenthash:6].js',},// loader相关配置module: {rules: [{test: /\.(scss|css)$/, // 针对 .scss 或者 .css 后缀的文件设置 loaderuse: [// env.development ? 'style-loader' : {loader: MiniCssExtract.loader},'css-loader','postcss-loader','sass-loader' // 使用 sass-loader 将 scss 转为 css]},{test: /\.js$/,use: [{loader: 'babel-loader',options: {cacheDirectory: true},},{loader: 'thread-loader',options: {workers: 3,}}],exclude: /node_modules/},]},plugins: []
}

• 结论，当项目较小时，使用多进程打包反而造成打包时间延长，因为进程之间通信产生的开销比多进程能够节约的时间更长。

7：webpack5 - 之 抽离重复代码 与 最小化 entry chunk

webpack.pro.js

const path = require('path')
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');const proConfig = {mode: 'production',devtool: 'hidden-source-map',cache: {type: 'filesystem',buildDependencies: {config: [__filename]}},optimization: {runtimeChunk: true, // 为运行时代码创建一个额外的 chunk，减少 entry chunk 体积，提高性能// 代码切片splitChunks: {chunks: 'all',// 重复打包问题cacheGroups:{vendors:{ // node_modules里的代码test: /[\\/]node_modules[\\/]/,chunks: "all",// name: 'vendors', 一定不要定义固定的namepriority: 10, // 优先级enforce: true }}}}plugins: []}module.exports = merge(baseConfig, proConfig)

npm run build效果

• 前 4408ms
  

• 后 4325ms
  

webpack5 - 之 生产环境的优化（dist压缩包、copy静态资源、缓存、代码切片、多线程打包、抽离重复代码 与 最小化 entry chunk）相关推荐

1. 查看webpack版本_webpack小结-生产环境构建优化

   刚刚对我们前端项目做了一顿分析优化操作,因为接手时每次构建要花两分钟左右的时间,实在忍受不了,只能动手了.通过这次优化,重新温习了下 webpack 的一些知识.接下来会关于 webpack 展开写几 ...

2. CentOS（5.8/6.4）linux生产环境若干优化实战

   CentOS系统安装之后并不能立即投入生产环境使用,往往需要先经过我们运维人员的优化才行.在此讲解几点关于Linux系统安装后的基础优化操作.注意:本次优化都是基于CentOS(5.8/6.4). 下 ...

3. CentOS（5.8/6.4）linux生产环境若干优化实战------就爱运维

   特别说明:本文来自就爱运维.特和所有博友分享.更多优化,请关注www.92yunwei.com后续内容以及分享. CentOS系统安装之后并不能立即投入生产环境使用,往往需要先经过我们运维人员的优化才 ...

4. 性能测试：记一次生产环境性能测试优化实践

   1. 前言 这篇文章的主题是记录一次程序的性能优化,在优化的过程中遇到的问题,以及如何去解决的. 为大家提供一个优化的思路,首先要声明的一点是,我的方式不是唯一的,大家在性能优化之路上遇到的问题都绝对 ...

5. Webpack 生产环境性能优化之externals

   前言 在实际开发中,我们可能会引入一些第三方库,比如说 elementUI.但是在项目打包的时候,webpack会将main.js 中引入的第三方代码进行打包,为了减小js代码的体积,我们又不希望把它 ...

6. URP渲染管线场景优化实战 2.1静态资源导入及优化——Audio

   2.1 Audio导入设置及优化 2.1.1 借助Asset Checker对项目资源进行检查 首先下载AssetChecker工具包 链接 解压后放入合适位置 打开cmd,cd进入解压后位置 cd换 ...

7. 在生产环境中调试 Angular 应用程序而不显示源映射

   当我们的 Angular 应用程序部署到生产环境时,我们经常会遇到与我们在开发过程中编辑的不同的代码.我们的代码在构建过程中会以各种方式进行修改和优化. TypeScript 被 transpiled ...

8. 十八、部署 Vue.js 项目到生产环境

   本章概要 构建发布版本 部署 项目开发完毕并测试后,就要准备构建发布版本,部署到生产环境. 18.1 构建发布版本 在构建发布版本前,注意将项目代码中用于调试的 alert.debugger.cons ...

9. webpack最新版本_webpack小结-开发环境构建优化

   刚刚对我们前端项目做了一顿分析优化操作,因为接手时每次构建要花两分钟左右的时间,实在忍受不了,只能动手了.通过这次优化,重新温习了下 webpack 的一些知识.接下来会关于 webpack 展开写几 ...

最新文章

1. Spring注解创建Bean的几种方式
2. 怎么在windows安装python模块_如何在windows环境下安装python里的模块
3. 图像化转向名词解释_遥感——数字图像处理名词解释及简单整理
4. php视频上传教程,php上传视频的代码_PHP教程
5. centos7ubuntu搭建Vulhub靶场（推荐Ubuntu）
6. Protobuf生成Java代码(Maven)
7. 《MYSQL必知必会》—1.了解SQL
8. linux中如何记录时间
9. Java网络编程IO模型 --- BIO、NIO、AIO详解
10. 勤哲excel服务器点击修改,用勤哲Excel服务器实现工作任务管理系统
11. 正交匹配追踪算法OMP
12. android荣耀v20圆角适配,AR新玩法 让荣耀V20成为你随身的尺子
13. 熊猫TV技术与直播技术相关
14. 印度软件和中国软件工程师_印度的软件公司类型
15. 长沙哪里学青少年计算机编程,长沙青少年培训编程-青少年编程教育（人工智能编程）...
16. 马士兵Python基础版2020教程P58-P96 PPT笔记+课堂代码
17. Sperax月报 | 2021年8月
18. 【Java小游戏】很简陋的 贪吃蛇 游戏
19. FastDFS图片服务器(分布式文件系统)学习。
20. 服务器一直生成lpk.dll文件

热门文章

1. 2019年211大学计算机排名,浙江有哪些211大学？2019浙江211大学名单排名（1所）
2. Python机器学习引言与基础知识储备
3. STM32F103 低功耗停止模式与待机模式操作
4. 【Java秒杀方案】11.功能开发-【商品秒杀及优化】防止超卖 接口优化（redis预减库存，内存标记减少redis访问，RabbitMQ异步下单） 安全优化（隐藏秒杀接口，验证码，接口防刷）
5. 2020 5 20，100天纪念日，用C语言打印3D动态立体爱心！！！
6. 聊城大学计算机学院 孟晗,聊城大学计算机学院举办2019届学生毕业典礼
7. python爬虫爬取多个页面_Python 爬虫爬取多页数据
8. CentOS7下的PXE无人值守系统安装
9. python机器学习回归树算法
10. ETL流程、数据流图及ETL过程解决方案