前端性能优化实践之 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 使用
  

• 非常nice ～
  
• 更多内容可查看 loadable-components.com/docs/gettin…