溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何解決Webpack抽離第三方類庫以及common的問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
前端構建場景有兩種，一種是單頁面構建，另一種是多入口構建多頁面應用程序（我視野比較小，目前就知道這兩種），下面我們針對這兩種場景總結了幾種抽離第三方類庫以及公共文件的解決方案。
單頁面構建：
常規(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')
)我們看下構建輸出結果
現(xiàn)在我們看到這個應該思考三個問題
1.腳本部分，難道每個頁面都要寫一邊import React&ReactDOM 嗎
2.構建體積能不能再縮小一點
3.構建速度能不能在快一點
以上三個問題都會在開發(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一次了
構建體積怎么減小呢
這里我們可以借助webpack插件，下面我們上代碼
externals: {
'react': 'react',
'react-dom': 'react-dom'
},我們將兩個第三方類庫打包的時候不依賴進去就可以啦，我們看下打包效果
可以明顯的看到，采用這種用法之后會有一個問題就是，我們在腳本里面就不能在引用第三方類庫了，不然打包進去，external會找不到這個第三方導致報錯，直接用就好了，我們畢竟要解決的就是這個問題嘛。
以上就是第一種解決方案。
第二種
第二種方式采用將第三方類庫打包到指定的dll中，通過webpack構建應用時引用
涉及兩個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，我們應用的webpack需要引用這個dll
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./distDll/dll/react.manifest.json')
}),到這里就結束了嗎，并不是，我們執(zhí)行下webpack會發(fā)現(xiàn)，React找不到了，我們首先考慮到什么，難道是external的問題嗎，你會發(fā)現(xiàn)跟它一點關系沒有，難道我們每次寫還要導入第三方類庫嗎，解決方案
ProvidePlugin
new webpack.ProvidePlugin({
'React': 'react',
'ReactDOM': 'react-dom'
})這樣就解決了這個問題，我們看下構建效果
同樣也達到了我們的目的
方案三
方案三采用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引用共同的文件導致的體積過大，也就是我們要解決的如何提取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構建過程，是不是都要打一次這個包呢，浪費時間了吧，于是我們采用什么方式呢，沒錯~采用DllPlugin與DllReferencePlugin來提取一次第三方，
剩下common部分每一次構建都去重新打一次。
代碼同樣引用dll
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./distDll/dll/react.manifest.json')
})構建效果
效果就是大幅度提升構建速度。
最終配置文件
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抽離第三方類庫以及common的問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
