借助webpack来优化前端性能

这篇具有很好参考价值的文章主要介绍了借助webpack来优化前端性能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

面试官:说说如何借助webpack来优化前端性能?

借助webpack来优化前端性能,面试系列,前端,webpack,node.js

一、背景

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

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

一般项目在完成后,会通过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来优化前端性能,面试系列,前端,webpack,node.js

sideEffects

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

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

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

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

上述都是关于javascripttree shakingcss同样也能够实现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对前端性能的优化,可以通过文件体积大小入手,其次还可通过分包的形式、减少http请求次数等方式,实现对前端性能的优化文章来源地址https://www.toymoban.com/news/detail-756370.html

参考文献

  • https://whyta.cn/post/9edf57f38014/
  • https://zhuanlan.zhihu.com/p/139498741
  • https://vue3js.cn/interview/

到了这里,关于借助webpack来优化前端性能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 快速搞定前端JS面试 -- 第十二章 运行环境 (页面加载、性能优化、安全)(1)

    4. SSR 5. 懒加载 6. 缓存DOM查询 7. 尽早开始JS执行 8. 防抖 9. 节流 三、安全 1. XSS跨站请求攻击 2. XSRF跨站请求伪造 问题解答 1. 从输入url到显示出页面的整个过程 2. Window.onload和DOMContentLoaded区别 3. 为何把css放在中 4. 为何把js放在最后 5. html中css写在前js写在后的优点 6. 如何入

    2024年04月14日
    浏览(43)
  • 【前端八股文】浏览器系列:性能优化——HTML、CSS、JS、渲染优化

    本系列目录:【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主 性能优化,从以下几个方面来进行。 避免HTML中直接写CSS viewport加速页面渲染 使用语义化标签 减少标签的

    2023年04月20日
    浏览(58)
  • webpack优化前端框架性能

    提升开发体验 提升打包构建速度 减少代码体积 优化代码运行性能 提升开发体验使用 SourceMap 问题:正常情况下,开发环境不输出dist 文件 直接保存在内存中,浏览器控制台source中可以看到, 但是报错提示行数不正确,它会以打包后的行数进行提示 解释:sourceMap 可以生成源

    2024年02月15日
    浏览(45)
  • 如何⽤webpack 来优化前端性能

    如何⽤webpack 来优化前端性能? ⽤webpack 优化前端性能是指优化 webpack 的输出结果,让打包的最终结果在浏览器运⾏快速⾼效。 压缩代码:删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件, 利⽤ cssnano (css-lo

    2024年02月13日
    浏览(37)
  • 前端知识点、技巧、webpack、性能优化(持续更新~)

    可以把  图片转换成  base64  放在src里面   减少服务器请求  但是图片会稍微大一点点 以上的方法不需要一个一个自己转化 可以在webpack  进行 性能优化   (官网有详细描述)

    2024年03月10日
    浏览(45)
  • 用webpack做一些前端打包时的性能优化

    一.webpack 的五个核心概念 1.Entry:入口指示,webpack以哪个文件为入口起点开始打包,分析构建内部依赖图 2.output:输出指示,webpack打包后的资源bundles输出到哪里去,以及如何命名 3.loader :loader让webpack能够去处翻译理那些非js文件(img css…) 4.Plugins :Plugins插件可以用于执行范围

    2024年02月12日
    浏览(49)
  • node.js+NPM包管理器+Webpack打包工具+前端项目搭建

    javascript运行环境(无需依赖html文件) BFF,服务于前端的后端 官网下载安装,node -v查看是否安装成功 ①、创建一个01.js文件 ②、通过CMD命令执行(或者通过工具的集成终端) node 01.js 如果出现权限原因,可以通过管理员方式打开工具 ③、通过浏览器访问http://127.0.0.1:8888 如

    2024年02月07日
    浏览(71)
  • 【前端工程化面试题】如何优化提高 webpack 的构建速度

    使用最新版本的 Webpack 和相关插件 : 每个新版本的 Webpack 都会带来性能方面的改进和优化,因此始终确保你在使用最新版本。同时,更新你的相关插件也是同样重要的。 使用DllPlugin动态链接库: 使用DllPlugin和DllReferencePlugin来将第三方库的代码进行预打包,减少构建时间。这个

    2024年02月19日
    浏览(56)
  • 一份Node.js性能优化技巧指南

    你是一个踏入后端开发领域的前端爱好者吗?🤔 准备好迎接在Node.js错综复杂的景观中惊险刺激的旅程吧!🎢 在这个探险中,我们将探索后端的无数奇迹,从使用Node.js框架快速创建自己的后端,到应对性能分析、测试,深入内存管理。💻🔍 加入我们,揭开C++插件的奥秘,征服子进程

    2024年02月21日
    浏览(45)
  • 前端面试:【性能优化】页面加载性能、渲染性能、资源优化

    嗨,亲爱的前端开发者!在今天的Web世界中,用户期望页面加载速度快、交互流畅。因此,前端性能优化成为了至关重要的任务。本文将探讨三个关键方面的性能优化:页面加载性能、渲染性能以及资源优化,以帮助你构建更快速、响应更快的Web应用程序。 1. 页面加载性能:

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包