webpack系类之代码分割和懒加载

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'