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

Jason_Geng 发布于2019-08-20 17:39 / 2621人阅读

摘要：的选项中，是文件的输出路径是暴露的对象名，要跟保持一致是解析包路径的上下文，这个要跟下面要配置的保持一致。最后修改一下模板，增加引用文件给入口文件再加点依赖模块，方便打包观察运行打包可以看到，入口文件里依赖的，模块，直接引用了。

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

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

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

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

这么一来有几个好处：

Dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。

App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。

假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个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目录下生成了两个文件：

修改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文件：




  
  
  <%= htmlWebpackPlugin.options.title %>

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

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 (
      
        Antd DatePicker!
        
      
    );
}

ReactDOM.render(, document.getElementById("root"));

export default Index;

运行打包：

npm run build:dev

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

对比一下不做分离的情况下打包的结果：

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

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

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

GPU云服务器云服务器 Webpack打包分块系列三 webpack搭建性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83750.html

React系列---Webpack环境搭建（二）不同环境不同配置

摘要：系列环境搭建一手动搭建系列环境搭建二不同环境不同配置系列环境搭建三打包性能优化实际项目中，往往不同环境有不同的构建需求。 React系列---Webpack环境搭建（一）手动搭建React系列---Webpack环境搭建（二）不同环境不同配置React系列---Webpack环境搭建（三）打包性能优化实际项目中，往往不同环境有不同的构建需求。比如开发、测试和生产环境对应的后端接口地...

coordinate35 2019-08-20 17:35 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
2017-07-01 前端日报

摘要：前端日报精选腾讯前端团队社区源码分析入门指南一些关于使用的心得基本类型与引用类型知多少掘金中文第期框架选型周刊第期入门系列模块车栈重构基于的网络请求库某熊的全栈之路的那些奇技淫巧的平凡之路模仿写个数组监听掘 2017-07-01 前端日报精选 Why you shouldn`t use Preact, Fast-React, etc. to replace React today -...

_DangJin 2019-08-20 17:41 评论0 收藏0