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

2019年8月25日 179次阅读 来源: zhutianxiang

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目次下天生了两个文件：

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

修正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系列---Webpack环境搭建（三）打包机能优化》

能够看到，进口文件里依靠的react，moment模块，直接援用了dll。

对照一下不做星散的情况下打包的效果：
《React系列---Webpack环境搭建（三）打包机能优化》

速率快了，文件也小了。日常平凡开辟的时刻，修正代码后从新编译的速率会大大削减，节省时候。

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

React系列—Webpack环境搭建（一）手动搭建
React系列—Webpack环境搭建（二）差别环境差别设置
React系列—Webpack环境搭建（三）打包机能优化

    原文作者：zhutianxiang
    原文地址: https://segmentfault.com/a/1190000010003262
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞