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

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

1、入口起点

这是迄今为止最简单、最直观的分离代码的方式。不过，这种方式手动配置较多

webpack.config.js

1. 
   
2. const path = require('path');
3. const HTMLWebpackPlugin = require('html-webpack-plugin');
5. module.exports = {
6. entry: {
7. index: './src/index.js',
8. another: './src/another-module.js'
9. },
10. plugins: [
11. new HTMLWebpackPlugin({
12. title: 'Code Splitting'
13. })
14. ],
15. output: {
16. filename: '[name].bundle.js',
17. path: path.resolve(__dirname, 'dist')
18. }
19. };

这将生成如下构建结果

1. 
   
2. Hash: 309402710a14167f42a8
3. Version: webpack 2.6.1
4. Time: 570ms
5. Asset Size Chunks Chunk Names
6. index.bundle.js 544 kB 0 [emitted] [big] index
7. another.bundle.js 544 kB 1 [emitted] [big] another
8. [0] ./~/lodash/lodash.js 540 kB {0} {1} [built]
9. [1] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
10. [2] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
11. [3] ./src/another-module.js 87 bytes {1} [built]
12. [4] ./src/index.js 216 bytes {0} [built]

正如前面提到的，这种方法存在一些问题:

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

2、防止重复

CommonsChunkPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。让我们使用这个插件，将之前的示例中重复的 lodash 模块去除：

webpack.config.js

1. 
   
2. const path = require('path');
3. + const webpack = require('webpack');
4. const HTMLWebpackPlugin = require('html-webpack-plugin');
6. module.exports = {
7. entry: {
8. index: './src/index.js',
9. another: './src/another-module.js'
10. },
11. plugins: [
12. new HTMLWebpackPlugin({
13. title: 'Code Splitting'
14. - })
15. + }),
16. + new webpack.optimize.CommonsChunkPlugin({
17. + name: 'common' // 指定公共 bundle 的名称。
18. + })
19. ],
20. output: {
21. filename: '[name].bundle.js',
22. path: path.resolve(__dirname, 'dist')
23. }
24. };

这里我们使用 CommonsChunkPlugin 之后，现在应该可以看出，index.bundle.js 中已经移除了重复的依赖模块。需要注意的是，CommonsChunkPlugin 插件将 lodash 分离到单独的 chunk，并且将其从 main bundle 中移除，减轻了大小。执行 npm run build 查看效果：

1. 
   
2. Hash: 70a59f8d46ff12575481
3. Version: webpack 2.6.1
4. Time: 510ms
5. Asset Size Chunks Chunk Names
6. index.bundle.js 665 bytes 0 [emitted] index
7. another.bundle.js 537 bytes 1 [emitted] another
8. common.bundle.js 547 kB 2 [emitted] [big] common
9. [0] ./~/lodash/lodash.js 540 kB {2} [built]
10. [1] (webpack)/buildin/global.js 509 bytes {2} [built]
11. [2] (webpack)/buildin/module.js 517 bytes {2} [built]
12. [3] ./src/another-module.js 87 bytes {1} [built]
13. [4] ./src/index.js 216 bytes {0} [built]

以下是由社区提供的，一些对于代码分离很有帮助的插件和 loaders：

• ExtractTextPlugin: 用于将 CSS 从主应用程序中分离。
• bundle-loader: 用于分离代码和延迟加载生成的 bundle。
• promise-loader: 类似于 bundle-loader ，但是使用的是 promises。

CommonsChunkPlugin 插件还可以通过使用显式的 vendor chunks 功能，从应用程序代码中分离 vendor 模块。

3、动态导入

当涉及到动态代码拆分时， 一般使用使用webpack提供的符合 ECMAScript 提案 的 import() 语法。

new Vue({

1. 
   
2. el: '#app',
3. components: {
4. AsyncComponent: () => import('./AsyncComponent.vue')
5. }
6. });

实施代码分割并不难，难在搞清楚在什么时候、什么地方进行。

Vue.js 单页应用进行代码分割有三种思路：

• 按页面分割
• 使用折叠
• 按条件分割

1. 按页面

按页面来进行代码分割，是最明显的一种方式。

如果能确保每个单文件组件代表一个页面，如 Home.vue, About.vue 以及 Contact.vue，那么我们就可以使用 Webpack 的 "动态导入" 函数 (import) 来将它们分割至单独的构建文件中。之后后，当用户访问一个新页面的时候，Webpack 将异步加载该请求的页面文件。

如果用到了 vue-router，由于页面已经分割成了单独的组件，实施起来会非常方便。

1. 
   
2. const Home = () => import(/* webpackChunkName: "home" */ './Home.vue');
3. const About = () => import(/* webpackChunkName: "about" */ './About.vue');
4. const Contact = () => import(/* webpackChunkName: "contact" */ './Contact.vue');
5. const routes = [
6. { path: '/', name: 'home', component: Home },
7. { path: '/about', name: 'about', component: About },
8. { path: '/contact', name: 'contact', component: Contact }
9. ];

代码编译完成后，通过查看生成的统计数据得知：每个页面都有自己单独的文件，同时有多出来一个名为 build_main.js 的打包文件。里面包含一些公共的代码以及逻辑，用来异步加载其它文件，因此它需要在用户访问路由之前加载完成。

2. 折叠

“折叠” 是指页面初次加载时，视图的不可见部分。用户通常会花费 1~2 秒来浏览可视区域，特别是第一次访问网站的时候（可能更久），之后才开始向下滑动页面。

这个时候，可以异步加载剩余的内容。

3. 条件展示内容

代码分割另一种比较好的备选方式，是按条件展示。比如：模态框、标签页、下拉菜单之类。

如果我们需要一个模态框，给模态框设置 v-if 属性，绑定了 show 变量。一方面用来控制模态框是否显示，同时也决定了是否应该渲染模态框组件。当页面加载的时候，它的值为 false，模态框的代码只有当它显示的时候才会被加载。如果用户永远不打开这个模态框，这部分代码就永远不会被下载。缺点是，可能会增加很小的用户体验成本：用户点击按钮后，需要等待代码文件下载完成。