2. 程式人生 > >webpack 程式碼分離

webpack 程式碼分離

阿新 • • 發佈：2018-11-12

本指南擴充套件了起步和管理輸出中提供的示例。請確保您至少已熟悉其中提供的示例。

程式碼分離是 webpack 中最引人注目的特性之一。此特效能夠把程式碼分離到不同的 bundle 中，然後可以按需載入或並行載入這些檔案。程式碼分離可以用於獲取更小的 bundle，以及控制資源載入優先順序，如果使用合理，會極大影響載入時間。

有三種常用的程式碼分離方法：

  • 入口起點：使用 entry 配置手動地分離程式碼。
  • 防止重複：使用 CommonsChunkPlugin 去重和分離 chunk。
  • 動態匯入：通過模組的行內函數呼叫來分離程式碼。

1. 入口起點(entry points)

這是迄今為止最簡單、最直觀的分離程式碼的方式。不過，這種方式手動配置較多，並有一些陷阱，我們將會解決這些問題。先來看看如何從 main bundle 中分離另一個模組：

project

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
  |- index.js
+ |- another-module.js
|- /node_modules

 

another-module.js

import _ from 'lodash';

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

 

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: 
 
'Code Splitting'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

 

這將生成如下構建結果：

Hash: 309402710a14167f42a8
Version: webpack 2.6.1
Time: 570ms
            Asset    Size  Chunks                    Chunk Names
  index.bundle.js  544 kB       0  [emitted]  [big]  index
another.bundle.js  544 kB       1  [emitted]  [big]  another
   [0] ./~/lodash/lodash.js 540 kB {0} {1} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
   [3] ./src/another-module.js 87 bytes {1} [built]
   [4] ./src/index.js 216 bytes {0} [built]

 

正如前面提到的，這種方法存在一些問題:

  • 如果入口 chunks 之間包含重複的模組，那些重複模組都會被引入到各個 bundle 中。
  • 這種方法不夠靈活，並且不能將核心應用程式邏輯進行動態拆分程式碼。

以上兩點中，第一點對我們的示例來說無疑是個問題，因為之前我們在 ./src/index.js 中也引入過 lodash，這樣就在兩個 bundle 中造成重複引用。接著，我們通過使用 CommonsChunkPlugin 來移除重複的模組。

2. 防止重複(prevent duplication)

CommonsChunkPlugin 外掛可以將公共的依賴模組提取到已有的入口 chunk 中，或者提取到一個新生成的 chunk。讓我們使用這個外掛，將之前的示例中重複的 lodash 模組去除：

webpack.config.js

 const path = require('path');
+ const webpack = require('webpack');
  const HTMLWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      index: './src/index.js',
      another: './src/another-module.js'
    },
    plugins: [
      new HTMLWebpackPlugin({
        title: 'Code Splitting'
-     })
+     }),
+     new webpack.optimize.CommonsChunkPlugin({
+       name: 'common' // 指定公共 bundle 的名稱。
+     })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

 

這裡我們使用 CommonsChunkPlugin 之後，現在應該可以看出，index.bundle.js 中已經移除了重複的依賴模組。需要注意的是，CommonsChunkPlugin 外掛將 lodash 分離到單獨的 chunk，並且將其從 main bundle 中移除，減輕了大小。執行 npm run build 檢視效果：

Hash: 70a59f8d46ff12575481
Version: webpack 2.6.1
Time: 510ms
            Asset       Size  Chunks                    Chunk Names
  index.bundle.js  665 bytes       0  [emitted]         index
another.bundle.js  537 bytes       1  [emitted]         another
 common.bundle.js     547 kB       2  [emitted]  [big]  common
   [0] ./~/lodash/lodash.js 540 kB {2} [built]
   [1] (webpack)/buildin/global.js 509 bytes {2} [built]
   [2] (webpack)/buildin/module.js 517 bytes {2} [built]
   [3] ./src/another-module.js 87 bytes {1} [built]
   [4] ./src/index.js 216 bytes {0} [built]

 

以下是由社群提供的，一些對於程式碼分離很有幫助的外掛和 loaders：

CommonsChunkPlugin 外掛還可以通過使用顯式的 vendor chunks 功能，從應用程式程式碼中分離 vendor 模組。

3. 動態匯入(dynamic imports)

當涉及到動態程式碼拆分時，webpack 提供了兩個類似的技術。對於動態匯入，第一種，也是優先選擇的方式是，使用符合 ECMAScript 提案 的 import() 語法。第二種，則是使用 webpack 特定的 require.ensure。讓我們先嚐試使用第一種……

import() 呼叫使用會在內部用到 promises。如果在舊有版本瀏覽器中使用 import()，記得使用 一個 polyfill 庫（例如 es6-promise 或 promise-polyfill），來 shim Promise。

在我們開始本節之前，先從配置中移除掉多餘的 entry 和 CommonsChunkPlugin，因為接下來的演示中並不需要它們：

webpack.config.js

  const path = require('path');
- const webpack = require('webpack');
  const HTMLWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
+     index: './src/index.js'
-     index: './src/index.js',
-     another: './src/another-module.js'
    },
    plugins: [
      new HTMLWebpackPlugin({
        title: 'Code Splitting'
-     }),
+     })
-     new webpack.optimize.CommonsChunkPlugin({
-       name: 'common' // 指定公共 bundle 的名稱。
-     })
    ],
    output: {
      filename: '[name].bundle.js',
+     chunkFilename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

 

注意，這裡使用了 chunkFilename，它決定非入口 chunk 的名稱。想了解 chunkFilename 更多資訊，請檢視 output 相關文件。接著，更新我們的專案，移除掉那些現在不會用到的檔案:

project

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
  |- index.js
- |- another-module.js
|- /node_modules

 

現在，我們不再使用靜態匯入 lodash，而是通過使用動態匯入來分離一個 chunk：

src/index.js

- import _ from 'lodash';
-
- function component() {
+ function getComponent() {
-   var element = document.createElement('div');
-
-   // Lodash, now imported by this script
-   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
+     var element = document.createElement('div');
+
+     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+
+     return element;
+
+   }).catch(error => 'An error occurred while loading the component');
  }

- document.body.appendChild(component());
+ getComponent().then(component => {
+   document.body.appendChild(component);
+ })

 

注意，在註釋中使用了 webpackChunkName。這樣做會導致我們的 bundle 被命名為 lodash.bundle.js，而不是 [id].bundle.js 。想了解更多關於 webpackChunkName 和其他可用選項，請檢視 import()相關文件。讓我們執行 webpack，檢視 lodash 是否會分離到一個單獨的 bundle：

Hash: a27e5bf1dd73c675d5c9
Version: webpack 2.6.1
Time: 544ms
           Asset     Size  Chunks                    Chunk Names
lodash.bundle.js   541 kB       0  [emitted]  [big]  lodash
 index.bundle.js  6.35 kB       1  [emitted]         index
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] ./src/index.js 377 bytes {1} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]

 

如果你已經通過類似 babel 的前處理器(pre-processor)啟用 async 函式，請注意，你可以像下面那樣簡化程式碼，因為 import() 語句恰好會返回 promises：

src/index.js

- function getComponent() {
+ async function getComponent() {
-   return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
-     var element = document.createElement('div');
-
-     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
-
-     return element;
-
-   }).catch(error => 'An error occurred while loading the component');
+   var element = document.createElement('div');
+   const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
+
+   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+
+   return element;
  }

  getComponent().then(component => {
    document.body.appendChild(component);
  });

 

4. bundle 分析(bundle analysis)

如果我們以分離程式碼作為開始，那麼就以檢查模組作為結束，分析輸出結果是很有用處的。官方分析工具 是一個好的初始選擇。下面是一些社群支援(community-supported)的可選工具：

  • webpack-chart: webpack 資料互動餅圖。
  • webpack-visualizer: 視覺化並分析你的 bundle，檢查哪些模組佔用空間，哪些可能是重複使用的。
  • webpack-bundle-analyzer: 一款分析 bundle 內容的外掛及 CLI 工具，以便捷的、互動式、可縮放的樹狀圖形式展現給使用者。

相關推薦

webpack 程式碼分離

本指南擴充套件了起步和管理輸出中提供的示例。請確保您至少已熟悉其中提供的示例。 程式碼分離是 webpack 中最引人注目的特性之一。此特效能夠把程式碼分離到不同的 bundle 中，然後可以按需載入或並行載入這些檔案。程式碼分離可以用於獲取更小的 bundle，以及控制資源載入優先順序，如果使用

webpack程式碼分離精華（轉載）

webpack ensure相信大家都聽過。有人稱它為非同步載入，也有人說做程式碼切割，那這 個傢伙到底是用來幹嘛的？其實說白了，它就是把js模組給獨立匯出一個.js檔案的，然後使用這個 模組的時候，webpack會構造script dom元素，由瀏覽器發起

使用Webpack的程式碼分離實現Vue懶載入（譯文）

當一個Vue的專案體積變得十分龐大的時候，使用Webpack的程式碼分離功能將Vue Components，routes或Vuex的程式碼進行分離並按需載入，會極大的提高App的首屏載入速度。 在Vue的專案中，我們可以在三種不同的情況下使用懶載入和程式碼分離功能： Vue元

使用Webpack的程式碼分離實現Vue懶載入

當一個Vue的專案體積變得十分龐大的時候，使用Webpack的程式碼分離功能將Vue Components，routes或Vuex的程式碼進行分離並按需載入，會極大的提高App的首屏載入速度。 在Vue的專案中，我們可以在三種不同的情況下使用懶載入和程式碼分離功能： Vue元件，也稱為非同步元件

【webpack學習筆記】a07-程式碼分離

官方文件說進行程式碼分離有三種方法： 入口起點：使用entry配置手動分離。 防止重複：使用CommonsChunkPlugin外掛去重合分離chunk 注：在webpack4中，CommonsChunkPlugin已經被廢棄，改用optimization.splitChunks 動態分離

webpack打包分離第三方庫和業務代碼

三方 插件 put 結果 name aec mode ebp src 使用webpack打包工程，通常會需要分離第三方類庫和應用本身的代碼，因為第三方類庫更新頻率不高，這樣瀏覽器可以直接從緩存讀，不需要項目每次上線再獲取一次。 以react為例，正常情況下，最初是這麽配置

webpack程式碼分割技巧

1. 程式碼中定義分割點 webpack支援在程式碼中定義分割點。分割點指定的模組只有在真正使用時才載入，可以使用webpack提供的require.ensure語法: $('#okButton').click(function(){ require.ensure([

Java&Selenium自動化測試實現頁面元素、頁面物件及測試程式碼分離

一、摘要 本篇博文將介紹自動化測試實現頁面元素、頁面物件及測試程式碼分離在自動化框架中的實現 二、解析頁面元素定位資訊 首先，將頁面元素與實際的程式碼分離，首先我們將頁面元素定位資訊和定位表示式儲存在屬性檔案中，例如我們PaaS平臺提供Mysql服務的頁面，在工程中新建一個名為MysqlService.

《程式設計珠璣》程式碼之路6：將邏輯和程式碼分離----編碼形式圖形化輸出字母

好啦比如字母I，輸出為： xxxxxxxxx xxxxxxxxx xxxxxxxxx      xxx           xxx          &nb

angular.js前端分層開發（頁面和js程式碼分離，並將js程式碼分層）

一、 抽取模組成base.js檔案// 定義模組: var app = angular.module("eshop",['pagination']); 二、 抽取服務成brandService.js檔案 / 定義服務層: app.service("brandService",f

Webpack 程式碼拆分

路由檔案main.jsx <Route path='/detail/:mid' getComponent={(location, cb) => {require.ensure([], require => {cb(null, require('./routes/Detai

Java連線資料庫 #05# SQL與程式碼分離 Java連線資料庫 #04#

索引 讀取html中的SQL語句 缺陷總結 在Java連線資料庫 #04#裡是大概是這樣放sql語句的： package org.sample.shop.db.queryrunner; import org.sample.shop.db.que

webpack程式碼部署index.html無內容顯示

 Tip: built files are meant to be served over an HTTP server.  Opening index.html over file:// won't work. 解決

基於python語言的selenium自動化測試（2）-測試程式碼與指令碼程式碼分離

上一篇介紹瞭如何搭建selenium環境，也給出了一小段程式碼演示如何使用selenium 部落格不會過多的介紹如何使用selenium api 更多地在於如何構建一個自動化測試專案， 程式碼的分層是很關鍵一步,本文介紹如何使用pytest+selenium

unity介面和程式碼分離解決方案

新手或者小規模的遊戲喜歡使用SetActive或者Instantiate prefab來切換介面，這樣可以，但是不靈活，也不規範，碰到大量程式碼的時候就會力不從心。 所謂介面與程式碼分離也就是將介面用程式碼封裝起來，再通過一個管理器來控制，方便其他程式的呼叫和控制 介紹一下

動易swCMS6.5網站面板與程式碼分離技術的原理

動易swCMS6.5網站面板與程式碼分離技術的原理 動易網站的面板，即前臺頁面。均製作成包含各種動易標籤的模板檔案 模板內容以文字形式儲存在資料庫中 通過位於檔案PowerEasy.Common.Front.asp中的 函式GetTemplate(iChannelID, T

webpack程式碼分割-使用require.ensure

1.背景     webpack是一款很好用的模組打包機，當我們開發單頁應用時，很常見的需求是把一堆模組打包成一個檔案，這時webpack就派上用場了。但是在一些場景下，我們可能有這樣的需求：一方面需要把一系列的檔案打包成一個檔案，另一方面還有一些模組是需要按需載入的（比如

用node.js和webpack做前後端分離的總結

調用 以及 定向 roc 目錄 加載 動靜 con 腳本 1.webpack打包的特點 （打包文件到指定地點，修改原文件裏的引用路徑為打包的地點） 涉及output的path/public path/dev-server裏的public path等概念 　webpack的入

webpack學習之—— Code Spliting(代碼分離)

ons height comm chunks 優先級 不能 tex pan ati 代碼分離特性能夠把代碼分離到不同的 bundle 中，然後可以按需加載或並行加載這些文件。代碼分離可以用於獲取更小的 bundle，以及控制資源加載優先級，如果使用合理，會極大影

webpack配置：less文件打包和分離

配置 ont style load http htm 引入 其他 nbsp 一、less文件打包和分離 　　1、要使用less，首先使用npm安裝less服務；還需要安裝Less-loader用來打包使用。 npm install less --save-dev np