上海网站建设工作室,wordpress远程路径不对,朝阳市做网站的公司,张家口建设局网站webpack打包体积优化
加载慢原因分析及解决
一个是打包体积的优化#xff0c;另一个是代码层面的优化
1》首先通过Network面板发现vendor.js体积过大#xff0c;网路良好情况下加载时间太长#xff09;#xff0c;vendor体积太大#xff0c;加载花了3s#xff1f;后来…webpack打包体积优化
加载慢原因分析及解决
一个是打包体积的优化另一个是代码层面的优化
1》首先通过Network面板发现vendor.js体积过大网路良好情况下加载时间太长vendor体积太大加载花了3s后来发现 js 没开启nginx压缩
2》通过 webpack-bundle-analyzer 来具体分析进一步体积过大的原因进一步进行打包优化
打包体积优化方案
1》开启gzip压缩
压缩原理简单的理解就是将相同的内容用两者之间的距离和相同内容的长度来替换后面的内容从而使整个文件变小。所以文件中代码的重复率越高那么压缩的效率就越高使用 gzip 的收益也就越大
如何判断是否开启
请求头服务端会通过客户端发送的请求头中的 Accept-Encoding 字段来确定是否支持
Accept-Encoding:gzip, deflate, br响应头表示当前资源会使用 gzip 压缩提示客户端解压使用。
Content-Encoding:gzipnginx中开启gzip
http {gzip on;gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xmlrss text/javascript;
}属性说明gzipon/off,是否开启gzip压缩gzip_types压缩哪些文件类型gzip_min_lengtheg10k;大于10k的文件才会进行压缩小于10k可能压缩后反而变大gzip_buffers获取多少内存用于缓存压缩结果eg: 16 8k 表示使用16个缓冲区每个缓冲区大小为8KBgzip_comp_level压缩比1~9越小压缩效果越差但是越大处理越慢所以一般取中间值gzip_static on优先匹配 gzip 文件来返回如果没有就寻找相应资源进行 gzip 压缩再返回
优点减小文件体积页面加载更快
缺点开启 gzip 后会额外的增加很多 cpu 的开销会对服务器产生一定压力客户端解压也需要cpu开销不过客户端还好这也是不建议把压缩率设置太高的原因。另外对图片的压缩支持不太好会出现体积变大或图片失真的问题
webpack开启gzip打包
通过插件compression-webpack-plugin来生成.gz文件
npm i -D compression-webpack-pluginwebpack增加配置
// 最好是先判断以下环境变量是否是生产环境的打包
const CompressionWebpackPlugin require(compression-webpack-plugin)
if (process.env.NODE_ENV production) {webpackConfig.plugins.push(new CompressionWebpackPlugin({filename: [path].gz[query],// 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径 [query] 会被替换成查询字符串。默认值是 [path].gz[query]。algorithm: gzip,// 算法默认gziptest: \\.(js|css))$,// 所有匹配该正则的资源都会被处理。默认值是全部资源。// 这里只匹配了js、css文件threshold: 10240,//只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。minRatio: 0.8// 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。}))
}添还需要在nginx配置gzip_static on;这样nginx 会优先匹配 gzip 文件来返回如果没有就寻找相应资源进行 gzip 压缩再返回
优点减少了服务器压缩文件的压力
缺点打包时间变长
2》代码压缩
对于jsterser-webpack-plugin optimization: {minimize: true,,},minimizer: [new TerserPlugin({parallel: true, //开启并行压缩可以加快构建速度}),],对于css css-minimizer-webpack-plugin optimization: {minimizer: [new cssMinimizerPlugin({parallel: true})],},3》分包优化
webpack5中splitChunks可以进行分包优化 optimization: {splitChunks: {chunks: all,cacheGroups: {echarts: {name: chunk-echarts,priority: 20,test: /[\\/]node_modules[\\/]_?echarts(.*)/,},},},},4》通过cdn方式引入外部库
**externals **引入外部库, 无需webpack打包处理 externals: {echarts: echarts,},在html中引入 script srchttps://cdn.jsdelivr.net/npm/echarts5.4.0/dist/echarts.min.js/script组件中无需引入可以直接使用echarts const myChart echarts.init(dom)5》source-map
测试环境 devtool: eval-cheap-module-source-map生产环境 devtool: false devtool: nosources-source-map不同source-map的选择
false不会有sourcemap
eval- 生成source-map,不会生成额外的 .map文件,而是在eval 函数内附加 source map推荐在开发环境中使用
inline-不会生成 .map文件但是会将SourceMap内联到原始文件中
hidden- source map 但是不会将其关联
nosources- sourcemap 中不带源码 但会有准确的错误行列信息 避免源码泄露
cheap- 忽略”列“信息source map 只有“行”映射可以加快打包速度
对于开发环境通常希望更快速的 source map需要添加到 bundle 中以增加体积为代价但是对于生产环境则希望更精准的 source map需要从 bundle 中分离并独立存在
6》tree-shaking
在webpack5之前如果一个文件中引用多个函数却使用一个函数那么多个函数都会被打包
但是webpack5能解析出依赖图谱去除最终没有被使用的代码生产模式下会进行 tree-shaking
复制代码webpack5是有自动的tree-shaking
7》路由懒加载
路由懒加载可以将不同的路由对应的内容打包到不同文件中而且用户访问对应路由时才会加载相应的组件静态导入时所有路由组件都会被打包到同一个文件中
为什么按需引入没有是打包体积减小反而更大
在使用ant-design-vue的时候发现按需引入组件打包体积反而更大了
原因是一些公用的东西依赖等如果是一起打包就只要引用打包一次按需引入则每个组件需要引用一份就会打包进去一次
对于只用了很少组件的第三方库比如本测试的echarts按需引入会有很明显的优化效果但是如果使用了很多按需引入不一定更好
