Webpack项目优化之CDN加速、Gzip压缩和SplitChunks拆分
CDN加速
-
分析:通过把类似 echart、element-ui、lodash 等第三方依赖库单独提取出,从而减小打包的体积大小,关键属性
externals
配置后的依赖插件不会被打包进 chunk 。而使用 CDN 加速、缓存也能加快访问速度。 -
操作:这里我们主要通过
chainWebpack
中配置externals
进行处理。
方式一
在 index.html 中手动引入 cdn 链接。
vue.config.js
配置文件:
const IS_PRO = process.env.NODE_ENV === 'production';
module.exports={
//... 其他基本配置
chainWebpack: (config) => {
if (IS_PRO) {
config.externals({
echarts: 'echarts'
});
}
}
}
public/index.html
文件:
<div id="app"></div>
<!-- 推荐放在 <div id="app"></div> 后面
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
方式二
通过 html-webpack-plugin 将 cdn 注入到 index.html 之中
-
介绍:html-webpack-plugin 的作用是当使用 webpack打包时,创建一个 html 文件,并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。html-webpack-plugin 默认将会在 output.path 的目录下创建一个 index.html 文件, 并在这个文件中插入一个 script 标签,标签的 src 为 output.filename。
vue.config.js
中的 html-webpack-plugin
配置
const cdn={
css:[],
js:['https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js']
}
// 通过 html-webpack-plugin 将 cdn 注入到 index.html 之中
config.plugin('html').tap(args=>{
args[0].cdn=cdn
return args
})
Gzip配置
vue.config.js
通过插件 html-webpack-plugin
配置
const IS_PRO = process.env.NODE_ENV === 'production';
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
module.exports={
//... 其他基本配置
configureWebpack: (config) => {
if (IS_PRO) {
//gzip压缩
config.plugins.push(
new CompressionPlugin({
//asset、algorithm默认值为[path].gz[query]、gzip
// asset: '[path].gz[query]',
// algorithm: 'gzip',
// filename:'',
test: new RegExp('\\.(' productionGzipExtensions.join('|') ')$'),
threshold: 10240,
minRatio: 0.8
})
);
}
}
}
nginx支持 静态压缩 和 动态压缩,对于项目中已有 .gz
文件可以使用静态压缩, 而对于项目中没有已编译的 .gz
文件,可以采用动态压缩利用 nginx gzip
功能,需要对应模块 ngx_http_gzip_static_module 支持。
这里推荐 nginx 动态压缩 和 静态压缩 结合使用会更好:
# 开启和关闭gzip模式
gzip on;
# gizp压缩起点,文件大于1k才进行压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 2;
# 进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
splitChunks 拆包优化
-
分析:
webpack
默认配置下会把所有的依赖和插件都打包到vendors.js
中,有些可能是app.js
。所以,对于大量引入第三方依赖的项目,这个文件会非常的大。而对于在特定页面中才会使用的插件也会造成性能浪费。这时拆分和异步就显得尤为重要了。 -
webpack-bundle-analyzer:包的大小本地打包完成时可以看到,若想更仔细的分析可以通过插件
webpack-bundle-analyzer
vue.config.js
配置文件:
const IS_PRO = process.env.NODE_ENV === 'production';
module.exports={
chainWebpack: (config) => {
config.when(IS_PRO, (config) => { //when 也可以换成 if
//拆包
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
//这里会继承splitChunks下的配置和默认配置,如 上面的 chunks:"all"
//下面的配置优先级更高,会覆盖上面的配置,如 chunks:"initial"
//因为 webpack4 的零配置,会有很多默认配置,所以对于细节和实际未知的项目编译结果时,务必确定并理解默认值的具体逻辑,以排查问题所在。(之前踩过不少坑~)
libs: {
name: 'chunk-libs', //包名称,会和hash值编译生成最终 chunk-libs.8880c0aa.js (hash值会变化,对于缓存优化这里是可以思考的一个点。)
test: /[\\/]node_modules[\\/]/, // 正则过滤依赖包
priority: 10, //设置包的打包优先级
chunks: 'initial' //all 、async、initial
}
vantUI: {
name: 'chunk-vantUI',
priority: 20,
test: /[\\/]node_modules[\\/]_?vant(.*)/
},
echarts: {
name: 'chunk-echarts',
priority: 20,
test: /[\\/]node_modules[\\/]_?echarts(.*)/
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3,
priority: 5,
reuseExistingChunk: true
}
}
});
});
}
}
可以看看最终结果,已经很理想了,压缩后的 gzip
也是非常的小了,非常的nice~ :sparkles:
更多玩法自行探索,也欢迎一起交流 :fire:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbajk
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24