΢ Ͷ ^ ھ

苏州队cba赛程 :Ԕwebpackgٶ֮DllPlugin

cba㶫 www.axwwg.com  •rg2019-02-06 22:00:23   ߣ   ҪuՓ(0)

һǰ

The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance.

DllPlu

һǰ

The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance.

DllPlugin Y DllRefrencePlugin \ҪabundleļMвԺ܏ص׵ؼӿwebpackĴٶĶ_l^ИOؿsprg

Ч

YՓУ ʹ DllPlugin DllRefrencePlugin MИԿsp50%70%Ęrg

Demo dllplugin-demo

2.1 ʹDllPluginǰĘٶ

 

ļ main.js һ jQuery

ļDʾĕr2.3s

2.2 ʹDllPluginĘٶ

 

ʹòĕr0.6sδΌsprL_73% 2.3 CDLLPluginѽЧ

ɏD?б?Dһвһӵݔ

[0] delegated ./src/components/jquery.js from dll-reference vendor_57c12dcd8d9774596525 42 bytes {0} [built]

@f˴εĴ^]´ jQuery ??ֱӏ vendor_57c12dcd8d9774596525 д

Get Started

DllPluginʾD

 

3.1 webpack.dll.config.jsoBYԴ

3.1.1 xwebpack.dll.config.js

˜pСƪֻPIÃԔL dllplugin-demo

// webpack.dll.config.js
module.exports = {
  entry: {
    // xдļļvendor.js
    vendor: [path.resolve(src, 'js', 'vendor.js')],
  },
  
  plugins: [
    new webpack.DllPlugin({
      // manifestļՈģĬJwebpackЭhģ
      context: process.cwd(),
      
      // manifest.jsonļݔλ
      path: path.join(src, 'js', 'dll', '[name]-manifest.json'),
      
      // xĹvendorļⱩ¶ĺ
      name: '[name]_[hash]'
    })
  ]
}

3.1.2 •oBYԴ

ú webpack.dll.config.js ļ֮ vendor.js •ĿõoBYԴ

// vendor.js
// ԶxĿĿеĹYԴ•aliasӳPϵ
import 'jquery';

// or npmYԴ
// import 'Vue';

3.1.3 oBYԴ

// cross-env?ҪⰜ?cross-env NODE_ENV=production webpack --config webpack.dll.config.js --colors --display-modules

webpack.dll.config.js ָλ vendor.dll.js ļ

3.2 webpack.config.jsļ

oBYԴ vendor.dll.js ֮һҪļP“@헹t DllRefrencePlugin ɵ

3.2.1 webpack.config.jsP“

// webpack.config.js
module.exports = {
  entry: {
    // Ŀļ
    'app':path.resolve(src, 'js', 'main.js')
  },
  plugins: [
    // dllPluginP“
    new webpack.DllReferencePlugin({
      // dll.configDllPlugincontextһ
      context: process.cwd(), 
      
      // dll^ɵmanifestļ
      manifest: require(path.join(src, 'js', "dll", "vendor-manifest.json"))
    })
  ]
}

3.2.2 ĿļoBYԴ

// main.js
// Ĺ?ȾJvendorб^ôgĕrֱʹoBļvendor.dll.js
import $ from 'jquery';
console.log($)

// import Vue from "Vue";
// console.log(Vue)

뷽ʽ]ʲôͬƽr뼴

3.2.3 ĿģùoBYԴ

һģע vendor.dll.js

<!-- index.html -->
<script type="text/javascript" src="/src/js/dll/vendor.dll.js"></script>

ڽı_ldev^̣;Ϙ^؏oBYԴĘOؿsp҂Ęrg

YZ

Ϟwebpack(Version 4)ʹ^еССYϣҵČWҲϣҶ֧_֮

ܸdȤ:

  • ԔwebpackʹDllPlugin
  • ԔDllPluginDllReferencePluginwebpack

P

  • Ԕwebpackgٶ֮DllPlugin

    Ԕwebpackgٶ֮DllPlugin

    һǰ The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance. DllPlu
    2019-02-06
  • VueTodoListЌWӽMͨ

    VueTodoListЌWӽMͨ

    ε TodoList Fһε todolistݔݺcύԄˆDʾ ôaF@Ч <div id="app"> <input ty
    2019-02-06
  • TensorflowĿԶxxČF

    TensorflowĿԶxxČF

    TensorflowپWdemoһĿĴa\еdzɹYҲeK߀ҪӖԼĔԇLԇʂdԶxĔȻd
    2019-02-06
  • ES6 ¹c☋xֵB

    ES6 ¹c☋xֵB

    ES6 ͨ^ZUչMԭ͵ȶNʽӏʹͨ^☋Ĕȡ^ һZUչ ES6 ģʽʹ
    2019-02-06
  • RedisBe`rY

    RedisBe`rY

    ǰ redis FһBe`磺 LOADING Redis is loading the dataset in memory use of closed network connection connec
    2019-02-06
  • ʹTensorFlowFķʾ

    ʹTensorFlowFķʾ

    ʹTensorFlowһ񽛾Wj팍FҪݔ딵ʽ[،ӔĶxpʧxxݔͨ^numpySCһ
    2019-02-06
  • PHPFַСDĹ܌

    PHPFַСDĹ܌

    ַĴСDQճнʹôΌFһεĴСDQ&#63; phpKʹõcZԵtoupper,tolowerַMдС
    2019-02-06
  • Nginxrheader^Ў"_"ϢGʧ}ĽQ

    Nginxrheader^Ў"_"ϢGʧ}ĽQ

    ǰ _lWPĿrՈrՈ^headerз˺sign_keyϢڽՈrُheaderóڱ{ԇrǿԵϾ֮ͨ^Nginx֮
    2019-02-06
  • PythonFE-Mailռ̳

    PythonFE-Mailռ̳

    __import__ ҂֪importnj??䌍importHʹbuiltinimportһЩ҂ԄӑBȥ{ú҂
    2019-02-06
  • C++еɆTʾԔ

    C++еɆTʾԔ

    ǰ C++ЎׂķoBɆTÑδx@ЩrgoĬJFC++11ǰĂ⺯C++11ƄZx˃ɂ
    2019-02-06