webpack代码分割和懒加载

单页面处理代码分割

引入第三方依赖

在页面引入中进行修改

// import * as _ from 'lodash'
修改为
require.ensure(['lodash'], function() {
  var _ = require('lodash')  // 注意，这里一定要require，上面的require不会真正的引入
  _.join(['1','2'], '3')
}, 'vendor') //这里是指定的chunkName

判断引入模块

在pageA里面修改代码
page = 'subpageA'

if (page === 'subpageA') {
  require.ensure(['./subPageA'], function() {
    var subpageA = require('./subPageA')
  }, 'subPageA')
}else {
  require.ensure(['./subPageB'], function() {
    var subpageA = require('./subPageB')
  }, 'subPageB')
}

// import './subPageA'
// import './subPageB'

// 分离页面代码和第三方依赖
require.ensure(['lodash'], function() {
  var _ = require('lodash')
  _.join(['1','2'],'3')
},'vendor')
// import * as _ from 'lodash'
export default 'PageA'

抽离公共代码块modulesA

因为modulesA代码是同时被subpageA和subpageB页面引入的，在pageA页面中，我们有进行判断是引入subpageA还是subPageB页面，所以我们直接
在pageA里面直接引入moduleA
require.include('./moduleA')

这样进行打包的时候，我们在subPageA和subPageB的包里面就没有modelA的代码，而是放在了common里面了
这里需要在webpack.config.js里面进行配置
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2,
      chunks: ['pageA', 'pageB']
    }),
      
 如果没有进行配置optimeze插件的话，moduleA里面的代码会被打包到pageA代码里面

动态import 和 require.ensure不一样的地方：

import 引入后直接就执行了

动态import

if (page === 'subpageA') {
  // require.ensure(['./subPageA'], function() {
  //   var subpageA = require('./subPageA')
  // }, 'subPageA')
  import('./subPageA').then(function(subPageA) {
    console.log(subPageA)
  })
 }

如果不指定chunkName, 会打包成1/2等类型的chunkName
在动态import中指定chunkName 需要用到魔法注释
import(/* webpackChunkName: 'subPageA' */ './subPageA').then(function(data) {
  console.log(data)
})

async

这个有什么用？，如果是多entry进行打包的话，是把公共模块的代码打包出来–不用指定哪个模块引用了公共模块了

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    async: 'async-common',   指定打包的chunkname	
    children: true,			注意这个属性不可以和chunk等一些属性共用（具体自行百度）
    minChunks:2
  })
]