如何分析Webpack代碼分離

本篇文章給大家分享的是有關(guān)如何分析Webpack代碼分離，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

Webpack 代碼分離

 提示：

1. 版本問(wèn)題

下面基于 webpack 2.x 版本。webpack 2.x 相比 webpack 1.x 有重大改變。所以，如果你的項(xiàng)目中已使用了 webpack 1.x ，本教程的示例將不適用，請(qǐng)慎重。

如果鐵了心要升級(jí) webpack ，請(qǐng)參考 webpack 官方文檔 - 從 v1 遷移到 v2

1. 閱讀建議

閱讀前建議先閱讀 Webpack 概念 。

代碼分離是 webpack 中最引人注目的特性之一。

你可以把你的代碼分離到不同的 bundle 中，然后你就可以去按需加載這些文件。

總的來(lái)說(shuō)， webpack 分離可以分為兩類：

• 資源分離

• 代碼分離

資源分離(Resource Splitting)

對(duì)第三方庫(kù)(vendor) 和 CSS 進(jìn)行代碼分離，這些方式有助于實(shí)現(xiàn)緩存和并行加載。

分離 CSS(CSS Splitting)

你可能也想將你的樣式代碼分離到單獨(dú)的 bundle 中，以此使其獨(dú)立于應(yīng)用程序邏輯。這加強(qiáng)了樣式的可緩存性，并且使得瀏覽器能夠并行加載應(yīng)用程序代碼中的樣式文件，避免 FOUC 問(wèn)題 (無(wú)樣式內(nèi)容造成的閃爍)。

安裝 ExtractTextWebpackPlugin 如下

$ npm install --save-dev extract-text-webpack-plugin

webpack.config.js 中需要按下面進(jìn)行配置：

const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {

  // 關(guān)于模塊配置
  module: {

    // 模塊規(guī)則（配置 loader、解析器等選項(xiàng)）
    rules: [      {
        // css 加載
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: "css-loader"
        })      }
    ]  },

  // 附加插件列表
  plugins: [    // 將樣式文件獨(dú)立打包
    new ExtractTextPlugin("styles.css")
  ]};

 示例DEMO09： (DEMO / SOURCE)

分離第三方庫(kù)(Vendor Code Splitting)

一個(gè)典型的應(yīng)用程序，由于框架/功能性需求，會(huì)依賴于許多第三方庫(kù)的代碼。不同于應(yīng)用程序代碼，這些第三方庫(kù)代碼不會(huì)頻繁修改。

如果我們將這些庫(kù)(library)中的代碼，保留在與應(yīng)用程序代碼相獨(dú)立的 bundle 中，我們就可以利用瀏覽器緩存機(jī)制，把這些文件長(zhǎng)時(shí)間地緩存在用戶機(jī)器上。

為了完成這個(gè)目標(biāo)，不管應(yīng)用程序代碼如何變化，vendor 文件名中的 hash 部分必須保持不變。學(xué)習(xí)如何使用 CommonsChunkPlugin 分離 vendor/library 代碼。

webpack.config.js

const webpack = require('webpack');module.exports = {
  // 這里應(yīng)用程序開(kāi)始執(zhí)行
  // webpack 開(kāi)始打包
  // 本例中 entry 為多入口
  entry: {
    main: "./app/index",
    vendor: "react"
  },
  
  // webpack 如何輸出結(jié)果的相關(guān)選項(xiàng)
  output: {
    // 所有輸出文件的目標(biāo)路徑
    // 必須是絕對(duì)路徑（使用 Node.js 的 path 模塊）
    path: path.resolve(__dirname, "dist"),

    // 「入口分塊(entry chunk)」的文件名模板（出口分塊？）
    // filename: "bundle.min.js",
    // filename: "[name].js", // 用于多個(gè)入口點(diǎn)(entry point)（出口點(diǎn)？）
    // filename: "[chunkhash].js", // 用于長(zhǎng)效緩存
    filename: "[name].[chunkhash:8].js", // 用于長(zhǎng)效緩存
  },

  // 附加插件列表
  plugins: [    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor" // 指定公共 bundle 的名字。
    })
  ]};

在上面的配置中，

1. 在 entry 屬性中，將 react 指定為一個(gè)獨(dú)立的入口 vendor；

2. 然后，在 output 屬性中，將 filename 指定為 [name].[chunkhash:8].js，這表示輸出文件的文件名樣式。

3. 最后在 plugins 列表中引入 CommonsChunkPlugin 插件，用來(lái)指定 bundle 。

執(zhí)行 webpack 命令后，webpack 會(huì)生成 2 個(gè) bundle 文件，形式如：

main.bef8f974.jsvendor.2f1bd4c8.js

 示例DEMO10： (DEMO / SOURCE)

代碼按需分離(On Demand Code Splitting)

雖然前面幾類資源分離，需要用戶預(yù)先在配置中指定分離模塊，但也可以在應(yīng)用程序代碼中創(chuàng)建動(dòng)態(tài)分離模塊。

這可以用于更細(xì)粒度的代碼塊，例如，根據(jù)我們的應(yīng)用程序路由，或根據(jù)用戶行為預(yù)測(cè)。這可以使用戶按照實(shí)際需要加載非必要資源。

前一節(jié)，我們了解了 webpack 可以將資源拆分為bundle。接下來(lái)，我們要學(xué)習(xí)如何異步加載。例如，這允許首先提供最低限度的引導(dǎo) bundle，并在稍后再異步地加載其他功能。

webpack 支持兩種相似的技術(shù)實(shí)現(xiàn)此目的：使用 import() (推薦，ECMAScript 提案) 和 require.ensure() (遺留，webpack 特定)。本文只介紹官方推薦的 import() 方式。

ES2015 loader 規(guī)范定義了 import() 作為一種在運(yùn)行時(shí)(runtime)動(dòng)態(tài)載入 ES2015 模塊的方法。

webpack 把 import() 作為一個(gè)分離點(diǎn)(split-point)，并把引入的模塊作為一個(gè)單獨(dú)的 chunk。 import() 將模塊名字作為參數(shù)并返回一個(gè) Promoise 對(duì)象，即 import(name) -> Promise

配合 Babel 使用

如果你想要在 Babel 中使用 import，但是由于 import() 還是屬于 Stage 3 的特性，所以你需要安裝/添加 syntax-dynamic-import 插件來(lái)避免 parser 報(bào)錯(cuò)。在草案正式成為規(guī)范后，就不再需要這個(gè)插件了。

例：

我們來(lái)定義一個(gè) Clock 組件，動(dòng)態(tài)引入 moment 庫(kù)。

首先，安裝 moment 庫(kù)。

$ npm install --save-dev moment

JavaScript 代碼：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date().toLocaleDateString() };
    this.click = this.click.bind(this);
  }

  click() {
    // 動(dòng)態(tài)引入import()
    import('moment')
      .then(moment => moment().format("MMMM Do YYYY, h:mm:ss a"))
      .then(str => this.setState({date:str}))
      .catch(err => console.log("Failed to load moment", err));
  }

  render() {
    return (      <div>
        <h3>It is {this.state.date}.</h3>        <p onClick={this.click}>Click here to changing the time.</p>
      </div>    );  }}

webpack.config.js

// 關(guān)于模塊配置module: {

  // 模塊規(guī)則（配置 loader、解析器等選項(xiàng)）
  rules: [    {
      // 語(yǔ)義解釋器，將 js/jsx 文件中的 es2015/react 語(yǔ)法自動(dòng)轉(zhuǎn)為瀏覽器可識(shí)別的 Javascript 語(yǔ)法
      test: /\.jsx?$/,
      include: path.resolve(__dirname, "app"),

      // 應(yīng)該應(yīng)用的 loader，它相對(duì)上下文解析
      // 為了更清晰，`-loader` 后綴在 webpack 2 中不再是可選的
      // 查看 webpack 1 升級(jí)指南。
      loader: "babel-loader",

      // loader 的可選項(xiàng)
      options: {
        presets: ["es2015", "react"],
        plugins: ['syntax-dynamic-import']      },
    },
  ]},

以上就是如何分析Webpack代碼分離，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。