打包命令
- 為了development模式下也能很好觀察打包的文件彻磁，我們?cè)趐ackage.json中增加一個(gè)打包命令舶得，不使用devServer
"scripts": {
"dev": "webpack --config ./config/webpack.dev.js",
"start": "webpack-dev-server --config ./config/webpack.dev.js",
"build": "webpack --config ./config/webpack.prod.js"
}
index.js引入lodash
- 安裝lodash
npm install lodash -D
- index.js使用lodash
import _ from 'lodash'
console.log(_.join(['a','b','c'],'***'))
- 打包后生成的文件很大
- 打包文件會(huì)很大显押，加載時(shí)間會(huì)很長(zhǎng)，改了業(yè)務(wù)代碼投蝉，重新訪問(wèn)我們的頁(yè)面膊爪，又要重新加載這么大的文件內(nèi)容
寫代碼時(shí)的代碼分割
- 新建一個(gè)lodash.js文件
// 導(dǎo)入import 文件，并且將lodash掛載到window對(duì)象上
import _ from 'lodash'
window._ = _
- 修改index.js
// 不需要import lodash管毙，可直接使用_
console.log(_.join(['a','b','c'],'***'))
- 修改webpack.common.js
// 打包的入口文件改為兩個(gè)腿椎，單獨(dú)打包lodash
entry: {
lodash: './src/lodash.js',
main: './src/index.js',
},
- main.js被拆成loadash.js 和 mian.js(業(yè)務(wù)代碼)，瀏覽器并行加載兩個(gè)文件夭咬，當(dāng)業(yè)務(wù)代碼發(fā)生變化啃炸，用戶不需加載lodash，只需加載main.js
利用webpack實(shí)現(xiàn)代碼分割
- 不需要開發(fā)者自己再寫個(gè)lodash.js將lodash掛載到window卓舵，而是自動(dòng)把類庫(kù)拆分成一個(gè)文件
- 修改index.js
// 導(dǎo)入lodash
import _ from 'lodash'
console.log(_.join(['a','b','c'],'***'))
- 修改webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: {
// 打包index.js文件
main: './src/index.js',
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin({
root: path.resolve(__dirname, '../')
}),
],
output: {
path: path.resolve(__dirname, '../build'),
filename: '[name].js'
},
optimization: {
// 設(shè)置splitChunks
splitChunks: {
chunks: "all"
}
}
}
- 打包后index.js會(huì)自動(dòng)變?yōu)閮蓚€(gè)文件南用，實(shí)現(xiàn)了自動(dòng)的代碼分割
異步import的代碼分割
- 異步import需要引入官方的babel
npm install @babel/plugin-syntax-dynamic-import -D
- 修改babelrc
{
"presets": [
[
"@babel/preset-env",{
"targets": {
"chrome": "67"
},
"useBuiltIns": "usage"
}
],
"@babel/preset-react"
],
// 使用異步 import 插件
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
- 修改index.js為異步import方式
function getComponent() {
return import('lodash').then(({ default: _ }) => {
var element = document.createElement('div')
element.innerHTML =_.join(['a','b','c'],'***')
return element
})
}
getComponent().then(element => document.body.appendChild(element))
- 打包index.js會(huì)拆分成兩個(gè)文件
- 打開index.html
- 可以指定生成的chunk文件的文件名
function getComponent() {
// 通過(guò)這種注解生成chunkname，將生成的chunk文件指定文件名為lodash
return import(/* webpackChunkName:'lodash' */'lodash').then(( _ ) => {
var element = document.createElement('div')
element.innerHTML =_.join(['a','b','c'],'***')
return element
})
}
getComponent().then(element => document.body.appendChild(element))
splitChunks配置項(xiàng)
- 修改
webpack.common.js
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
vendors: false,
default: false
}
}
}
- 打包生成的文件不再用vendors前綴
splitChunks默認(rèn)配置項(xiàng)
optimization: {
// splitChunks: {},
// 等價(jià)于
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
chunks配置
-
默認(rèn)為async
// 代碼分割時(shí)只對(duì)異步代碼生效掏湾，同步 import lodash 不進(jìn)行代碼分割 chunks: 'async'- 避免受其他因素干擾我們將cacheGroups都先置為false,minSize 和 maxSize 都設(shè)置為0
splitChunks: { chunks: 'async', minSize: 0, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { // vendors: { // test: /[\\/]node_modules[\\/]/, // priority: -10, // filename: "vendors.js" // }, // default: { // // minChunks: 2, // priority: -20, // reuseExistingChunk: true, // filename: "common.js" // } vendors: false, default: false } }- 修改index.js為同步import方式
import _ from 'lodash' var element = document.createElement('div') element.innerHTML =_.join(['a','b','c'],'***') document.body.appendChild(element)- 打包不會(huì)進(jìn)行代碼分割
- 修改index.js為異步import方式
function getComponent() { return import(/* webpackChunkName:'lodash' */'lodash').then(( _ ) => { var element = document.createElement('div') element.innerHTML =_.join(['a','b','c'],'***') return element }) } getComponent().then(element => document.body.appendChild(element))- 打包時(shí)會(huì)進(jìn)行代碼分割
-
對(duì)同步異步都進(jìn)行打包 (initial為對(duì)同步代碼做分割)
chunks: 'all'- 需要配合cacheGroups選項(xiàng),否則同步import 仍舊不會(huì)進(jìn)行代碼分割
cacheGroups: { vendors: { // node_modules里面的文件分割打到單獨(dú)文件里 test: /[\\/]node_modules[\\/]/, priority: -10 }, default: false }- 打包后代碼被分割裹虫，
vendors~main表示打包了vendors文件，入口是main
- 可以修改vendors文件的文件名
vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, // 文件名為vendors.js(異步import不可用) filename: "vendors.js" },- 打包后文件名為vendors.js
-
非node_module庫(kù)的import
- 新建a.js
export default { num : 1 }- index.js導(dǎo)入a.js
import a from './a' console.log(a.num)- 符合代碼分割后會(huì)走到cacheGroups融击，因?yàn)椴辉趎ode_modules里筑公，所以不會(huì)走vendros，而是走到default配置砚嘴，因此我們需要修改cacheGroups
cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, filename: "vendors.js" }, default: { priority: -20, reuseExistingChunk: true, } }- 打包后a.js會(huì)被打包到default~main.js中
- default設(shè)置filename
default: { priority: -20, reuseExistingChunk: true, filename: "common.js" }
minSize 配置
- 默認(rèn)引入的模塊大于30000個(gè)字節(jié)才做split
minSize: 30000
- 上例中引入a.js十酣，設(shè)置minSize后打包，就不會(huì)進(jìn)行代碼分割
- 將minSize改為
minSize: 1后打包會(huì)進(jìn)行代碼分割际长，生成common.js文件
maxSize 配置
- 配置maxSize,限定最大值，超過(guò)就會(huì)進(jìn)行二次拆分
// 引入的模塊大于1個(gè)字節(jié)才做split
minSize: 1,
// 引入的a.js限定了最大值兴泥，超過(guò)就會(huì)對(duì)文件進(jìn)行二次拆分
maxSize: 2,
- 打包后commin.js被二次拆分
- 一般不使用
minChunks
- minChunks表示一個(gè)代碼至少被引用過(guò)多少次才進(jìn)行代碼分割
- 修改minChunks的值
minChunks: 2
index.js引用lodash
打包的代碼不會(huì)進(jìn)行代碼分割
- 新建other.js工育，在改文件中也引用lodash
- webpack.common.js中對(duì)other.js也進(jìn)行打包操作
entry: {
main: './src/index.js',
other: './src/other.js'
}
- 此時(shí)lodash會(huì)被分割出來(lái)，vendorsmainother表示main和other都引用了該文件
多個(gè)文件
- main.js引入了lodash,other.js引入了lodash和jquery, a.js引入了jquery,這個(gè)時(shí)候如果cacheGroups還設(shè)定fileName會(huì)發(fā)生沖突
- 將filename改為name,lodash和jquery都打到了vendors.js文件中
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
name: "vendors"
}
- 注釋掉name,會(huì)分割為
vendors~a~other.js和vendors~main~other.js
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
//name: "vendors"
}
其他配置
- 其他配置
// 同時(shí)加載的模塊數(shù)最多5個(gè)搓彻，超過(guò)5個(gè)不做代碼分割
maxAsyncRequests: 5,
// 入口文件引入的文件最多三個(gè)代碼分割
maxInitialRequests: 3,
// 生成文件名稱連接符
automaticNameDelimiter: '~',
// cacheGroups 里 filename 有效
name: true,
- cacheGroups的配置
default: {
// minChunks: 2,
// 優(yōu)先級(jí)低于-10如绸，所以node_modules里面用vendors
priority: -20,
// 一個(gè)模塊已經(jīng)被引用過(guò)嘱朽，就直接復(fù)用，不用再打包
reuseExistingChunk: true,
filename: "common.js"
},
