前端空格-前端可以做的性能优化有哪些

2.图片懒加载

在图片即将进入可视区域的时候进行加载

3.使用CSS3代替图片

有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择 CSS3 效果更好

4.图片压缩

压缩方法有两种，一是通过在线网站进行压缩，二是通过 webpack 插件 image-webpack-loader。它是基于 imagemin 这个 Node 库来实现图片压缩的。

5.使用渐进式jpeg

使用渐进式jpeg，会提高用户体验

6.使用 webp 格式的图片

webp 是一种新的图片文件格式，它提供了有损压缩和无损压缩两种方式。在相同图片质量下，webp 的体积比 png 和 jpg 更小。

五、webpack打包优化1.缩小loader 匹配范围

include: path.resolve(__dirname, "./src"),

2.resolve.modules

cad中z空格e空格命令怎么用_全角空格和半角空格_前端空格

resolve.modules用于配置webpack去哪些目录下寻找第三方模块，默认是 node_modules。

寻找第三方，默认是在当前项目目录下的node_modules里面去找，如果没有找到，就会去上一级目录../node_modules找，再没有会去../../node_modules中找，以此类推，和Node.js的模块寻找机制很类似。

如果我们的第三⽅模块都安装在了项⽬根⽬录下，就可以直接指明这个路径。

module.exports={ resolve:{ modules: [path.resolve(__dirname, "./node_modules")] }}

3.resolve.extensions

resolve.extensions在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存在。

如果想优化到极致的话前端空格，不建议用extensionx, 因为它会消耗一些性能。虽然它可以带来一些便利。

4.抽离css

借助mini-css-extract-plugin:本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); { test: /.less$/, use: [ // "style-loader", // 不再需要style-loader，⽤MiniCssExtractPlugin.loader代替  MiniCssExtractPlugin.loader,  "css-loader", // 编译css  "postcss-loader",  "less-loader" // 编译less ] },plugins: [  new MiniCssExtractPlugin({   filename: "css/[name]_[contenthash:6].css",   chunkFilename: "[id].css"  }) ]

5.代码压缩1）JS代码压缩

mode:production，使用的是terser-webpack-plugin

module.exports = {    // ...    optimization: {        minimize: true,        minimizer: [            new TerserPlugin({}),        ]    }}

2）CSS代码压缩

css-minimizer-webpack-plugin

module.exports = {    // ...    optimization: {        minimize: true,        minimizer: [            new CssMinimizerPlugin({})        ]    }}

3）Html文件代码压缩

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

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

4）文件大小压缩

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

npm install compression-webpack-plugin -D

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

5）图片压缩

一般来说在打包之后，一些图片文件的大小是远远要比 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            }          }        }      ]    },  ]}

6.Tree shaking 去除死代码

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

在webpack实现Tree shaking有两种不同的方案：

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

usedExports

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

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

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

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"]                }            }        })    ]}

7.babel-plugin-transform-runtime减少ES6转化ES5的冗余

Babel 插件会在将 ES6 代码转换成 ES5 代码时会注入一些辅助函数。在默认情况下， Babel 会在每个输出文件中内嵌这些依赖的辅助函数代码，如果多个源代码文件都依赖这些辅助函数，那么这些辅助函数的代码将会出现很多次，造成代码冗余。为了不让这些辅助函数的代码重复出现，可以在依赖它们时通过require(‘babel-runtime/helpers/createClass’)的方式导入，这样就能做到只让它们出现一次。babel-plugin-transform-runtime 插件就是用来实现这个作用的，将相关辅助函数进行替换成导入语句，从而减小 babel 编译出来的代码的文件大小。

8.代码分离

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

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

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

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

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

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

splitChunks主要属性有如下：

9.多线程打包提升打包速度六、vue七、react

他们三个的应用场景都是缓存结果前端空格，当依赖值没有改变时避免不必要的计算或者渲染。

React.useMemo是针对值计算的一种“记忆“，当依赖项没有发生改变时，那么无需再去计算，直接使用之前的值，对于组件而言，这带来的一个好处就是，可以减少一些计算，避免一些多余的渲染。当我们遇到一些数据需要在组件内部进行计算的时候，可以考虑一下 React.useMemo

限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

相关文章