手里有一个老项目，进行一波打包优化
如果很老的项目需要
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
chainWebpack: config => {
// 添加资源可视化工具
config.plugins.push(
new BundleAnalyzerPlugin()
)
}
新的就不需要安装这个了 require('webpack-bundle-analyzer')，直接
"build": "vue-cli-service build --report",
就行
先升级成webpack5
首先升级依赖
npm install --save-dev webpack-cli@latest webpack@latest webpack-merge@latest webpack-dev-server@latest
#Webpack升级到最新版
"webpack": "^5.74.0"
#Vuecli组织下的这5个包升级到5.0，如果有其他的包也要升到5.0
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
Ok装完跑一下，跑起来果然报错了，查了一些资料发现是因为webpack5中移除了nodejs核心模块的polyfill自动引入。需要安装 "node-polyfill-webpack-plugin": "^2.0.1",的包
然后在vue-config。js中添加
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
然后在configureweback中push这个plugins
config.plugins.push(new NodePolyfillPlugin())
然后是图片引入bug，暂时用路径代替
Ok全部做完了，现在能跑起来，问题是打包结果甚至变大了，多了4m，令人震惊。
排查后发现
Vue-cli打了2个包，legacy就是老的包，而新的包则是使用<script type=’module’>来进行打包。
可以使用
"legacy": "vue-cli-service build --no module",
"browserslist": [
"> 1%",
"last 2 years",
"not IE 11"
]
来打不同版本的包。
参考文档 <u>https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-build</u>
<script type=’module’>，这对前端开发来说意味着什么？
给 script 标签添加 type=module 属性，就可以让浏览器以 ES Module 的方式加载脚本
type=module 标签既支持内联脚本，也支持加载脚本
参考文档 <u>https://cloud.tencent.com/developer/article/1157519</u>
之后，vue.config.js中的splitChunks将所有的node包全部分开打包。
（webpack建议将包的大小控制在244kb）
基于队头阻塞的原因，指在 HTTP/1.1 中，当浏览器发送多个请求到同一个域名下的服务器时，这些请求会按照顺序排队，前面的请求没有完成时，后面的请求无法开始处理，从而导致阻塞。
如果你的服务器是http1.1的，这个版本一般是并行 4-8 个请求，chorme大概是6个，具体怎么样自己试试，而http2.0中多路复用特性会自动合并多个请求在一个 TCP 连接中进行传输，从而解决了 HTTP/1 中队头阻塞的问题，提高了并发处理能力和性能，可以更加精细的打包。（但是也没必要每个包打成1kb，用那个244kb就挺好的了）
config.optimization.splitChunks({
chunks: "all",
maxInitialRequests: Infinity,
cacheGroups: {
pdfh5: {
name: "_pdfh5", // pdfh5
priority: 99, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
test: /[\\/]node_modules[\\/]_?pdfh5(.*)/,
},
vendor: {
minSize: 200000,
test: /[\\/]node_modules[\\/]/,
name(module) {
let packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
return packageName;
},
reuseExistingChunk: true, //复用其他chunk内已拥有的模块
},
},
});
3 configwebpack中把600kb的momentjs 删掉100个国家的语言，只留下中文，剩174kb
4：gzip 后台设置压缩，设置productionGzip：true
#chainWebpack
if (process.env.NODE_ENV === 'production') {
config.plugin('CompressionPlugin').use(
new CompressionWebpackPlugin({
test: /\.(js|css)$/,
threshold: 10240, // 超过10kb的文件就压缩
deleteOriginalAssets:false, //
minRatio: 0.8,
compressionOptions: { level: 1 },
})
)
}
#nginx
http {
gzip_static on;#加一个这个即可
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
。。。。
}
ngnix也可以直接压缩gzip。在每一次请求时候都会压缩，压缩和解压缩过程会增加 CPU 的消耗，通常来说这个开销是很小的
gzip on; # 开启Gzip
gzip_min_length 1k; # 不压缩临界值，大于1K的才压缩，一般不用改
gzip_buffers 4 16k; # 设置用于处理请求压缩的缓冲区数量和大小。比如32 4K表示按照内存页（one memory page）大小以4K为单位（即一个系统中内存页为4K），申请32倍的内存空间。建议此项不设置，使用默认值。
gzip_comp_level 6; # 压缩级别，1-10，数字越大压缩的越好，时间也越长，看心情随便改吧
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式就行了
gzip_vary on; # 增加"Vary: Accept-Encoding"
2：根据contenthash文件不同来打包，达到一部分缓存一部分不缓存的效果,理想情况，你这一次打包只修改了qqq.vue，那么最终结果只有他会变化，本次版本发版后，客户机器的上版本的缓存依旧能使用。
configureWebpack: {
output: {
filename: '[name]-[chunkhash].js', // 使用 chunkhash 作为文件名的一部分
chunkFilename :`[name]-[chunkhash].js`
},
},
chainWebpack: (config) => {
config.optimization.splitChunks({
chunks: "all",
cacheGroups: {
libs: {
name: "chunk-libs",
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: "initial", // 只打包初始时依赖的第三方插件
},
pdfh5: {
name: "_pdfh5", // pdfh5
priority: 99, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
test: /[\\/]node_modules[\\/]_?pdfh5(.*)/,
},
commons: {
name: "chunk-commons",
test: resolve("src/components"), // 公共组件
minChunks: 2, // 最小引用次数
priority: 5,
reuseExistingChunk: true, // 是否重用已存在的 chunk
},
},
});
# config.optimization.runtimeChunk('single')
#在 Vue CLI 4 及以上版本中，默认情况下已经配置config.optimization.runtimeChunk('single')，因此不需要额外配置即可实现将运行时代码抽离到单独的文件中。
},
