React系列---Webpack环境搭建(三)打包性能优化

6

React系列---Webpack环境搭建(一)手动搭建
React系列---Webpack环境搭建(二)不同环境不同配置
React系列---Webpack环境搭建(三)打包性能优化


实际项目,动辄上千个模块,打包花1分钟以上是很常见的。我们构建的时候,往往希望自己的代码和第三方库(vendors)可以分开打包,因为不涉及到升级第三方库时,就没必要每次浪费打包时间在这上面。

Dll(动态链接库)是Webpack后面加入的功能,Dll这个概念应该是借鉴了Windows系统的dll。一个dll包,就是一个纯粹的依赖库,它本身不能运行,是用来给你的app引用的。

打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个manifest文件中,而引用dll的代码(dll user)在打包的时候,只需要读取这个manifest文件,就可以了。

这么一来有几个好处:

  1. Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。
  2. App部分代码修改后,只需要编译app部分的代码,dll部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度。
  3. 假设你有多个项目,使用了相同的一些依赖库,它们就可以共用一个dll。

如何使用呢?

首先要先建立一个dll的配置文件,entry只包含第三方库。
webpack.dll.config.js:

const path = require('path')
const webpack = require('webpack')

const ROOT_PATH = path.resolve(__dirname);

const vendors = [
  'react',
  'react-dom',
  'react-redux',
  'react-router',
  'react-router-redux',
  'redux',
  'redux-actions',
  'antd',
  'moment',
];

module.exports = {
  entry: {
    vendor: vendors
  },
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: '[name].dll.js',
    library: '[name]_lib',
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve(ROOT_PATH, 'lib', 'manifest.json'),
      name: '[name]_lib',
      context: ROOT_PATH,
    }),
  ],
}

webpack.DllPlugin的选项中,path是manifest文件的输出路径;name是dll暴露的对象名,要跟output.library保持一致;context是解析包路径的上下文,这个要跟下面要配置的DllReferencePlugin保持一致。

修改package.json,增加dll命令:

"scripts": {
    "dll": "rimraf ./lib && webpack --config webpack.dll.config.js",
    "start": "webpack-dev-server --hot --progress --config webpack.dev.config.js",
    "build:dev": "rimraf build && webpack --progress --config webpack.dev.config.js",
    "build:test": "rimraf build && webpack --progress --config webpack.test.config.js",
    "build:prod": "rimraf build && webpack --progress --config webpack.prod.config.js"
  },

执行命令,生成第三方依赖dll库:

npm run dll

可以看到lib目录下生成了两个文件:

clipboard.png

修改webpack.base.config.js配置,增加DllReferencePlugin插件配置:

plugins: [
    new webpack.DllReferencePlugin({
        manifest: require(path.resolve(ROOT_PATH, 'lib', 'manifest.json')),
        context: ROOT_PATH,
    })
]

这么一来,已做成dll库的那部分模块,webpack将不会重复打包。
DllReferencePlugin的选项中,context需要跟之前保持一致,这个用来指导Webpack匹配manifest中库的路径;manifest用来引入刚才输出的manifest文件。

最后修改一下模板index.html,增加引用vendor.dll.js文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="../lib/vendor.dll.js"></script>
</body>
</html>

给入口文件再加点依赖模块,方便打包观察:

import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

function Index() {
    return (
      <div className="container">
        <h1>Antd DatePicker!</h1>
        <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
      </div>
    );
}

ReactDOM.render(<Index />, document.getElementById('root'));

export default Index;

运行打包:

npm run build:dev

clipboard.png

可以看到,入口文件里依赖的react,moment模块,直接引用了dll。

对比一下不做分离的情况下打包的结果:
clipboard.png

速度快了,文件也小了。平时开发的时候,修改代码后重新编译的速度会大大减少,节省时间。

代码:https://github.com/zhutx/reac...


React系列---Webpack环境搭建(一)手动搭建
React系列---Webpack环境搭建(二)不同环境不同配置
React系列---Webpack环境搭建(三)打包性能优化


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...