深究 webpack 代码分离优化（二）

注：webpack 版本 4.26.1

---

准备：clean-webpack-plugin

你可以选择参考我的文章

准备：webpack-dev-server

你可以选择参考我的文章

一、探索引入方式 import / import {}

打包时，打包文件的效果与你在客户端写的代码密切相关。这里比较一下 es6 中 import 语法的两种引入方式。
方式一：import xxx from '...' 全引入并调用其中的方法

客户端代码：

//tool.js

var tool = {};

tool.fn1=()=>{
  ...
};

tool.fn2=()=>{
  ...
}

tool.fn3=()=>{
  ...
}

export default tool;

//index.js

import tool from './tool.js';

tool.fn1();      

这里我们引入模块 tool ，并且只调用 tool 的其中一个方法。我们打包后发现，打包的文件中将整个 tool.js 的所有方法代码全都打包进了依赖模块中（这里不再做打包后文件的源码展示），即使我们只需要其中的一两个方法。
这在大型项目中是致命的，试想，如果我们有几个特别大的库，但我们却只需要其中几个方法，而不能做到按需加载，将会严重影响应用性能。
下面再来探索
方式二：import { xxx } from '...' 部分引入

客户端代码：

//tool2.js
const fn1=()=>{
  ...
}

const fn2=()=>{
  ...
}

const fn3=()=>{
  ...
}

export { fn1, fn2, fn3 }

//index.js

import { fn1 } from './tool2.js';

fn1();      

这样打包出来的文件查看其中的代码发现，打包文件中只包含 fn1 的代码。fn2，fn3 的代码则完全没有被打包在其中，所以这种 import 方法做到了按需加载。

二、懒加载 import()

*只能读到 export default *

我们在管理优化页面的时候总是想尽可能地做到“最小量化”代码，理论的最佳实施是，转到一个页面时只加载此页面的必须代码，当出现必要的互动时再按需加载所需要的代码；然后当跳转至网站内部其他路由页面时再利用缓存省去加载公共模块的过程，只加载新页面的最小“非公约”模块。我们这里先只讨论前者———懒加载。
事实上懒加载不是通过配置 webpack 来实现的，而是对你的客户端代码做特殊写法。根据 webpack 官网的介绍，你可以选择使用 ES6 语法 import() 或者 require.ensure() 。这里我们只讲 import 用法。
我们做一个简单的懒加载示例：

//index.js

var item = document.getElementById("btn");

item.addEventListener("click", ()=>{
  import('./tool.js').then(tool=>{
    console.log(tool);
  })
})

这里懒加载过程通过 import 函数实现并绑定在一个点击事件上面，import() 将异步加载一个模块并返回一个 Promise 对象，通过 .then 方法可以继续向下执行加载好此模块后的后续操作。.then 回调函数的第一个参数是查询到的模块。
观察 chrome 文件清单，点击按钮后会多出现一个文件，该文件便是被单独打包的懒加载模块。

注意： import() 方式只能加载文件的 default export

三、加载css

你可以选择直接参考我的文章

扩展阅读
manifest
source map

---

作者水平有限，如有错误，欢迎指正交流。

---