前言

代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。

有三种常用的代码分离方法：

入口起点：使用 entry 配置手动地分离代码。
防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。
动态导入：通过模块的内联函数调用来分离代码。

1. 入口起点

将想要分离的两个文件设置成两个入口文件

const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    main: './src/main.js',
    another: './src/vender.js'
  },
  output: {
    filename: '[name].bundle.js',
  },
  plugins: [new HTMLWebpackPlugin({title: 'Code Splitting'})],  
};

问题：

如果入口 chunks 之间包含重复的模块，那些重复模块也会被引入到各个 bundle 中。
不够灵活，且不能将核心应用程序逻辑进行动态拆分代码

2. 防止重复

CommonsChunkPlugin插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。这里采取后者，将提取公共部分到新生成的chunk

const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack=require('webpack')//添加
module.exports = {
  entry: {
    main: './src/main.js',
    another: './src/vender.js'
  },
  output: {
    filename: '[name].bundle.js',
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: 'Code Splitting'
    }),
   	new webpack.optimize.CommonsChunkPlugin({
        name:'common' //将公共bundle命名为common
    })
  ],
};

其他代码分离的插件和loaders：

ExtractTextPlugin: 用于将 CSS 从主应用程序中分离。

bundle-loader: 用于分离代码和延迟加载生成的 bundle。

promise-loader: 类似于 bundle-loader ，但是使用的是 promises。

3. 动态导入

第一种方式是 import() 语法；第二种是使用 webpack 特定的 require.ensure。现将配置文件处理一下：

const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    main: './src/main.js',//恢复成一个入口文件
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',//chunkFilename决定非入口 chunk 的名称
  },
  plugins: [new HTMLWebpackPlugin({title: 'Code Splitting'})],
};

import()方式示例

bar.js：假设这是一个需要被导入的文件

export function add(a,b){
    return a+b
}

main.js 原本写法

import {add} from './bar.js'
console.log(add(2,3))

main.js import()写法

import('./bar.js').then(({add})=>{ //生成[id].bundle.js
    console.log(add(2,3))
})

打包后发现，import()内的内容会分离到一个单独的bundle

webpack笔记11-应用篇-代码分离

前言

1. 入口起点

2. 防止重复

3. 动态导入