Loading...
墨滴

wangsanshao

2021/03/05  阅读:33  主题:全栈蓝

webpack拆分代码

webpack代码分离

分离的几种方式

  • 多个入口文件
  • 入口依赖(防止重复)
  • SplitChunksPlugin(防止重复)
  • 动态导入(dynamic import)

多个入口文件

index.js

import _ from 'lodash';

function component() {
  const element = document.createElement('div');
  // lodash(目前通过一个 script 引入)对于执行这一行是必需的
  element.innerHTML = _.join(['Hello''webpack'], ' ');
  return element;
}
document.body.appendChild(component());

another-module.js

import _ from 'lodash';

console.log(_.join(['Another''module''loaded!'], ' '));

webpack.config.js

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin()
  ]
};

执行npm run build

dist/index.bundle.js

(() => {
  var __webpack_modules__ = ({
    "./node_modules/lodash/lodash.js": (function(module, exports, __webpack_require__) {
    //...
    }),
    "./src/index.js": ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
    //...
    })
  })
  // module cache ...
  var __webpack_module_cache__ = {};
  
  // require function ...
  function __webpack_require__(moduleId) {
    //....
    return module.exports;
  }
  
  // webpack runtime compat ...
  
  var __webpack_exports__ = __webpack_require__("./src/index.js")
})()

dist/another.bundle.js

(() => {
  var __webpack_modules__ = ({
    "./node_modules/lodash/lodash.js": (function(module, exports, __webpack_require__) {
    //...
    }),
    "./src/another-module.js": ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
    //...
    })
  })
  
  // module cache ...
  var __webpack_module_cache__ = {};
  
  // require function ...
  function __webpack_require__(moduleId) {
    //....
    return module.exports;
  }
  
  // webpack runtime compat ...
  
  var __webpack_exports__ = __webpack_require__("./src/another-module.js")
})()

看打包后后的源码,loadsh被重复打包到每个bundle中,由于两个文件都依赖了loadsh

防止重复(入口依赖)

在入口设置依赖关系,抽离出重复的依赖单独打包。

webpack.config.js

module.exports = {
  mode: 'development',
  entry: {
    index: {
      import: './src/index.js',
      dependOn: 'shared',
    },
    another: {
      import: './src/another-module.js',
      dependOn: 'shared',
    },
    shared: 'lodash',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin()
  ]
};

npm run buid

loadsh被单独打成了一个包。

dist/index.bundle.js

dist/another.bundle.js

dist/shared.bundle.js

(() => {
var __webpack_modules__ = ({
  "./node_modules/lodash/lodash.js":  ((function(module, exports, __webpack_require__) {
  
  })
})

var __webpack_module_cache__ = {};

function __webpack_require__(moduleId) {}

__webpack_require__.m = __webpack_modules__;

__webpack_require__.x = x => {}

//runtime module...

var __webpack_exports__ = __webpack_require__.x();
})()

wangsanshao

2021/03/05  阅读:33  主题:全栈蓝

作者介绍

wangsanshao