詳解Webpack抽離第三方類庫以及common解決方案

更新時間：2020年03月30日 11:15:50 作者：漠然1992丶

這篇文章主要介紹了詳解Webpack抽離第三方類庫以及common解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前端構(gòu)建場景有兩種，一種是單頁面構(gòu)建，另一種是多入口構(gòu)建多頁面應(yīng)用程序（我視野比較小，目前就知道這兩種），下面我們針對這兩種場景總結(jié)了幾種抽離第三方類庫以及公共文件的解決方案。

如果有哪些地方優(yōu)化不周到，請指點一二，另外求關(guān)注求星星，么么噠

單頁面構(gòu)建：

常規(guī)配置

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  mode: "development",
  entry: {
    app: './app.js'
  },
  output: {
    path: path.resolve(__dirname, './build/'),
    filename: "bundle-[chunkhash:8].js"
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ],
        exclude: /node_modules/
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',  // translates CSS into CommonJS
          'less-loader',   // compiles Less to CSS
        ],
        exclude: /node_modules/
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [{
          loader: 'file-loader',
          options: {
            limit: 1024,
          }
        }],
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[chunkhash:8].css",
      chunkFilename: "[id].[chunkhash:8].css"
    }),
    new HtmlWebpackPlugin({
      title: 'webpack',
      template: './index.html',
      chunks: ['app']
    }),
    new CleanWebpackPlugin()
  ],
}

在腳本種我們常規(guī)寫法是這樣的

require('./main-less.less');
require('./main-css.css');
const ReactDOM = require('react-dom');
const React = require('react');
import Main from './main.js';
// /**
// * 引入 scope hisiting test
// */
// import B from './ScopeHisitingTest/b';
ReactDOM.render(
  <Main />,
  document.getElementById('app')
)

我們看下構(gòu)建輸出結(jié)果

現(xiàn)在我們看到這個應(yīng)該思考三個問題

　　1.腳本部分，難道每個頁面都要寫一邊import React&ReactDOM 嗎

　　2.構(gòu)建體積能不能再縮小一點

　　3.構(gòu)建速度能不能在快一點

以上三個問題都會在開發(fā)過程中耽誤開發(fā)效率，我們開始處理這三個問題

方案1

html全局引用第三方類庫，比如React，因為React源碼中將React掛在到了window上，這么做解決了什么呢，腳本里面我們不用在每一個頁面中引用第三方類庫了，我們看下代碼

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <div id='app'></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</body>

</html>

好了解決了腳本部分不用每個頁面都需要import一次了

構(gòu)建體積怎么減小呢

這里我們可以借助webpack插件，下面我們上代碼

 externals: {
    'react': 'react',
    'react-dom': 'react-dom'
  },

我們將兩個第三方類庫打包的時候不依賴進去就可以啦，我們看下打包效果

可以明顯的看到，采用這種用法之后會有一個問題就是，我們在腳本里面就不能在引用第三方類庫了，不然打包進去，external會找不到這個第三方導(dǎo)致報錯，直接用就好了，我們畢竟要解決的就是這個問題嘛。

以上就是第一種解決方案。

第二種

第二種方式采用將第三方類庫打包到指定的dll中，通過webpack構(gòu)建應(yīng)用時引用

涉及兩個Plugin，分別是DllReferencePlugin，DllPlugin

首先創(chuàng)建一個專門針對dll的webpack配置文件

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

module.exports = {
  entry: {
    react: [
      'react',
      'react-dom'
    ]
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, './distDll/dll/'),
    library: '[name]_dll_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_dll_[hash]',
      context: __dirname,
      path: path.join(__dirname, 'distDll/dll', '[name].manifest.json')
    })
  ]
}

然后執(zhí)行這個webpack，生成dll以及描述模塊運行依賴的manifest.json，我們應(yīng)用的webpack需要引用這個dll

 new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./distDll/dll/react.manifest.json')
    }),

到這里就結(jié)束了嗎，并不是，我們執(zhí)行下webpack會發(fā)現(xiàn)，React找不到了，我們首先考慮到什么，難道是external的問題嗎，你會發(fā)現(xiàn)跟它一點關(guān)系沒有，難道我們每次寫還要導(dǎo)入第三方類庫嗎，解決方案

ProvidePlugin

 new webpack.ProvidePlugin({
      'React': 'react',
      'ReactDOM': 'react-dom'
    })

這樣就解決了這個問題，我們看下構(gòu)建效果

同樣也達到了我們的目的

方案三

方案三采用optimization分離，其實與多頁面分離第三方與common部分的用法是一樣的，我們就跟多頁面一起具體了。

多頁面解決方案

基本配置

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    app1: './app1.js',
    app2: './app2.js'
  },
  output: {
    path: path.resolve(__dirname, './build/'),
    filename: "[name]-[chunkhash].js"
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
          },
          'less-loader',

        ],
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        use: [
          'cache-loader',
          {
            loader: 'babel-loader',
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash:5].css',
    }),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'index1',
      template: './index1.html',
      filename: 'index1.html',
      chunks: ['app1', 'common'],
      // hash: true
    }),
    new HtmlWebpackPlugin({
      title: 'index2',
      template: './index2.html',
      filename: 'index2.html',
      chunks: ['app2', 'common'],
      // hash: true
    }),
    new webpack.HashedModuleIdsPlugin(),
  ],

}

打包效果

問題很明顯，速度慢，體積過大，這里還有個問題就是，app1的與app2引用共同的文件導(dǎo)致的體積過大，也就是我們要解決的如何提取common部分的問題，這里我們就不討論腳本import 第三方的問題了，上面有解決方案了。

提取common部分

optimization: {
    runtimeChunk: {
      "name": "manifest"
    },
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        default: false,
        vendors: false,
        common: {
          test: /\.(s*)js$/,
          chunks: 'all',
          minChunks: 2,
          minSize: 0,
          name: 'common',
          enforce: true,
          priority: -11
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: -10,
          chunks: 'all',
          reuseExistingChunk: true,
          enforce: true
        },
        style: {
          name: 'style',
          test: /\.less$/,
          chunks: 'all',
          enforce: true
        }
      }
    },
    runtimeChunk:{
      name:'manifest'
    }
  },

這里我們要做的是，提供commonjs，合并css（提取common部分也是可以的，畢竟頁面也不可能用全部的css，做法與提取commonjs是一樣的，配置minChunks最小為2就可以了），提供第三方類庫。

我們看下打包效果

速度提升了，同時生成了common文件以及提三方文件集合verndors文件，嗯，目前解決了我們要解決的問題，上面單頁面場景同樣適用，瀏覽器緩存這個一般不會變得vendors，也達到了提升效率問題，

但是有沒有想過一個問題，就是每一次webpack構(gòu)建過程，是不是都要打一次這個包呢，浪費時間了吧，于是我們采用什么方式呢，沒錯~采用DllPlugin與DllReferencePlugin來提取一次第三方，

剩下common部分每一次構(gòu)建都去重新打一次。

代碼同樣引用dll

 new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./distDll/dll/react.manifest.json')
    })

構(gòu)建效果

效果就是大幅度提升構(gòu)建速度。

最終配置文件

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    app1: './app1.js',
    app2: './app2.js'
  },
  output: {
    path: path.resolve(__dirname, './build/'),
    filename: "[name]-[chunkhash].js"
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            // options: {
            //   sourceMap: true,
            //   modules: true,
            //   localIdentName: '[name]---[local]---[hash:base64:5]'
            // }
          },
          'less-loader',

        ],
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        use: [
          'cache-loader',
          {
            loader: 'babel-loader',
            options: {
              // cacheDirectory: path.join(__dirname,'./build/', 'babel_cache')
              // happyPackMode: true,
              // transpileOnly: true
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  optimization: {
    runtimeChunk: {
      "name": "manifest"
    },
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        default: false,
        vendors: false,
        common: {
          test: /\.(s*)js$/,
          chunks: 'all',
          minChunks: 2,
          minSize: 0,
          name: 'common',
          enforce: true,
          priority: -11
        },
        // vendors: {
        //   test: /[\\/]node_modules[\\/]/,
        //   name: "vendors",
        //   priority: -10,
        //   chunks: 'all',
        //   reuseExistingChunk: true,
        //   enforce: true
        // },
        style: {
          name: 'style',
          test: /\.less$/,
          chunks: 'all',
          enforce: true
        }
      }
    },
    runtimeChunk:{
      name:'manifest'
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash:5].css',
    }),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'index1',
      template: './index1.html',
      filename: 'index1.html',
      chunks: ['app1', 'common'],
      // hash: true
    }),
    new HtmlWebpackPlugin({
      title: 'index2',
      template: './index2.html',
      filename: 'index2.html',
      chunks: ['app2', 'common'],
      // hash: true
    }),
    new webpack.HashedModuleIdsPlugin(),
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./distDll/dll/react.manifest.json')
    })
  ],
}

以上就是針對webpack構(gòu)建優(yōu)化全部總結(jié)，涉及第三方抽取，common抽取等問題。更多相關(guān)Webpack抽離第三方類庫及common內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: