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

时间 2019-11-08

标签 react 系列 webpack 环境搭建打包性能优化栏目 React 繁體版

原文原文链接

React系列---Webpack环境搭建（一）手动搭建
 React系列---Webpack环境搭建（二）不一样环境不一样配置
React系列---Webpack环境搭建（三）打包性能优化javascript

实际项目，动辄上千个模块，打包花1分钟以上是很常见的。咱们构建的时候，每每但愿本身的代码和第三方库（vendors）能够分开打包，由于不涉及到升级第三方库时，就不必每次浪费打包时间在这上面。html

Dll（动态连接库）是Webpack后面加入的功能，Dll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯粹的依赖库，它自己不能运行，是用来给你的app引用的。java

打包dll的时候，Webpack会将全部包含的库作一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只须要读取这个manifest文件，就能够了。react

这么一来有几个好处：webpack

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

如何使用呢？git

首先要先创建一个dll的配置文件，entry只包含第三方库。
webpack.dll.config.js：github

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保持一致。web

修改package.json，增长dll命令：npm

"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库：json

npm run dll

能够看到lib目录下生成了两个文件：

修改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

能够看到，入口文件里依赖的react，moment模块，直接引用了dll。

对比一下不作分离的状况下打包的结果：

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

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

React系列---Webpack环境搭建（一）手动搭建
 React系列---Webpack环境搭建（二）不一样环境不一样配置React系列---Webpack环境搭建（三）打包性能优化