commonChunkplugin配置项详解

最新推荐文章于 2024-06-11 00:59:33 发布
最新推荐文章于 2024-06-11 00:59:33 发布
阅读量1.7w 收藏 2
点赞数
分类专栏： webpack webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangklfang/article/details/54931523
版权

建议在github阅读

单入口文件时候不能把引用多次的模块打印到commonChunkPlugin中

注意：example1(对应于目录example1，修改webpack.config.js中的配置就可以了，以下例子相同)

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:process.cwd()+'/example1/main.js',
  },
  output: {
    path:process.cwd()+'/dest/example1',
    filename: '[name].js'
  },
  plugins: [
   new CommonsChunkPlugin({
       name:"chunk",
       minChunks:2
   })
  ]
};

虽然在example1中chunk2被引用了两次，但是最终并没有打包到chunk.js中，我们看看chunk.js中的内容:

/******/ (function(modules) { // webpackBootstrap
/******/    // install a JSONP callback for chunk loading
/******/    var parentJsonpFunction = window["webpackJsonp"];
/******/    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, callbacks = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId])
/******/                callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/            installedChunks[chunkId] = 0;
/******/        }
/******/        for(moduleId in moreModules) {
/******/            modules[moduleId] = moreModules[moduleId];
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/        while(callbacks.length)
/******/            callbacks.shift().call(null, __webpack_require__);
/******/        if(moreModules[0]) {
/******/            installedModules[0] = 0;
/******/            return __webpack_require__(0);
/******/        }
/******/    };

/******/    // The module cache
/******/    var installedModules = {};

/******/    // object to store loaded and loading chunks
/******/    // "0" means "already loaded"
/******/    // Array means "loading", array contains callbacks
/******/    var installedChunks = {
/******/        1:0
/******/    };

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }

/******/    // This file contains only the entry chunk.
/******/    // The chunk loading function for additional chunks
/******/    __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/        // "0" is the signal for "already loaded"
/******/        if(installedChunks[chunkId] === 0)
/******/            return callback.call(null, __webpack_require__);

/******/        // an array means "currently loading".
/******/        if(installedChunks[chunkId] !== undefined) {
/******/            installedChunks[chunkId].push(callback);
/******/        } else {
/******/            // start chunk loading
/******/            installedChunks[chunkId] = [callback];
/******/            var head = document.getElementsByTagName('head')[0];
/******/            var script = document.createElement('script');
/******/            script.type = 'text/javascript';
/******/            script.charset = 'utf-8';
/******/            script.async = true;

/******/            script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"main"}[chunkId]||chunkId) + ".js";
/******/            head.appendChild(script);
/******/        }
/******/    };

/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/ })
/************************************************************************/
/******/ ([]);

打包成的main.js中内容是:

webpackJsonp([0,1],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
    __webpack_require__(1);
    __webpack_require__(2);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(2);
    var chunk1=1;
    exports.chunk1=chunk1;

/***/ },
/* 2 */
/***/ function(module, exports) {
    var chunk2=1;
    exports.chunk2=chunk2;

/***/ }
]);

多入口文件时候能把引用多次的模块打印到commonChunkPlugin中

在example2中我们配置了如下:

minChunks:2

我们两个入口文件中公有的chunk1.js和chunk2.js被打印到chunk.js中!

/******/ (function(modules) { // webpackBootstrap
/******/    // install a JSONP callback for chunk loading
/******/    var parentJsonpFunction = window["webpackJsonp"];
/******/    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, callbacks = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId])
/******/                callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/            installedChunks[chunkId] = 0;
/******/        }
/******/        for(moduleId in moreModules) {
/******/            modules[moduleId] = moreModules[moduleId];
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/        while(callbacks.length)
/******/            callbacks.shift().call(null, __webpack_require__);
/******/        if(moreModules[0]) {
/******/            installedModules[0] = 0;
/******/            return __webpack_require__(0);
/******/        }
/******/    };

/******/    // The module cache
/******/    var installedModules = {};

/******/    // object to store loaded and loading chunks
/******/    // "0" means "already loaded"
/******/    // Array means "loading", array contains callbacks
/******/    var installedChunks = {
/******/        2:0
/******/    };

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }

/******/    // This file contains only the entry chunk.
/******/    // The chunk loading function for additional chunks
/******/    __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/        // "0" is the signal for "already loaded"
/******/        if(installedChunks[chunkId] === 0)
/******/            return callback.call(null, __webpack_require__);

/******/        // an array means "currently loading".
/******/        if(installedChunks[chunkId] !== undefined) {
/******/            installedChunks[chunkId].push(callback);
/******/        } else {
/******/            // start chunk loading
/******/            installedChunks[chunkId] = [callback];
/******/            var head = document.getElementsByTagName('head')[0];
/******/            var script = document.createElement('script');
/******/            script.type = 'text/javascript';
/******/            script.charset = 'utf-8';
/******/            script.async = true;

/******/            script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"main","1":"main1"}[chunkId]||chunkId) + ".js";
/******/            head.appendChild(script);
/******/        }
/******/    };

/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/ })
/************************************************************************/
/******/ ([
/* 0 */,
/* 1 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(2);
    var chunk1=1;
    exports.chunk1=chunk1;

/***/ },
/* 2 */
/***/ function(module, exports) {

    var chunk2=1;
    exports.chunk2=chunk2;
/***/ }
/******/ ]);

将公共业务模块与类库或框架分开打包

例1
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        main: process.cwd()+'/example3/main.js',
        main1: process.cwd()+'/example3/main1.js',
        common1:["jquery"],
        common2:["vue"]
    },
    output: {
        path: process.cwd()+'/dest/example3',
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin({
            name: ["chunk",'common1','common2'],//对应于上面的entry的key
            minChunks:2
        })
    ]
};

上面的配置就可以把jquery,vue分别打包到一个独立的chunk中，分别为common1.js,common2.js。同时把main1,main的公共业务模块打包到chunk.js中,而其他非公共的业务代码全部保留在main.js和main1.js中。

注意：webpack用插件CommonsChunkPlugin进行打包的时候，将符合引用次数(minChunks)的模块打包到name参数的数组的第一个块里（chunk）,然后数组后面的块依次打包(查找entry里的key,没有找到相关的key就生成一个空的块)，最后一个块包含webpack生成的在浏览器上使用各个块的加载代码，所以页面上使用的时候最后一个块必须最先加载,我们看看最后一个块，也就是common2.js的内容头部：

/******/ (function(modules) { // webpackBootstrap
/******/  // install a JSONP callback for chunk loading
/******/  var parentJsonpFunction = window["webpackJsonp"];
/******/  window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/    // add "moreModules" to the modules object,
/******/    // then flag all "chunkIds" as loaded and fire callback
/******/    var moduleId, chunkId, i = 0, callbacks = [];
/******/    for(;i < chunkIds.length; i++) {
/******/      chunkId = chunkIds[i];
/******/      if(installedChunks[chunkId])
/******/        callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/      installedChunks[chunkId] = 0;
/******/    }
/******/    for(moduleId in moreModules) {
/******/      modules[moduleId] = moreModules[moduleId];
/******/    }
/******/    if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/    while(callbacks.length)
/******/      callbacks.shift().call(null, __webpack_require__);
/******/    if(moreModules[0]) {
/******/      installedModules[0] = 0;
/******/      return __webpack_require__(0);
/******/    }
/******/  };

/******/  // The module cache
/******/  var installedModules = {};

/******/  // object to store loaded and loading chunks
/******/  // "0" means "already loaded"
/******/  // Array means "loading", array contains callbacks
/******/  var installedChunks = {
/******/    1:0
/******/  };

/******/  // The require function
/******/  function __webpack_require__(moduleId) {

/******/    // Check if module is in cache
/******/    if(installedModules[moduleId])
/******/      return installedModules[moduleId].exports;

/******/    // Create a new module (and put it into the cache)
/******/    var module = installedModules[moduleId] = {
/******/      exports: {},
/******/      id: moduleId,
/******/      loaded: false
/******/    };

/******/    // Execute the module function
/******/    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/    // Flag the module as loaded
/******/    module.loaded = true;

/******/    // Return the exports of the module
/******/    return module.exports;
/******/  }

/******/  // This file contains only the entry chunk.
/******/  // The chunk loading function for additional chunks
/******/  __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/    // "0" is the signal for "already loaded"
/******/    if(installedChunks[chunkId] === 0)
/******/      return callback.call(null, __webpack_require__);

/******/    // an array means "currently loading".
/******/    if(installedChunks[chunkId] !== undefined) {
/******/      installedChunks[chunkId].push(callback);
/******/    } else {
/******/      // start chunk loading
/******/      installedChunks[chunkId] = [callback];
/******/      var head = document.getElementsByTagName('head')[0];
/******/      var script = document.createElement('script');
/******/      script.type = 'text/javascript';
/******/      script.charset = 'utf-8';
/******/      script.async = true;

/******/      script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"common1","2":"main","3":"main1","4":"chunk"}[chunkId]||chunkId) + ".js";
/******/      head.appendChild(script);
/******/    }
/******/  };

/******/  // expose the modules object (__webpack_modules__)
/******/  __webpack_require__.m = modules;

/******/  // expose the module cache
/******/  __webpack_require__.c = installedModules;

/******/  // __webpack_public_path__
/******/  __webpack_require__.p = "";

/******/  // Load entry module and return exports
/******/  return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

  module.exports = __webpack_require__(2);

/***/ }])

看到这里你就会明白为什么他要最后加载了把。

例2
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        main: process.cwd()+'/example4/main.js',
        main1: process.cwd()+'/example4/main1.js',
        jquery:["jquery"],
        vue:["vue"]
    },
    output: {
        path: process.cwd() + '/dest/example4',
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin({
            name: ["common","jquery","vue","load"],
            minChunks:2
        })
    ]
};

这样我们的业务共享代码会提取到common.js中，如下:

webpackJsonp([4,5],[
//第一个参数是一个数组，数组中第一个元素是该chunkId，而其余元素是该chunk依赖的其他模块
/* 0 */,
/* 1 */,
/* 2 */
/***/ function(module, exports, __webpack_require__) {
  __webpack_require__(3);
  var chunk1=1;
  exports.chunk1=chunk1;

/***/ },
/* 3 */
/***/ function(module, exports) {

  var chunk2=1;
  exports.chunk2=chunk2;

/***/ }
]);

而我们的load.js中仅仅是用于加载其他chunk代码的函数,所以必须在最后加载才行：

/******/ (function(modules) { // webpackBootstrap
/******/  // install a JSONP callback for chunk loading
/******/  var parentJsonpFunction = window["webpackJsonp"];
/******/  window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/    // add "moreModules" to the modules object,
/******/    // then flag all "chunkIds" as loaded and fire callback
/******/    var moduleId, chunkId, i = 0, callbacks = [];
/******/    for(;i < chunkIds.length; i++) {
/******/      chunkId = chunkIds[i];
/******/      if(installedChunks[chunkId])
/******/        callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/        installedChunks[chunkId] = 0;
/******/    }
/******/    for(moduleId in moreModules) {
/******/      modules[moduleId] = moreModules[moduleId];
/******/    }
/******/    if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/    while(callbacks.length)
/******/      callbacks.shift().call(null, __webpack_require__);
/******/    if(moreModules[0]) {
/******/      installedModules[0] = 0;
/******/      return __webpack_require__(0);
/******/    }
/******/  };

/******/  // The module cache
/******/  var installedModules = {};

/******/  // object to store loaded and loading chunks
/******/  // "0" means "already loaded"
/******/  // Array means "loading", array contains callbacks
/******/  var installedChunks = {
/******/    5:0
/******/  };

/******/  // The require function
/******/  function __webpack_require__(moduleId) {

/******/    // Check if module is in cache
/******/    if(installedModules[moduleId])
/******/      return installedModules[moduleId].exports;

/******/    // Create a new module (and put it into the cache)
/******/    var module = installedModules[moduleId] = {
/******/      exports: {},
/******/      id: moduleId,
/******/      loaded: false
/******/    };

/******/    // Execute the module function
/******/    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/    // Flag the module as loaded
/******/    module.loaded = true;

/******/    // Return the exports of the module
/******/    return module.exports;
/******/  }

/******/  // This file contains only the entry chunk.
/******/  // The chunk loading function for additional chunks
/******/  __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/    // "0" is the signal for "already loaded"
/******/    if(installedChunks[chunkId] === 0)
/******/      return callback.call(null, __webpack_require__);

/******/    // an array means "currently loading".
/******/    if(installedChunks[chunkId] !== undefined) {
/******/      installedChunks[chunkId].push(callback);
/******/    } else {
/******/      // start chunk loading
/******/      installedChunks[chunkId] = [callback];
/******/      var head = document.getElementsByTagName('head')[0];
/******/      var script = document.createElement('script');
/******/      script.type = 'text/javascript';
/******/      script.charset = 'utf-8';
/******/      script.async = true;

/******/      script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"jquery","1":"main","2":"main1","3":"vue","4":"common"}[chunkId]||chunkId) + ".js";
/******/      head.appendChild(script);
/******/    }
/******/  };

/******/  // expose the modules object (__webpack_modules__)
/******/  __webpack_require__.m = modules;

/******/  // expose the module cache
/******/  __webpack_require__.c = installedModules;

/******/  // __webpack_public_path__
/******/  __webpack_require__.p = "";
/******/ })
/************************************************************************/
/******/ ([]);

参数minChunks: Infinity

下面的配置会把main.js和main1.js公共的业务代码打包到jquery.js中:

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        main: process.cwd()+'/example5/main.js',
        main1: process.cwd()+'/example5/main1.js',
        jquery:["jquery"]
        //minChunks: Infinity时候框架代码依然会被单独打包成一个文件
    },
    output: {
        path: process.cwd() + '/dest/example5',
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin({
            name: "jquery",
            minChunks:2//被引用两次及以上
        })
    ]
};

如果把上面的minChunks修改为Infinity，那么chunk1和chunk2(公有的业务逻辑部分,在main.js和main1.js中require进来)都打包到main.js,main1.js里，也就是共有逻辑不会抽取出来作为一个单独的chunk,而是打包到jquery.js中!注意：此处的jquery必须在最先加载，因为window.webpackJsonp函数是被打包到jquery.js中的!

参数chunks

下面的配置表示：只有在main.js和main1.js中都引用的模块才会被打包的到公共模块（这里即jquery.js）

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        main: process.cwd()+'/example6/main.js',
        main1: process.cwd()+'/example6/main1.js',
        jquery:["jquery"]
    },
    output: {
        path: process.cwd()  + '/dest/example6',
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin({
            name: "jquery",
            minChunks:2,
            chunks:["main","main1"]
        })
    ]
};

此时你会发现在我们的jquery.js的最后会打包进来我们的chunk1.js和chunk2.js

/* 2 */
/***/ function(module, exports, __webpack_require__) {
  __webpack_require__(3);
  var chunk1=1;
  exports.chunk1=chunk1;

/***/ },
/* 3 */
/***/ function(module, exports) {
  var chunk2=1;
  exports.chunk2=chunk2;

/***/ }

参考资料：

webpack打包策略分析

webpack CommonsChunkPlugin详细教程

liangklfang
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nginx配置详解
lllwwyy的博客
11-17 1563
nginx配置详解
maven settings配置详解
11-24
maven的setting配置文件详解。。。。
webpack中CommonsChunkPlugin详细教程(小结)
11-26
本文介绍了webpack中CommonsChunkPlugin详细教程(小结)，分享给大家，也给自己留个笔记，具体如下： 1.demo结构： 2.package.json配置： { "name": "webpack-simple-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "webpack": "webpack" }, "author": "", "license": "ISC", "dependencies": { "jquery": "^3.1.
CommonsChunkPlugin配置项及意义
chuobi5295的博客
04-11 156
第一项 表示chunk名称，可以是一个字符或者一个数组 第二项表示打包后的文件名 第三项minChunks 可以是数字（公用代码出现的次数） ，函数（方便自定义），特殊值无穷大 第四项 chunks 指定提取范围 倒数第两三项是指是否在entry 子模块或所有模块中查找对应依赖...
Vue 打包 chunk-vendors
最新发布
2401_85123394的博客
06-11 965
2.6 MB不要看后面的Time时间那么短，因为这是内网本机访问快，如果到了外网就跟服务器带宽、性能有关了，但是文件这么大，加载慢，那就需要拆开来进行分块加载，不是一味升级服务器解决问题，毕竟要钱的！附带还未进行分块分包加载时，打包得到的文件目录(jscss。
commons-chunk-plugin 使用方法
u010928583的博客
11-01 3032
commons-chunk-plugin 使用方法 1、commons-chunk-plugin概述 CommonsChunkPlugin提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，也可以将第三方模块分开打包，以便在其他的入口和模块中使用。需要在html中单独引入抽离出来的公共模块。 2、commons-chunk-plugin配置参数 { name: string, // o...
webpack配置中常用的CommonsChunkPlugin
Jonathan的博客
06-01 2418
CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，是一把优化项目的利器。 CommonsChunkPlugin作用： 一、不分离出第三方和自定义模块 项目初始结构，后面打包后会生成dist目录： src目录下各个文件内容都很简洁的，如下： webpack.config.js: 接着在命令行运行npm run build，此时项目中多了dist目录： 再来看一下命令行中webpack的打包信
CommonsChunkPlugin详解
关灯吃面
02-25 1907
在不指定的情况下，要提取的公共模块需要在入口文件里显式声明。 // main.js import Vue from 'vue' import App from './App.vue' import _ from "underscore"; new Vue({ el: '#app', render: h =&gt; h(App) }) // main2.js import _...
ThinkPHP惯例配置文件详解
12-18
本文对惯例配置文件作出注释详解如下，供大家参考： <?php /** +------------------------------------------------------------------------------ * ThinkPHP惯例配置文件 * 该文件请不要修改，如果要覆盖惯例...
Marlin固件详解及配置教程.pdf
08-11
Marlin固件详解及配置教程.pdf
kubelet配置详解及简单实例
01-11
kubelet配置详解及简单实例 摘要: 这两天试着重新去理解kubelet的每一个配置，并整理出我们最有可能要配置的项作为我们上生产的要考虑的kubelet最佳配置。 author: garnett.wang@gmail.com kubernetes version: ...
简单谈谈CommonsChunkPlugin抽取公共模块
11-27
引言 webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分，具体的用法就不做过多介绍，不太了解可以参考webpack官网介绍； 该插件是webpack项目常用的一个优化功能，几乎在每个webpack项目中都会用到。使用该插件带来的好处： 提升webpack打包速度和项目体积：将webpack入口的chunk文件中所有公共的代码提取出来，减少代码体积；同时提升webpack打包速度。 利用缓存机制：依赖的公共模块文件一般很少更改或者不会更改，这样独立模块文件提取出可以长期缓存。 但是在项目中，若插件打开方式不正确的话，上面的第二点其实是
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
11-26
Webpack 的 CommonsChunkPlugin 插件，负责将多次被使用的 JS 模块打包在一起。 CommonsChunkPlugin 能解决的问题 在使用插件前，考虑几个问题： 对哪些 chunk 进行提取，这决定了 chunks ，children 和 name 要怎么配置 common chunk 是否异步，这决定了 async 怎么配置 common chunk 的粒度，这决定了 minChunks 和 minSize 怎么配置 以下是官方给出的常用的场景： 提取两个及两个以上 Chunk 的公共代码 将 Code Split 切割出来的 Chunk「就
commonChunkPlugin插件
chuntianni1600的博客
04-19 185
如果配置为下面 ： new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }) 默认以chunk数组里的key去入口文件找key对应的数组 模块 提取公共代码打包 ...
CommonsChunkPlugin
weixin_30316097的博客
01-08 108
CommonsChunk 插件的作用就是提取代码中的公共代码，然后将公共模块打包到一个独立的文件中，以便在其它的入口和模块中使用，原理就是把多个入口共同的依赖都给定义成一个新入口 多种打包情况： 单一入口，模块单一引用 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); module....
webpack——CommonsChunkPlugin
张勇的博客
12-26 4102
作用 虽然webpack4已经出来很久了，CommonsChunkPlugin也已经舍弃了，但是还是有很多项目是通过webpack3来打包的，对CommonsChunkPlugin各个配置项的认识还是比较模糊，这里做个详细的记录。 CommonsChunkPlugin通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，以便存到缓存中供后续使用。     既然是将公共模块拆分出来，那么肯...
webpack配置中常用的CommonsChunkPlugin认识
包磊磊的博客
04-20 1926
CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，是一把优化项目的利器。 先来说一下各种教程以及文档中CommonsChunkPlugin提及到chunk有哪几种，主要有以下三种： 1.webpack当中配置的入口文件（entry）是chunk，可以理解为entry c...
webpack性能优化 —— CommonsChunkPlugin
xhsdnn的专栏
09-10 2769
webpack有很多种优化方式，这里先就CommonsChunkPlugin这个插件说一下；看到CommonsChunkPlugin这个名字，大概明白这个插件是跟公共模块有关系的。没错，这个插件就是用来提取出代码中公共的部分，并且将他们打包到一个单独的文件里面，这样就避免了重复打包。当然CommonsChunkPlugin不仅仅是提取公共部分这么简单......
编译后的多入口文件中的第三方插件和webpack的抽离：使用CommonsChunkPlugin和runtime
u010234868的专栏
09-23 246
webpack.config.js： const path = require('path'); const webpack = require('webpack'); const packagejson = require('./package.json'); module.exports = { // 入口文件 entry: { // 多入口 'main1': './src/main1.js', 'main2': './src/main2.js', // p
Druid配置详解与数据摄取示例
" Druid配置文件详解，包括摄取配置文件结构、数据解析模式、数据源、数据粒度规则等，结合示例说明了配置文件的使用。" Apache Druid 是一个高性能、分布式、列式存储的数据仓库，常用于实时数据分析。配置文件在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值