iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何利用Webpack来优化前端性能
  • 142
分享到

如何利用Webpack来优化前端性能

2024-04-02 19:04:59 142人浏览 薄情痞子
摘要

本篇内容主要讲解“如何利用webpack来优化前端性能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何利用WEBpack来优化前端性能”吧!一、背景随着前端的

本篇内容主要讲解“如何利用webpack优化前端性能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何利用WEBpack来优化前端性能”吧!

如何利用Webpack来优化前端性能

一、背景

随着前端的项目逐渐扩大,必然会带来的一个问题就是性能

尤其在大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面卡顿甚至奔溃

一般项目在完成后,会通过webpack进行打包,利用webpack对前端项目性能优化是一个十分重要的环节

二、如何优化

通过webpack优化前端的手段有:

  • js代码压缩

  • CSS代码压缩

  • html文件代码压缩

  • 文件大小压缩

  • 图片压缩

  • Tree Shaking

  • 代码分离

  • 内联 chunk

JS代码压缩

terser是一个javascript的解释、绞肉机、压缩机的工具集,可以帮助我们压缩、丑化我们的代码,让bundle更小

在production模式下,webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它,配置方法如下:

const TerserPlugin = require('terser-webpack-plugin') module.exports = {     ...     optimization: {         minimize: true,         minimizer: [             new TerserPlugin({                 parallel: true // 电脑cpu核数-1             })         ]     } }

属性介绍如下:

  • extractComments:默认值为true,表示会将注释抽取到一个单独的文件中,开发阶段,我们可设置为 false ,不保留注释

  • parallel:使用多进程并发运行提高构建的速度,默认值是true,并发运行的默认数量:os.cpus().length - 1

  • terserOptions:设置我们的terser相关的配置:

  • compress:设置压缩相关的选项,mangle:设置丑化相关的选项,可以直接设置为true

  • mangle:设置丑化相关的选项,可以直接设置为true

  • toplevel:底层变量是否进行转换

  • keep_classnames:保留类的名称

  • keep_fnames:保留函数的名称

CSS代码压缩

CSS压缩通常是去除无用的空格等,因为很难去修改选择器、属性的名称、值等

CSS的压缩我们可以使用另外一个插件:css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin -D

配置方法如下:

const CSSMinimizerPlugin = require('css-minimizer-webpack-plugin') module.exports = {     // ...     optimization: {         minimize: true,         minimizer: [             new CssMinimizerPlugin({                 parallel: true             })         ]     } }

Html文件代码压缩

使用HtmlWebpackPlugin插件来生成HTML的模板时候,通过配置属性minify进行html优化

module.exports = {     ...     plugin:[         new HtmlwebpackPlugin({             ...             minify:{                 minifyCSS:false, // 是否压缩css                 collapseWhitespace:false, // 是否折叠空格                 removeComments:true // 是否移除注释             }         })     ] }

设置了minify,实际会使用另一个插件html-minifier-terser

文件大小压缩

对文件的大小进行压缩,减少Http传输过程中宽带的损耗

npm install compression-webpack-plugin -D
new ComepressionPlugin({     test:/\.(css|js)$/,  // 哪些文件需要压缩     threshold:500, // 设置文件多大开始压缩     minRatio:0.7, // 至少压缩的比例     alGorithm:"gzip", // 采用的压缩算法 })

图片压缩

一般来说在打包之后,一些图片文件的大小是远远要比 js 或者 css 文件要来的大,所以图片压缩较为重要

配置方法如下:

module: {   rules: [     {       test: /\.(png|jpg|gif)$/,       use: [         {           loader: 'file-loader',           options: {             name: '[name]_[hash].[ext]',             outputPath: 'images/',           }         },         {           loader: 'image-webpack-loader',           options: {             // 压缩 jpeg 的配置             mozjpeg: {               progressive: true,               quality: 65             },             // 使用 imagemin**-optipng 压缩 png,enable: false 为关闭             optipng: {               enabled: false,             },             // 使用 imagemin-pngquant 压缩 png             pngquant: {               quality: '65-90',               speed: 4             },             // 压缩 gif 的配置             gifsicle: {               interlaced: false,             },             // 开启 webp,会把 jpg 和 png 图片压缩为 webp 格式             webp: {               quality: 75             }           }         }       ]     },   ] }

Tree Shaking

Tree Shaking 是一个术语,在计算机中表示消除死代码,依赖于ES  Module的静态语法分析(不执行任何的代码,可以明确知道模块的依赖关系)

在webpack实现Trss shaking有两种不同的方案:

  • usedExports:通过标记某些函数是否被使用,之后通过Terser来进行优化的

  • sideEffects:跳过整个模块/文件,直接查看该文件是否有副作用

两种不同的配置方案, 有不同的效果

usedExports

配置方法也很简单,只需要将usedExports设为true

module.exports = {     ...     optimization:{         usedExports     } }

使用之后,没被用上的代码在webpack打包中会加入unused harmony export mul注释,用来告知 Terser  在优化时,可以删除掉这段代码

如下面sum函数没被用到,webpack打包会添加注释,terser在优化时,则将该函数去掉

如何利用Webpack来优化前端性能

sideEffects

sideEffects用于告知webpack  compiler哪些模块时有副作用,配置方法是在package.JSON中设置sideEffects属性

如果sideEffects设置为false,就是告知webpack可以安全的删除未用到的exports

如果有些文件需要保留,可以设置为数组的形式

"sideEffecis":[     "./src/util/fORMat.js",     "*.css" // 所有的css文件 ]

上述都是关于javascript的tree shaking,css同样也能够实现tree shaking

css tree shaking

css进行tree shaking优化可以安装PurgeCss插件

npm install purgecss-plugin-webpack -D
const PurgeCssPlugin = require('purgecss-webpack-plugin') module.exports = {     ...     plugins:[         new PurgeCssPlugin({             path:glob.sync(`${path.resolve('./src')}*`), {nodir:true}// src里面的所有文件             satelist:function(){                 return {                     standard:["html"]                 }             }         })     ] }

paths:表示要检测哪些目录下的内容需要被分析,配合使用glob

默认情况下,Purgecss会将我们的html标签的样式移除掉,如果我们希望保留,可以添加一个safelist的属性

代码分离

将代码分离到不同的bundle中,之后我们可以按需加载,或者并行加载这些文件

默认情况下,所有的JavaScript代码(业务代码、第三方依赖、暂时没有用到的模块)在首页全部都加载,就会影响首页的加载速度

代码分离可以分出出更小的bundle,以及控制资源加载优先级,提供代码的加载性能

这里通过splitChunksPlugin来实现,该插件webpack已经默认安装和集成,只需要配置即可

默认配置中,chunks仅仅针对于异步(async)请求,我们可以设置为initial或者all

module.exports = {     ...     optimization:{         splitChunks:{             chunks:"all"         }     } }

splitChunks主要属性有如下:

  • Chunks,对同步代码还是异步代码进行处理

  • minSize:拆分包的大小, 至少为minSize,如何包的大小不超过minSize,这个包不会拆分

  • maxSize:将大于maxSize的包,拆分为不小于minSize的包

  • minChunks:被引入的次数,默认是1

内联chunk

可以通过InlineChunkHtmlPlugin插件将一些chunk的模块内联到html,如runtime的代码(对模块进行解析、加载、模块信息相关的代码),代码量并不大,但是必须加载的

const InlineChunkHtmlPlugin = require('React-dev-utils/InlineChunkHtmlPlugin') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {     ...     plugin:[         new InlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/] }

到此,相信大家对“如何利用Webpack来优化前端性能”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 如何利用Webpack来优化前端性能

本文链接: https://www.lsjlt.com/news/68447.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何利用Webpack来优化前端性能
    本篇内容主要讲解“如何利用Webpack来优化前端性能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何利用Webpack来优化前端性能”吧!一、背景随着前端的...
    99+
    2024-04-02
  • npm和Webpack如何一起使用来优化前端项目?
    随着前端技术的不断发展,前端项目的复杂性也不断增加。为了提高项目的开发效率和性能,前端工程师们开始使用npm和Webpack来进行项目优化。本文将介绍npm和Webpack如何一起使用来优化前端项目。 什么是npm? npm是Node.js...
    99+
    2023-09-11
    开发技术 numpy npm
  • 如何进行Web前端性能优化
    这篇文章给大家介绍如何进行Web前端性能优化 ,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献。广为人知的优...
    99+
    2023-06-08
  • 如何理解前端性能优化CRP
    这篇文章主要介绍“如何理解前端性能优化CRP”,在日常操作中,相信很多人在如何理解前端性能优化CRP问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解前端性能优化CRP”...
    99+
    2024-04-02
  • 怎么优化前端性能
    这篇文章主要讲解了“怎么优化前端性能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么优化前端性能”吧!一 引发性能问题原因引发性能问题的原因通常不是单方面...
    99+
    2024-04-02
  • 如何提高web前端的性能优化
    如何提高web前端的性能优化,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。前端性能优化是一个不断追求的过程,前面的文章虽然讲解了一些性能优化,但是关于性能优化的路还有很长,很多...
    99+
    2023-06-08
  • 前端发开中如何进行性能优化
    小编给大家分享一下前端发开中如何进行性能优化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!content方面1,减少HTTP请求...
    99+
    2024-04-02
  • web前端性能优化总结
    本篇内容介绍了“web前端性能优化总结”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.原则多使用内存,缓...
    99+
    2024-04-02
  • 网站性能优化:前端关键步骤来增加效能
    在当今互联网高速发展的时代,网站已成为连接企业与用户的重要窗口。然而,随着网站规模的不断扩大和功能的日益复杂,网站性能问题也日益突出。用户对网站的体验质量要求越来越高,因此,优化网站性能成为了每个前端开发人员都应该关注的重要问题...
    99+
    2024-02-03
    性能提升 前端优化 关键步骤 压缩技术 异步加载 延迟加载
  • JavaScriptwebpack模块打包器如何优化前端性能
    目录一、webpack的使用背景二、webpack如何优化1. JS代码压缩2.CSS代码压缩3. HTML文件压缩4. 文件大小压缩5. 图片压缩6. Tree Shaking7....
    99+
    2022-11-13
    JavaScript webpack JavaScript webpack优化性能
  • 如何利用缓存来优化HTML5 Canvas程序的性能
    这篇文章主要介绍“如何利用缓存来优化HTML5 Canvas程序的性能”,在日常操作中,相信很多人在如何利用缓存来优化HTML5 Canvas程序的性能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2024-04-02
  • 前端面试官常问的问题:如何进行前端性能优化?
    前端性能优化一直是前端开发者们在工作中不可避免要面对的重要问题。在面试中,面试官通常会问及候选人对于前端性能优化的理解和实践经验。本文将详细探讨前端性能优化的重要性、常见的优化方案以及...
    99+
    2024-04-02
  • JavaScript 浏览器开发者工具,前端性能优化利器
    JavaScript 浏览器开发者工具(例如 Chrome DevTools、Firefox Developer Tools)是前端开发人员必不可少的工具,提供了广泛的功能来调试、优化和维护 Web 应用程序。这些工具特别适用于提高前端性...
    99+
    2024-04-02
  • 前端性能优化的示例分析
    这篇文章给大家分享的是有关前端性能优化的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。反复看下以下三个问题。有木有不同的人问过你:什么是前端性能优化?有木有不同的面试官问...
    99+
    2024-04-02
  • Webpack性能优化之DLL有什么用
    这篇文章主要介绍了Webpack性能优化之DLL有什么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言在用 Webpack 打包的时候,...
    99+
    2024-04-02
  • 如何理解Vue实现原理与前端性能优化
    这篇文章主要介绍“如何理解Vue实现原理与前端性能优化”,在日常操作中,相信很多人在如何理解Vue实现原理与前端性能优化问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解...
    99+
    2024-04-02
  • 如何提高javascript和css网站前端的性能优化
    本篇文章为大家展示了如何提高javascript和css网站前端的性能优化,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。CSS性能优化1、把样式表置于顶部现把样式表放到文档的< head /&...
    99+
    2023-06-08
  • 如何在PHP开发中优化前端性能和用户体验?
    如何在PHP开发中优化前端性能和用户体验?当今互联网的时代,用户对网页的加载速度和交互体验提出了越来越高的要求。作为开发者,我们需要在PHP开发中优化前端性能和用户体验,以提供更好的网站体验。本文将介绍一些优化的方法和技巧,帮助开发者提升网...
    99+
    2023-11-02
    PHP开发 用户体验优化 前端性能优化
  • 聊聊Flare应用前后端性能优化问题
    目录写在前面应用性能问题分析对于我不适用的功能前端架构中的问题后端架构中的问题针对应用进行改进调整前端实现调整后端实现图标资源优化容器镜像的优化额外的优化最后两周前,在给颜值在线的&...
    99+
    2024-04-02
  • Web前端性能优化方法有哪些
    本篇内容介绍了“Web前端性能优化方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、精简java...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作