webpack系類之程式碼分割和懶載入
阿新 • • 發佈:2019-01-29
webpack實現程式碼方式是主要是通過模組的引入方式
1.require.ensure
//進行程式碼分割
require.ensure(['lodash'],function(){
var _ = require('lodash');//上邊的require.ensure只會引入進來,但是並不會執行,再次require才會執行。
},'vendor')
或者:
if(page=='subPageA'){
require.ensure(['./subPageA'],function(){
var subPageA=require('subPageA' );
},'subPageA')
}else if(page=='subPageB'){
require.ensure(['./subPageB'],function(){
var subPageA=require('subPageB');
},subPageB)
}
或者:
require.ensure(['./subPageA','./subPageB'],function(){
var subPageA=require('subPageA');
var subPageB=require('subPageB');
},common)
//common表示這個模組的名字
但是僅僅這樣配置並不能把公共js抽離出來,在多頁面應用中可以通過new webpack.optimize.CommonsChunkPlugin這個plugin來實現,但是對於單頁面來說,就需要藉助require.include了
require.include('./moduleA')
if(page=='subPageA'){
require.ensure(['./subPageA'],function(){
var subPageA=require('subPageA');
},'subPageA')
}else if(page=='subPageB' ){
require.ensure(['./subPageB'],function(){
var subPageA=require('subPageB');
},subPageB)
}
這樣就會把公共模組moduleA給抽離出來
2.import
import與require.ensure最大的區別就是,他在引入的時候會直接執行,而不需要在此require了
import('./subPageA').then(function(){
})
但是這樣打包出來的是沒有chunkname的,怎麼新增chunkname呢?需要webpack3+的魔法註釋
import(/*webpackChunkName:'subPageA'*/'./subPageA').then(function(){
})
3 .非同步載入公共模組
var webpack=require('webpack')
var path=require('path')
module.exports={
entry:{
'pageA':'./src/pageA',
'pageB':'./src/pageB',
'vendor':['lodash']
},
output:{
path:path.resolve(__dirname,'./dist'),
filename:'[name].bundle.js',
publicPath:'./dist/',
chunkFilename:'[name].chunk.js'
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
async:'async-common',
//要一部提取公共模組,可以不用指定name,
children:true,
//children表示並不僅僅從當前頁面抽離公共程式碼,當前頁面的子頁面也要抽取
minChunks:2
})
]
}
pageA.js:
import * as _ from 'lodash'
var page = "subpageA"
if(page==-"subpageA"){
import(/*webpackChunkName:'subpageA'*/'./subpageA').then(function(subpageA){
console.log('subpageA');
})
}else if(page==-"subpageB"){
import(/*webpackChunkName:'subpageB'*/'./subpageB').then(function(subpageB){
console.log('subpageB');
})
}
export default 'pageA'
pageB:
import * as _ from 'lodash'
var page = "subpageB"
if(page==-"subpageA"){
import(/*webpackChunkName:'subpageA'*/'./subpageA').then(function(subpageA){
console.log('subpageA');
})
}else if(page==-"subpageB"){
import(/*webpackChunkName:'subpageB'*/'./subpageB').then(function(subpageB){
console.log('subpageB');
})
}
export default 'pageB'