成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React系列---Webpack環(huán)境搭建（三）打包性能優(yōu)化

Jason_Geng / 2568人閱讀

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

React系列---Webpack環(huán)境搭建（一）手動(dòng)搭建
React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置
React系列---Webpack環(huán)境搭建（三）打包性能優(yōu)化

實(shí)際項(xiàng)目，動(dòng)輒上千個(gè)模塊，打包花1分鐘以上是很常見的。我們構(gòu)建的時(shí)候，往往希望自己的代碼和第三方庫(kù)（vendors）可以分開打包，因?yàn)椴簧婕暗缴?jí)第三方庫(kù)時(shí)，就沒必要每次浪費(fèi)打包時(shí)間在這上面。

Dll（動(dòng)態(tài)鏈接庫(kù)）是Webpack后面加入的功能，Dll這個(gè)概念應(yīng)該是借鑒了Windows系統(tǒng)的dll。一個(gè)dll包，就是一個(gè)純粹的依賴庫(kù)，它本身不能運(yùn)行，是用來給你的app引用的。

打包dll的時(shí)候，Webpack會(huì)將所有包含的庫(kù)做一個(gè)索引，寫在一個(gè)manifest文件中，而引用dll的代碼（dll user）在打包的時(shí)候，只需要讀取這個(gè)manifest文件，就可以了。

這么一來有幾個(gè)好處：

Dll打包以后是獨(dú)立存在的，只要其包含的庫(kù)沒有增減、升級(jí)，hash也不會(huì)變化，因此線上的dll代碼不需要隨著版本發(fā)布頻繁更新。

App部分代碼修改后，只需要編譯app部分的代碼，dll部分，只要包含的庫(kù)沒有增減、升級(jí)，就不需要重新打包。這樣也大大提高了每次編譯的速度。

假設(shè)你有多個(gè)項(xiàng)目，使用了相同的一些依賴庫(kù)，它們就可以共用一個(gè)dll。

如何使用呢？

首先要先建立一個(gè)dll的配置文件，entry只包含第三方庫(kù)。
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的選項(xiàng)中，path是manifest文件的輸出路徑；name是dll暴露的對(duì)象名，要跟output.library保持一致；context是解析包路徑的上下文，這個(gè)要跟下面要配置的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"
  },

執(zhí)行命令，生成第三方依賴dll庫(kù)：

npm run dll

可以看到lib目錄下生成了兩個(gè)文件：

修改webpack.base.config.js配置，增加DllReferencePlugin插件配置：

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

這么一來，已做成dll庫(kù)的那部分模塊，webpack將不會(huì)重復(fù)打包。
DllReferencePlugin的選項(xiàng)中，context需要跟之前保持一致，這個(gè)用來指導(dǎo)Webpack匹配manifest中庫(kù)的路徑；manifest用來引入剛才輸出的manifest文件。

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




  
  
  <%= htmlWebpackPlugin.options.title %>

給入口文件再加點(diǎn)依賴模塊，方便打包觀察：

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;

運(yùn)行打包：

npm run build:dev

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

對(duì)比一下不做分離的情況下打包的結(jié)果：

速度快了，文件也小了。平時(shí)開發(fā)的時(shí)候，修改代碼后重新編譯的速度會(huì)大大減少，節(jié)省時(shí)間。

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

React系列---Webpack環(huán)境搭建（一）手動(dòng)搭建
React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置
React系列---Webpack環(huán)境搭建（三）打包性能優(yōu)化

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83750.html

相關(guān)文章

  • React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置

    摘要：系列環(huán)境搭建一手動(dòng)搭建系列環(huán)境搭建二不同環(huán)境不同配置系列環(huán)境搭建三打包性能優(yōu)化實(shí)際項(xiàng)目中，往往不同環(huán)境有不同的構(gòu)建需求。 React系列---Webpack環(huán)境搭建（一）手動(dòng)搭建React系列---Webpack環(huán)境搭建（二）不同環(huán)境不同配置React系列---Webpack環(huán)境搭建（三）打包性能優(yōu)化 實(shí)際項(xiàng)目中，往往不同環(huán)境有不同的構(gòu)建需求。比如開發(fā)、測(cè)試和生產(chǎn)環(huán)境對(duì)應(yīng)的后端接口地...

    coordinate35 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    khs1994 評(píng)論0 收藏0

  • 2017-07-01 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選騰訊前端團(tuán)隊(duì)社區(qū)源碼分析入門指南一些關(guān)于使用的心得基本類型與引用類型知多少掘金中文第期框架選型周刊第期入門系列模塊車棧重構(gòu)基于的網(wǎng)絡(luò)請(qǐng)求庫(kù)某熊的全棧之路的那些奇技淫巧的平凡之路模仿寫個(gè)數(shù)組監(jiān)聽掘 2017-07-01 前端日?qǐng)?bào) 精選 Why you shouldn`t use Preact, Fast-React, etc. to replace React today -...

    _DangJin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<