国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Jason_Geng / 2554人閱讀

摘要：的選項中，是文件的輸出路徑是暴露的對象名，要跟保持一致是解析包路徑的上下文，這個要跟下面要配置的保持一致。最后修改一下模板，增加引用文件給入口文件再加點依賴模塊，方便打包觀察運行打包可以看到，入口文件里依賴的，模塊，直接引用了。

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環境搭建（三）打包性能優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83750.html

相關文章

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

    摘要：系列環境搭建一手動搭建系列環境搭建二不同環境不同配置系列環境搭建三打包性能優化實際項目中，往往不同環境有不同的構建需求。 React系列---Webpack環境搭建（一）手動搭建React系列---Webpack環境搭建（二）不同環境不同配置React系列---Webpack環境搭建（三）打包性能優化 實際項目中，往往不同環境有不同的構建需求。比如開發、測試和生產環境對應的后端接口地...

    coordinate35 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • 2017-07-01 前端日報

    摘要：前端日報精選騰訊前端團隊社區源碼分析入門指南一些關于使用的心得基本類型與引用類型知多少掘金中文第期框架選型周刊第期入門系列模塊車棧重構基于的網絡請求庫某熊的全棧之路的那些奇技淫巧的平凡之路模仿寫個數組監聽掘 2017-07-01 前端日報 精選 Why you shouldn`t use Preact, Fast-React, etc. to replace React today -...

    _DangJin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<