怎么在Webpack中執行代碼分割

這篇文章主要介紹“怎么在Webpack中執行代碼分割”，在日常操作中，相信很多人在怎么在Webpack中執行代碼分割問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么在Webpack中執行代碼分割”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

代碼分割

這一直都不錯，直到有一天遇到不能以單文件形式下載整個應用的情況。有時候你必須在應用程序中使用多個打包的腳本。

這就是需要對代碼進行分割的地方。通過將應用程序拆解成多個部分，你才可以按照用戶當前操作提供應用程序中相關的部分。

提到最小的單包，Webpack 通常***來處理文件大小，但這往往不是恰當的時機。Rollup 在這方面就好得多，但它對代碼分割的支持則較弱。

Webpack 各分塊文件的大小總和會超出單個 Rollup 打包出來的文件的大小，但這在你的應用中很可能不是什么問題。

如果你根據需求來對 Webpack 產生和各個包進行懶加載，那么用戶最終下載的內容可能只是完整 Rollup 生成的包文件的一部分。

最終，更小更有針對性的打包會比單包給用戶帶來更多好處。當然如果你的應用中沒什么機會用以懶加載，這些好處就不存在。

允許代碼分割

下面的章節中我會展示如何以最簡單的方式配置代碼分割。我會把代碼分割為兩個應用包以及一個包含公共代碼的庫包。

下面是源碼：

car-service.js

import { LoggerService } from './logger-service';

export class CarService {

  constructor() {    this.logger = new LoggerService();
  }

  getCar() {    this.logger.logMessage('getting car');    return 'BMW';
  }
}

person-service.js

import { LoggerService } from './logger-service';

export class PersonService {

  constructor() {    this.logger = new LoggerService();
  }

  getPerson() {    this.logger.logMessage('getting person');    return 'Joe Smith';
  }
}

logger-service.js

export class LoggerService {
  logMessage(msg) {
    console.log(msg);
  }
}

CarService 和 PersonService 會被分割到兩個不同的應用包中，公共的 LoggerService 會被提取到一個共享包中。

配置

我聽某些開發者說，Webpack 配置起來很難。我認為這是很多人一般不選擇用 Webpack 來打包的原因之一，這也確實是  Webpack 存在的問題。新術語和模塊格式可能就是入門的難點所在，但我相信人們會很快克服它們。尤其是在人們認識到優化打包優點的時候。

實際上對 Webpack 進行基本的配置是很簡單的。我這個例子就是很基礎，你可以很容易對其進行擴展，進行更高級的設置。

webpack-config.js

var path = require('path');const webpack = require('webpack');

module.exports = {
  entry : {
    person: './src/code-splitting-webpack/person-service.js',
    car: './src/code-splitting-webpack/car-service.js'
  },
  output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, '../../dist')
  },
  plugins: [    new webpack.optimize.CommonsChunkPlugin({
        name: 'lib',
        minChunks: 2,
        filename: '[name].js',
    })
  ]
}

我的配置中首先定義了 entry.person 和  entry.car，它們是我那些包的分割點。有了這個配置，就可以生成兩個不同的應用包了。包名由 [name].bundle.js  規則來生成，[name] 在這里是一個占位符，它會被替換為 “car” 和 “person”。

如果配置到這里就結束，最終會得到兩個包含完整應用程序功能的包。這是因為兩個包中會有一些重復的東西來自共用的 LoggerService。默認情況下 LoggerSerivce 會被添加到兩個包中。

CommonsChunkPlugin 可以解決這個問題。它會讓 Webpack 將所有包中共用的公共代碼拆分出來形成第三個包。

這個例子中的共享包非常簡單，不過你可能不想在共享包中包含所有重復的代碼。注意到 minChunks 配置項，這個配置項允許你指定要加入共享包的代碼需要被重復使用的最小次數。

我把代碼發布在      Github 上，如果你有興趣可以取下來看看。

可以通過下面的 Webpack 命令來執行示例：

webpack --config webpack.config.js --progress

到此，關于“怎么在Webpack中執行代碼分割”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！