前端性能优化实践之 webpack 优化(5)

简介: 前端性能优化实践之 webpack 优化(5)

1、webpack 配置和优化 ?

  • 经典的 webpack 官网

网络异常,图片无法展示
|

  • 两种模式

网络异常,图片无法展示
|

1、重要部分  Tree-shaking 将没有用到的代码 摇晃过滤掉 生产模式 开启了 tree-shaking

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • babel 配置 相关
    网络异常,图片无法展示
    |

2、JS 压缩

网络异常,图片无法展示
|

3、作用域提升 基于es6import require这种语法 babel 配置不要转掉

网络异常,图片无法展示
|

4、babel 插件的按需引入

网络异常,图片无法展示
|

5、babel 辅助函数复用

网络异常,图片无法展示
|

网络异常,图片无法展示
|

2、webpack 依赖优化 ?

1、使用 noParse

网络异常,图片无法展示
|

网络异常,图片无法展示
|

2、使用 DllPlugin

网络异常,图片无法展示
|

  • 使用 方法 简单介绍
1、新建一个 配置文件 webpack.dll.config.js
  2、配置一下 
  3、package.json 中添加一个执行脚本 
  4、跑脚本 build 
  5、引用这部分内容 
  6、结果对比 
复制代码
  • webpack.dll.config.js
const webpack = require("webpack");
module.exports = {
    mode: "production",
    entry: {
        react: ["react", "react-dom"],
    },
    output: {
        filename: "[name].dll.js",
        path: path.resolve(__dirname, "dll"),
        library: "[name]"
    },
    plugins: [
        new webpack.DllPlugin({
            name: "[name]",
            path: path.resolve(__dirname, "dll/[name].manifest.json")
        })
    ]
};
复制代码
  • package.json 中添加脚本

网络异常,图片无法展示
|

  • 跑脚本 build

网络异常,图片无法展示
|

  • 引用这个内容

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 结果对比

使用前打包时间

网络异常,图片无法展示
|

使用后打包时间

网络异常,图片无法展示
|

  • 还有一个问题

网络异常,图片无法展示
|

3、基于 webpack 代码拆分 code splitting ?

  • 为什么要做这件事情 ? 有没有 意义 ?
    网络异常,图片无法展示
    |

  • 基础

网络异常,图片无法展示
|

  • 可以用在 项目中进阶的部分

网络异常,图片无法展示
|

  • 怎么实现呢 ? + 动态引入 组件
1、配置 webpack.config.js
  2、打包测试
  3、并且 配合组件动态引入 添加 loading 
  4、页面效果
复制代码
  • 配置后打包 可看到新增的部分

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 动态引入 例子

网络异常,图片无法展示
|

  • 动态引入 方法

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 页面效果
  • 非常 nice ~ app.bundle.js 已经非常小了

网络异常,图片无法展示
|

4、基于 webpack 资源压缩 ?

网络异常,图片无法展示
|

  • 检查一下项目 有没有做这几个 压缩
  • react 项目 集成了 webpack,那配置文件在那里 ?

网络异常,图片无法展示
|

  • 生产模式下 默认开启 terser 不需要手动 操作
  • css 压缩

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • html 压缩 使用到了模版的功能

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

5、webpack 持久化 缓存怎么做  ?

网络异常,图片无法展示
|

  • 举个例子

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • hash 值的类型   和推荐使用什么 hash

网络异常,图片无法展示
|

  • 如果 和css 需要使用不一样的chunk 则 可在css 中配置 contenthash 内容不同则生成的 hash 值也不一样

网络异常,图片无法展示
|

6、基于 webpack 应用大小监测与分析  ?

网络异常,图片无法展示
|

1、 webpack-chart  alexkuz.github.io/webpack-cha…

1、项目中跑这个命令 webpack --profile --json > stats.json
    2、将项目生成的 stats.json 上传上来就可看
    3、
复制代码

网络异常,图片无法展示
|

  • 有个问题 需要说明一下

网络异常,图片无法展示
|

  • 解决的方式是 使用 npx

网络异常,图片无法展示
|

  • 就可生成 正确的 stats.json

网络异常,图片无法展示
|

2、webpack-bundle-analyzer 体积分析

1、package.json 配置一下 
2、config.js 使用 devtool
3、先 npm run build 然后 npm run analyze
复制代码

网络异常,图片无法展示
|

网络异常,图片无法展示
|

执行 命令后可以打开这样的网页内容

网络异常,图片无法展示
|

  • 可以详细看一下 每一块的内容

3、speed-measure-webpack-plugin 速度分析

1、config.js 配置一下
2、npm run build 
复制代码
  • config.js 配置

网络异常,图片无法展示
|

  • npm run build 之后的结果

网络异常,图片无法展示
|

  • nice~

7、react 按需加载实现方式   ?

  • 基于路由的按需加载,因为 可以使用 webpack 进行多个拆分,但每个部分都会有网络开销,到底是一个网络开销比较大,还是这些累计起来的开销大,存在粒度控制问题
    网络异常,图片无法展示
    |

网络异常,图片无法展示
|

  • 举个例子 说明这个事情
  • App.js 中引入 并新添加一个 About 组件,在 Home.jsx 使用

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|



相关文章
|
3天前
|
缓存 JavaScript 前端开发
探讨如何通过一系列优化策略来提升TypeScript与Webpack的构建性能。
【6月更文挑战第11天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。通过这些方法,可以提升构建速度,提高开发效率。
29 0
|
1天前
|
前端开发 JavaScript 编译器
Svelte框架:编译时优化的高性能前端框架
Svelte是一款由Rich Harris于2016年创建的高性能前端框架,以其编译时优化著称。它将复杂UI逻辑转化为高效的JavaScript,减少运行时开销。Svelte的核心理念是将编译时和运行时的复杂性分离,通过模板语法、组件系统、响应式系统和编译器实现高性能。关键优化策略包括声明式更新、模板内联、计算属性缓存、事件处理优化和代码分割。Svelte提供热模块替换、类型检查和丰富的生态系统,如SvelteKit。其响应式系统基于Reactive Statements,自动更新组件。
7 0
|
2天前
|
缓存 自然语言处理 前端开发
JVM系列8-前端编译与优化
JVM系列8-前端编译与优化
6 0
|
2天前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
25 3
|
4天前
|
缓存 前端开发 JavaScript
前端性能优化技巧
在当今互联网快速发展的时代,前端性能优化成为了开发者们关注的焦点之一。本文将介绍一些实用的前端性能优化技巧,包括减少HTTP请求、压缩代码、图片优化、减少重绘与重排等方面,帮助开发者们提升网站的加载速度和用户体验。
|
6天前
|
前端开发 算法 JavaScript
优化算法在前端性能提升中的应用
随着互联网应用的日益复杂,前端性能优化成为开发者关注的焦点。本文探讨了优化算法在前端性能提升中的重要作用,包括对JavaScript代码的优化、资源加载的算法选择以及页面渲染的优化策略。通过合理应用优化算法,可以有效提升前端应用的性能和用户体验。
|
11天前
|
存储 缓存 前端开发
全面解析:前端超大文件下载的关键技巧与优化策略
全面解析:前端超大文件下载的关键技巧与优化策略
17 1
全面解析:前端超大文件下载的关键技巧与优化策略
|
30天前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
50 1
|
30天前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
48 0
|
30天前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
27 0