webpack4学习（二）代码分离

[dongtianqi]

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。
有三种常用的代码分离方法：
入口起点：使用 entry 配置手动地分离代码。
防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。
动态导入：通过模块的内联函数调用来分离代码。
一. 这是迄今为止最简单、最直观的分离代码的方式。
二. plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // 指定公共 bundle 的名称。
})
],
三. 当涉及到动态代码拆分时，webpack 提供了两个类似的技术。对于动态导入，第一种，也是优先选择的方式是，使用符合 ECMAScript 提案 的 import() 语法。第二种，则是使用 webpack 特定的 require.ensure。
懒加载或者按需加载：
vue，react之类的库是支持这种异步组件的，拿vue来说，

1. 全局注册：
   Vue.component("AsyncCmp", () => import("./AsyncCmp"));

2. 局部注册：
   new Vue({
   // ...
   components: {
   AsyncCmp: () => import("./AsyncCmp")
   }
   });

3. vue-router内置也支持延迟加载：
   // Instead of: import Login from './login'
   const Login = () => import("./login");

   new VueRouter({
   routes: [{ path: "/login", component: Login }]
   });

4. Vuex有一种registerModule方法可以让我们动态创建Vuex模块：
   const store = new Vuex.Store();
   ...
   // Assume there is a "login" module we wanna load
   import('./store/login').then(loginModule => {
   store.registerModule('login', loginModule)
   })

参考文档： https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/