前端性能优化

  做想做的事,去想去的地方,爱想爱的人,始终如一,Do not give up easily --along

前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配。正因为零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化,所以实际应用中,我们可以把精力更多专注在业务层面上,而无需分心于项目构建上的优化。然而从学习者的角度,我们需要了解webpack在项目的构建和打包压缩过程中做了哪些的优化,以及在原有默认配置上,还可以做哪些性能方面上的改进。最近在完成vue的单页面应用后萌生了一个想法,抛弃掉vue-cli的构建配置,从零开始进行webpack优化,并将过程中的思路和体会分享在这篇文章中。webpack的初始配置在我之前写的另一篇手把手教你从零认识webpack4.0文章中,以下内容也不对基本的webpack配置做过多阐述。

  言归正传,大家不论在平常写代码,还是面试,或者在做项目时,在随着代码量的增加,业务逻辑的处理,项目的性能会越来越差,在浏览页面时体验极差,那该如何解决呢,接下来我就要跟大家说说我了解和学习到的前端性能优化方案,可能有很多不到之处,希望大家见解~

一,优化的方向

对开发者而言,我们希望webpack这个工具可以给我们带来流畅的开发体验。比如,当不断修改代码时,我们希望代码的变更能及时的通知浏览器刷新页面,而不是手动去刷新页面。更进一步的我们希望,代码的修改只会局部更换某个模块,而不是整个页面的刷新。这样可以使我们不需要在等待刷新中浪费很多时间,大大提高了页面的开发效率。

项目部署上线时,性能优化是我们考虑的重点,有两个方向可以作为核心考虑的点,一个是减少HTTP请求,我们知道在网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快,因此,我们要求webpack将多个文件打包成一个或者少量个文件;另一个优化的重点是减少单次请求的时间,也就是尽可能减少请求文件的体积大小。 webpack中在性能优化所做的努力,也大抵围绕着这两个大方向展开。另外在构建项目中,我们也希望能持续的提高构建效率。

  

二, 提升开发效率

开发环境下,我们依然对代码的体积有一定的要求,更小的体积可以让加载速度更快,开发效率更高,当然配置也相对简单。

// webpack.dev.js 开发环境webpack配置module.exports = { devServer: { contentBase: path.join(__dirname, 'dist'), port: 9000, compress: true, // 代码压缩 },}

金沙官网线上,开发过程中,我们希望修改代码的过程中,页面能实时且不需要手动的刷新。因此使用HRM, HMR 既避免了频繁手动刷新页面,也减少了页面刷新时的等待,大幅度提高了开发效率。

// webpack.dev.jsmodule.exports = { devServer: { compress: true, hot: true // 开启配置 }, plugins: [ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), ],}

一、图片优化 

1.原因:
        一个网站中能够最直观、清晰的呈现给用户的还是图片,可以直接的表达网站的主题内容和主题,可以随着图片的增多,在加载的时候,浏览器会去下载这些资源,可能导致网页加载缓慢,对用户
体验极差~

2.图片分类
        1.jpg全名JPEG. JPEG图片是以24位颜色存储单个视图.
        2.png可移植网络图片格式
        3.GIF
        4.Svg可缩放矢量图形是基于可扩展标记语言
        5.Webp和APNG,出现比较晚未被web标准所采纳

3.优化方法
        1.使用精灵图
        2.使用占用空间更小的favion.ico
        3.使用webp图片
        4.上线前对图片压缩,减小占用内纯.

三,构建体积优化

webpack 在构建中提供了不少于7种的sourcemap模式,其中eval模式虽然可以提高构建效率,但是构建后的脚本较大,因此生产上并不适用。而source-map 模式可以通过生成的 .map 文件来追踪脚本文件的 具体位置,进而缩小脚本文件的体积,这是生产模式的首选,并且在生产中,我们需要隐藏具体的脚本信息,因此可以使用 cheap 和module 模式来达到目的。综上,在生产的webpack devtool选项中,我们使用 cheap-module-source-map的配置

// webpack.pro.js 生产webpack配置脚本module.exports = { mode: 'production', devtool: 'cheap-module-source-map', }

以单入口文件而论,通常我们会将页面的所有静态资源都打包成一个JS 文件,这已经实现了1.2 中的优化部分,将代码合并成一个静态资源,减少了HTTP 请求。

二、减少http请求次数

1.原因:
        浏览器在解析dom的时候,大多时候都在请求http加载资源,一个页面可能会有很多的请求,这样大大耗费了性能.

2.解决:
        1)可以将多个资源的加载捆绑成一个资源
        2)可以将多个图片拼接成一张图片,使用x,y坐标实现显示的内容
分离前

金沙官网线上 11.png

但是接下来,我们需要将css代码独立开来,为什么呢?最主要的一点是我们希望更好的利用浏览器的缓存,当单独修改了样式时,独立的css文件可以不需要应用去加载整个的脚本文件,提高效率。并且,当遇到多页面的应用时,可以单独将一些公共部分的样式抽离开来,加载一个页面后,接下来的页面同样可以利用缓存来减少请求。

webpack4.0 中提供了抽离css文件的插件,mini-css-extract-plugin,只需要简单的配置便可以将css文件分离开来

const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = { ··· plugins: [ new MiniCssExtractPlugin({ filename: "[name].[contenthash].css", chunkFilename: "[name].[contenthash].css" }) ], module: { rules: { test: /.$/, use: [process.env.NODE_ENV == 'production' ? MiniCssExtractPlugin.loader : 'style-loader', { loader: 'css-loader', options: { sourceMap: true }, }, "sass-loader"] } } ···}

三、资源加载

1.使用link加载资源不要使用!import
2.link标签放在上部
3.script标签放在底部

原因:js是单线程,加载顺序也是自上而下执行,首先要让最直观的结构和样式加载出来,呈现给用户,然后再加在行为.
分离后

金沙官网线上 22.png

要想优化构建后的体积,不断减少静态资源文件的大小,我们希望webpack帮助我们尽可能压缩文件的体积。对于js 脚本文件而言,webpack4.0 在mode 为‘production’时,默认会启动代码的压缩。除此之外,我们需要手动对html和css 进行压缩。</br> 针对html 的压缩,只需要对html-webpack-plugin进行相关配置。

// webpack.base.js module.exports = { plugins: [ new HtmlWebpackPlugin({ title: 'minHTML', filename: 'index.html', template: path.resolve(__dirname, '../index.html'), minify: { // 压缩 HTML 的配置 collapseWhitespace: true, removeComments: true, useShortDoctype: true } }), ]}

针对css 的压缩, webpack4.0 使用optimize-css-assets-webpack-plugin来压缩单独的css 文件。

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");module.exports = { plugins: [ new OptimizeCSSAssetsPlugin() ],}

对比之下,我们可以看到明显的效果,关于压缩css 更多的配置可以参考optimize-css-assets-webpack-plugin

金沙官网线上 33.png金沙官网线上 44.png

处理完前端的三大块js,html,css后, 接下来优化能想到的是处理图片。前面提到,提升性能的一个重要的条件是降低http请求数,而应用中经常会有大大小小的图片需要处理,对应用中的小图标来说,css sprite 是首选,将各种图标集合成一张大的图片可以很好的减少网络请求数。而对于需要独立开的图片,且大小在合理范围内时,我们可以将图片转换成 base64位编码,内嵌到css 中,同样可以减少请求。

四、延迟加载

1.可以使用懒加载技术

实现:首先展示给用户的是首页,可以让其他页面的内容或者用户看不到的内容延迟可以,只有在触发某个条件的时候再去提前加载.
3.4.1 base64 转换

处理图片资源时,webpack 提供了 file-loader 和url-loader 两个loaders供选择,file-loader 和url-loader 的作用,可以用来解析项目中图片文件的url引入问题。两者的区别在于,url-loader 可以将小于指定字节的文件转为DataURL, 大于指定字节 的依旧会使用file-loader 进行解析

// webpack.base.jsmodule.exports = { module: { rules: [{ test: /.(png|jpe?g|gif|svg|ttf|woff2|woff)?$/, use: [{ loader: 'url-loader', options: { limit: 10000, // 限制大小 } }, ] },}

本文由金沙官网线上发布于Web前端,转载请注明出处:前端性能优化

您可能还会对下面的文章感兴趣: