浅谈React + Webpack 构建打包优化

前端之家收集整理的这篇文章主要介绍了浅谈React + Webpack 构建打包优化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了React + Webpack 构建打包优化,分享给大家,具体如下:

使用 对 React 代码进行优化

检查没有使用的库,去除 import 引用

按需打包所用的类库,比如 lodash 、 echart 等

lodash 可以采用进行优化。

需要注意的是

在 babel-react-optimize 中使用了 babel-plugin-transform-react-remove-prop-types 这个插件。正常情况下,如果你在代码中没有引用到组件的 PropTypes ,则完全没问题。如果你的组件用到了,那么使用该插件可能会导致问题。

具体见:

Webpack 构建打包优化

Webpack 构建打包存在的问题主要集中于下面两个方面:

  1. Webpack 构建速度慢
  2. Webpack 打包后的文件体积过大

Webpack 构建速度慢

可以使用 Webpack.DDLPlugin , HappyPack 来提高构建速度。具体参见小铭在 DMP DDLPlugin 的文档。原文如下:

Webpack.DLLPlugin

添加一个 webpack.dll.config.js 主要是用到一个 DllPlugin 插件,把一些第三方的资源独立打包,同时放到一个 manifest.json 配置文件中,

这样在组件中更新后,就不会重新 build 这些第三方的资源,

  1. 同时独立配置 dll/vendors.js 文件,提供给 webpack.dll.config.js
  2. 修改 package.json

在 scripts 中添加: "dll": "webpack --config webpack.dll.config.js --progress --colors ",。

执行 npm run dll 以后,会在 dll 目录下生产 两个文件 vendor-manifest.json ,vendor.dll.js

配置 webpack.dev.config.js 文件,加入一个 DllReferencePlugin 插件,并指定 vendor-manifest.json 文件

修改 html

猜你在找的JavaScript相关文章