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 ～
